/* ================================
   MSB Swiss Standings — Full CSS
   Now with responsive scalability
   ================================ */

/* ----- OUTER: center horizontally; optional vertical center ----- */
.msb-swiss-outer{
  display:flex;
  justify-content:center;
  width:100%;
}
.msb-swiss-outer.is-vert-center{
  align-items:center;
  height:100%;
}

/* ----- VIEWPORT: horizontal pan, never blocks vertical page scroll ----- */
.msb-viewport{
  width:100%;
  max-width:100vw;
  overflow-x:auto !important;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  touch-action:auto;
  cursor: grab;
}
.msb-viewport.is-dragging{ cursor: grabbing; }

/* ----- CORE VARS (scalable with clamp) ----- */
.msb-swiss{
  /* layout spacing scales with viewport */
  --col-gap: clamp(24px, 4vw, 56px);
  --row-gap: clamp(10px, 1.6vw, 16px);
  /* column width scales smoothly for laptop → desktop → mobile */
  --col-width: clamp(190px, 26vw, 320px);

  /* logo sizes */
  --logo:    clamp(24px, 3vw, 38px);   /* main row logos */
  --logo-sm: clamp(16px, 1.8vw, 21px); /* banner logos */

  /* panel and row geometry */
  --panel-pad: clamp(8px, 1.2vw, 12px);
  --row-pad-y: clamp(8px, 1.2vw, 12px);
  --row-pad-x: clamp(10px, 1.6vw, 14px);
  --row-radius: clamp(10px, 1.2vw, 12px);
  --panel-radius: clamp(12px, 1.4vw, 14px);

  /* score pill scales */
  --pill-minw: clamp(48px, 5.5vw, 64px);
  --pill-h:    clamp(24px, 2.2vw, 30px);
  --pill-r:    clamp(10px, 1vw, 12px);

  /* type scales */
  --title-size: clamp(12px, 1.2vw, 14px);
  --subline:    clamp(10px, 1vw, 12px);
  --tooltip:    clamp(10px, 1vw, 12px);

  --panel-bg: rgba(255,255,255,.075);
  --panel-br: rgba(255,255,255,.10);
  --row-bg:   rgba(0,0,0,.25);
  --row-br:   rgba(255,255,255,.10);
  color:#fff;
}

/* Grid sizes to content so it can center and scroll horizontally */
.msb-swiss-grid{
  display:grid;
  grid-template-columns:repeat(5, var(--col-width));
  column-gap:var(--col-gap);
  row-gap:var(--row-gap);
  width:max-content;
  margin:0 auto;
  position:relative;
  align-items:center;
}

/* ----- Footer bar (optional) ----- */
.msb-swiss-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:8px 12px;margin-top:18px;
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;backdrop-filter:blur(6px);color:#fff;
}
.msb-swiss-bar .msb-title{font-weight:700;letter-spacing:.04em;}
.msb-swiss-bar .msb-chip{display:inline-block;padding:6px 10px;border-radius:8px;background:#fff;color:#111;font-weight:700;font-size:12px;}

/* ----- Column ----- */
.msb-col{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--row-gap);
}

/* ----- Bucket banners (HU labels rendered in PHP) ----- */
.msb-bucket-banner{
  text-align:center;
  font-weight:800;
  letter-spacing:.06em;
  font-size:12px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid transparent;
  margin-bottom:8px;
}
.msb-bucket-banner--adv{
  color:#2be08c;
  border-color:rgba(23,201,100,.35);
  background:rgba(23,201,100,.12);
}
.msb-bucket-banner--elim{
  color:#ff8a8a;
  border-color:rgba(255,75,75,.35);
  background:rgba(255,75,75,.12);
  margin-top:8px;
}
.msb-banner-logos{
  margin-top:6px;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.msb-logo-sm{ width:var(--logo-sm); height:var(--logo-sm); object-fit:contain; display:inline-block; }
.msb-logo-sm--ph{
  background:rgba(255,255,255,.14);
  border-radius:50%;
  color:#111;font-weight:800;font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;
}

/* Make logos clickable for team path highlight */
.msb-logo, .msb-logo-sm, .msb-logo-sm--ph { cursor: pointer; }

/* ----- Bucket panel (BLAST-like) with subtle, seamless gradient ----- */
.msb-bucket-panel{
  position:relative;
  background:var(--panel-bg);
  border:1px solid var(--panel-br);
  border-radius:var(--panel-radius);
  padding:var(--panel-pad);
  overflow:hidden;
}
/* Smooth radial gradient from top-left; full cover to avoid seams */
.msb-bucket-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(
    120% 140% at 0% 0%,
    rgba(243,106,73,0.16) 0%,
    rgba(243,106,73,0.08) 25%,
    rgba(243,106,73,0.03) 45%,
    rgba(243,106,73,0.00) 65%
  );
}

