/* -------------------------------------------------------
   KNOCKOUT BRACKET — DEMO GEOMETRY + SITE COLORS
------------------------------------------------------- */

/* Wrapper centers the bracket and moves it below header */
.bracket-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px; /* pushes bracket below header */
  min-height: 90vh;  /* ensures footer stays below */
}

/* Scaled bracket container */
.bracket-scale {
  transform-origin: top center;
  transition: transform 0.2s ease;
}

/* Horizontal layout of columns */
.fifa-bracket {
  position: relative;
  display: flex;
  gap: 22px;        /* demo spacing */
  padding: 6px;
  margin-left: auto;
  margin-right: auto;
}

/* Each round column */
.round {
  position: relative;
  width: 90px;
  flex-shrink: 0;
}

.round h4 {
  text-align: center;
  font-size: 9px;
  margin-bottom: 12px;
  color: var(--muted);
}

/* Match box */
.fifa-match {
  position: absolute;
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.team {
  display: flex;
  justify-content: space-between;
  line-height: 1.1;
  color: var(--fg);
}

/* Connector SVG */
svg.bracket-connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Demo-style connector lines */
svg.bracket-connectors path {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.9;
}

/* Footer spacing */
footer {
  margin-top: 40px;
  text-align: center;
}

/* Print mode */
@media print {
  header, footer, nav, #theme-toggle {
    display: none !important;
  }
  .bracket-wrapper {
    height: auto;
    overflow: visible;
    margin-top: 0 !important;
  }
  .bracket-scale {
    transform: scale(1) !important;
  }
  @page {
    size: letter landscape;
    margin: 0.25in;
  }
}