/* Bucket header */
.msb-bucket-head{
  display:flex;justify-content:center;align-items:center;margin-bottom:12px;
}
.msb-bucket-title{
  font-weight:900; letter-spacing:.05em; text-align:center; color:#f36a49;
  font-size: var(--title-size);
}

/* ----- Match rows (logo — centered score pill + date — logo) ----- */
.msb-match{
  position:relative;
  display:grid;
  grid-template-columns:var(--logo) 1fr var(--logo);
  align-items:center;
  gap:12px;
  background:var(--row-bg);
  border:1px solid var(--row-br);
  border-radius:var(--row-radius);
  padding:var(--row-pad-y) var(--row-pad-x);
  color:#fff;
}
.msb-match + .msb-match{ margin-top:10px; }

.msb-logo{ width:var(--logo); height:var(--logo); object-fit:contain; }
.msb-logo--placeholder{ background:rgba(255,255,255,.12); border-radius:50%; }

/* center stack */
.msb-score-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
.msb-score-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--pill-minw); height:var(--pill-h); padding:0 clamp(8px, 1.2vw, 12px);
  border-radius:var(--pill-r);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
}
.msb-score{ font-weight:800; letter-spacing:.02em; }
.msb-subline{ margin-top:6px; font-size:var(--subline); opacity:.9; white-space:nowrap; }

/* ----- Hover tooltip with team names ----- */
.msb-match[data-tip]::after,
.msb-match[data-tip]::before{
  position:absolute; left:50%; transform:translateX(-50%);
  pointer-events:none; opacity:0; transition:opacity .15s ease;
}
.msb-match[data-tip]::after{
  content:attr(data-tip);
  bottom:calc(100% + 8px);
  background:rgba(8,8,10,.95);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; font-weight:700; font-size:var(--tooltip);
  padding:8px 10px; border-radius:8px; white-space:nowrap; z-index:10;
}
.msb-match[data-tip]::before{
  content:""; bottom:100%;
  border:6px solid transparent; border-top-color:rgba(8,8,10,.95);
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.12));
}
.msb-match:hover::after,
.msb-match:hover::before{ opacity:1; }

/* ----- Team progress highlight (only when cursor is on a logo) ----- */
.msb-match.is-highlight{
  border-color:#f36a49 !important;
  box-shadow:
    0 0 0 2px rgba(243,106,73,.70),
    0 8px 22px rgba(243,106,73,.18);
  background:
    linear-gradient(180deg, rgba(243,106,73,.10), rgba(243,106,73,0) 65%),
    var(--row-bg);
}
.msb-match.is-highlight .msb-score-pill{
  background: rgba(243,106,73,.20);
  border-color: rgba(243,106,73,.65);
}

/* spacing between stacked buckets */
.msb-stack-gap{ height:16px; }

/* ----- SVG connectors overlay ----- */
.msb-connectors{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
}
.msb-conn{ stroke-linecap:round; stroke-width:4; fill:none; }
.msb-conn--adv{ stroke:rgba(43,224,140,.95); }
.msb-conn--elim{ stroke:rgba(255,138,138,.95); }

/* Highlighted connectors for hovered team path */
.msb-conn--hl{
  stroke:#f36a49 !important;
  stroke-width:6;
  filter: drop-shadow(0 0 6px rgba(243,106,73,.45));
}

/* ----- Extra tiny screens: tighten a bit more ----- */
@media (max-width: 360px){
  .msb-swiss{
    --col-width: 180px;
    --col-gap: 22px;
    --logo: 22px;
    --logo-sm: 15px;
    --pill-minw: 44px;
    --pill-h: 22px;
  }
}

/* ----- Box-model reset for safety ----- */
.msb-swiss, .msb-swiss *{ box-sizing:border-box; }