/* ==========================================================================
   FIFA Tournament Bracket
   ========================================================================== */

.fifa-bracket-graph {
  --card-width: 90px;
  --card-height: 86px;

  --round-gap-y: 12px;
  --round-step: calc(var(--card-height) + var(--round-gap-y));
  --bracket-height: calc((var(--card-height) * 8.5) + (var(--round-gap-y) * 7));

  /* Increase this to use the empty right space */
  --round-gap-x: 45px;

  /*
    Center spacing formula:
    visible semi-final -> final gap = center-gap-x + center-extra-half-x

    So:
    18px + 10px = 28px

    This makes semi-final/final gap equal to normal round gap.
  */
  --center-extra-half-x: 10px;
  --center-width: calc(var(--card-width) + (var(--center-extra-half-x) * 2));
  --center-gap-x: calc(var(--round-gap-x) - var(--center-extra-half-x));

  --round-label-height: 22px;
  --round-label-margin: 8px;
  --round-label-offset: calc(
    var(--round-label-height) + var(--round-label-margin)
  );

  --line-color: #d1cfcf;
  --line-radius: 8px;
  --line-size: 3px;

  /*
    Small overlap prevents tiny visual gaps between separately drawn connector pieces.
    Increase to 3px if browser zoom/tablet still shows a hairline gap.
  */
  --connector-overlap: 1px;

  display: grid;
  grid-template-columns: max-content var(--center-width) max-content;
  gap: var(--center-gap-x);
  align-items: start;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0 10px;
  height: var(--bracket-height);
}

/* ==========================================================================
   Bracket Columns
   ========================================================================== */

.fifa-bracket-graph__side {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-width);
  gap: var(--round-gap-x);
  height: var(--bracket-height);
  min-width: max-content;
}

.fifa-bracket-graph__round {
  position: relative;
  width: var(--card-width);
}

.fifa-bracket-graph__matches {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--match-gap);
}

.fifa-bracket-graph__match-wrap {
  position: relative;
  z-index: 1;
  --match-line-color: var(--line-color);
}

.fifa-bracket-graph__match-wrap--finished {
  --match-line-color: #5f8f79;
}

.fifa-bracket-graph__match-wrap--live {
  --match-line-color: #d59a29;
}

.fifa-bracket-graph__match-wrap--postponed {
  --match-line-color: #a17c7c;
}

/* ==========================================================================
   Round Vertical Positioning
   ========================================================================== */

.fifa-bracket-graph__round--round_of_32 {
  margin-top: 0;
  --match-gap: var(--round-gap-y);
  --connector-span: var(--round-step);
}

.fifa-bracket-graph__round--round_of_16 {
  margin-top: calc(var(--round-step) / 2);
  --match-gap: calc((var(--round-step) * 2) - var(--card-height));
  --connector-span: calc(var(--round-step) * 2);
}

.fifa-bracket-graph__round--quarter_final {
  margin-top: calc(var(--round-step) * 1.5);
  --match-gap: calc((var(--round-step) * 4) - var(--card-height));
  --connector-span: calc(var(--round-step) * 4);
}

.fifa-bracket-graph__round--semi_final {
  margin-top: calc(var(--round-step) * 3.5);
  --match-gap: 0;
  --connector-span: 0;
}

/* ==========================================================================
   Left Side Connectors
   ========================================================================== */

/*
  Left side flow:
  Round of 32 -> Round of 16 -> Quarter -> Semi -> Final

  The outer/previous round draws the rounded bracket elbow.
  The next round draws only the small incoming straight line.
*/

/* Incoming straight line into each next left-side round */
.fifa-bracket-graph__side--left
  .fifa-bracket-graph__round:not(:first-child)
  .fifa-bracket-graph__match-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(((var(--round-gap-x) / 2) + var(--connector-overlap)) * -1);
  width: calc((var(--round-gap-x) / 2) + var(--connector-overlap));
  height: var(--line-size);
  background: var(--match-line-color);
  transform: translateY(-50%);
}

.fifa-bracket-graph__side--left
  .fifa-bracket-graph__round:not(:first-child)
  .fifa-bracket-graph__match-wrap--incoming-finished::before {
  background: #5f8f79;
}

.fifa-bracket-graph__side--left
  .fifa-bracket-graph__round:not(:first-child)
  .fifa-bracket-graph__match-wrap--incoming-live::before {
  background: #d59a29;
}

.fifa-bracket-graph__side--left
  .fifa-bracket-graph__round:not(:first-child)
  .fifa-bracket-graph__match-wrap--incoming-postponed::before {
  background: #a17c7c;
}

/* Rounded elbow from previous left-side round */
.fifa-bracket-graph__side--left
  .fifa-bracket-graph__round:not(:last-child)
  .fifa-bracket-graph__match-wrap:nth-child(odd)
  .fifa-bracket-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(((var(--round-gap-x) / 2) + var(--connector-overlap)) * -1);
  width: calc((var(--round-gap-x) / 2) + var(--connector-overlap));
  height: var(--connector-span);
  border-top: var(--line-size) solid var(--line-color);
  border-right: var(--line-size) solid var(--line-color);
  border-bottom: var(--line-size) solid var(--line-color);
  border-left: 0;
  border-radius: 0 var(--line-radius) var(--line-radius) 0;
  background: transparent;
  pointer-events: none;
  z-index: -1;
}

.fifa-bracket-graph__side--left
  .fifa-bracket-graph__round:not(:last-child)
  .fifa-bracket-graph__match-wrap:nth-child(odd).fifa-bracket-graph__match-wrap--finished::after,
.fifa-bracket-graph__side--left
  .fifa-bracket-graph__round:not(:last-child)
  .fifa-bracket-graph__match-wrap:nth-child(odd).fifa-bracket-graph__match-wrap--live::after,
.fifa-bracket-graph__side--left
  .fifa-bracket-graph__round:not(:last-child)
  .fifa-bracket-graph__match-wrap:nth-child(odd).fifa-bracket-graph__match-wrap--postponed::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(((var(--round-gap-x) / 2) + var(--connector-overlap)) * -1);
  width: calc((var(--round-gap-x) / 2) + var(--connector-overlap));
  height: calc(var(--connector-span) / 2);
  border-top: var(--line-size) solid var(--match-line-color);
  border-right: var(--line-size) solid var(--match-line-color);
  border-bottom: 0;
  border-left: 0;
  border-radius: 0 var(--line-radius) 0 0;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}

.fifa-bracket-graph__side--left
  .fifa-bracket-graph__round:not(:last-child)
  .fifa-bracket-graph__match-wrap:nth-child(even).fifa-bracket-graph__match-wrap--finished::after,
.fifa-bracket-graph__side--left
  .fifa-bracket-graph__round:not(:last-child)
  .fifa-bracket-graph__match-wrap:nth-child(even).fifa-bracket-graph__match-wrap--live::after,
.fifa-bracket-graph__side--left
  .fifa-bracket-graph__round:not(:last-child)
  .fifa-bracket-graph__match-wrap:nth-child(even).fifa-bracket-graph__match-wrap--postponed::after {
  content: "";
  position: absolute;
  top: calc(50% - (var(--connector-span) / 2));
  right: calc(((var(--round-gap-x) / 2) + var(--connector-overlap)) * -1);
  width: calc((var(--round-gap-x) / 2) + var(--connector-overlap));
  height: calc(var(--connector-span) / 2);
  border-top: 0;
  border-right: var(--line-size) solid var(--match-line-color);
  border-bottom: var(--line-size) solid var(--match-line-color);
  border-left: 0;
  border-radius: 0 0 var(--line-radius) 0;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   Right Side Connectors
   ========================================================================== */

/*
  Right side is visually mirrored.

  Important:
  The right-side array order in Twig should still be:
  Semi -> Quarter -> Round of 16 -> Round of 32
  or rendered in the order that matches your current visual.
*/

/* Incoming straight line into each next right-side round */
.fifa-bracket-graph__side--right
  .fifa-bracket-graph__round:not(:last-child)
  .fifa-bracket-graph__match-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(((var(--round-gap-x) / 2) + var(--connector-overlap)) * -1);
  width: calc((var(--round-gap-x) / 2) + var(--connector-overlap));
  height: var(--line-size);
  background: var(--match-line-color);
  transform: translateY(-50%);
}

.fifa-bracket-graph__side--right
  .fifa-bracket-graph__round:not(:last-child)
  .fifa-bracket-graph__match-wrap--incoming-finished::after {
  background: #5f8f79;
}

.fifa-bracket-graph__side--right
  .fifa-bracket-graph__round:not(:last-child)
  .fifa-bracket-graph__match-wrap--incoming-live::after {
  background: #d59a29;
}

.fifa-bracket-graph__side--right
  .fifa-bracket-graph__round:not(:last-child)
  .fifa-bracket-graph__match-wrap--incoming-postponed::after {
  background: #a17c7c;
}

/* Rounded elbow from previous right-side round */
.fifa-bracket-graph__side--right
  .fifa-bracket-graph__round:not(:first-child)
  .fifa-bracket-graph__match-wrap:nth-child(odd)
  .fifa-bracket-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(((var(--round-gap-x) / 2) + var(--connector-overlap)) * -1);
  width: calc((var(--round-gap-x) / 2) + var(--connector-overlap));
  height: var(--connector-span);
  border-top: var(--line-size) solid var(--line-color);
  border-left: var(--line-size) solid var(--line-color);
  border-bottom: var(--line-size) solid var(--line-color);
  border-right: 0;
  border-radius: var(--line-radius) 0 0 var(--line-radius);
  background: transparent;
  pointer-events: none;
  z-index: -1;
}

.fifa-bracket-graph__side--right
  .fifa-bracket-graph__round:not(:first-child)
  .fifa-bracket-graph__match-wrap:nth-child(odd).fifa-bracket-graph__match-wrap--finished::before,
.fifa-bracket-graph__side--right
  .fifa-bracket-graph__round:not(:first-child)
  .fifa-bracket-graph__match-wrap:nth-child(odd).fifa-bracket-graph__match-wrap--live::before,
.fifa-bracket-graph__side--right
  .fifa-bracket-graph__round:not(:first-child)
  .fifa-bracket-graph__match-wrap:nth-child(odd).fifa-bracket-graph__match-wrap--postponed::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(((var(--round-gap-x) / 2) + var(--connector-overlap)) * -1);
  width: calc((var(--round-gap-x) / 2) + var(--connector-overlap));
  height: calc(var(--connector-span) / 2);
  border-top: var(--line-size) solid var(--match-line-color);
  border-left: var(--line-size) solid var(--match-line-color);
  border-bottom: 0;
  border-right: 0;
  border-radius: var(--line-radius) 0 0 0;
  background: transparent;
  pointer-events: none;
  z-index: 3;
}

.fifa-bracket-graph__side--right
  .fifa-bracket-graph__round:not(:first-child)
  .fifa-bracket-graph__match-wrap:nth-child(even).fifa-bracket-graph__match-wrap--finished::before,
.fifa-bracket-graph__side--right
  .fifa-bracket-graph__round:not(:first-child)
  .fifa-bracket-graph__match-wrap:nth-child(even).fifa-bracket-graph__match-wrap--live::before,
.fifa-bracket-graph__side--right
  .fifa-bracket-graph__round:not(:first-child)
  .fifa-bracket-graph__match-wrap:nth-child(even).fifa-bracket-graph__match-wrap--postponed::before {
  content: "";
  position: absolute;
  top: calc(50% - (var(--connector-span) / 2));
  left: calc(((var(--round-gap-x) / 2) + var(--connector-overlap)) * -1);
  width: calc((var(--round-gap-x) / 2) + var(--connector-overlap));
  height: calc(var(--connector-span) / 2);
  border-top: 0;
  border-left: var(--line-size) solid var(--match-line-color);
  border-bottom: var(--line-size) solid var(--match-line-color);
  border-right: 0;
  border-radius: 0 0 0 var(--line-radius);
  background: transparent;
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   Semi Final To Final Connectors
   ========================================================================== */

.fifa-bracket-graph__side--left
  .fifa-bracket-graph__round--semi_final
  .fifa-bracket-graph__match-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc((var(--center-gap-x) + var(--connector-overlap)) * -1);
  width: calc(var(--center-gap-x) + var(--connector-overlap));
  height: var(--line-size);
  background: var(--match-line-color);
  transform: translateY(-50%);
}

.fifa-bracket-graph__side--right
  .fifa-bracket-graph__round--semi_final
  .fifa-bracket-graph__match-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc((var(--center-gap-x) + var(--connector-overlap)) * -1);
  width: calc(var(--center-gap-x) + var(--connector-overlap));
  height: var(--line-size);
  background: var(--match-line-color);
  transform: translateY(-50%);
}

/* Final card pulls lines from both sides */
.fifa-bracket-card--final::before,
.fifa-bracket-card--final::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(
    ((var(--center-width) - var(--card-width)) / 2) + var(--connector-overlap)
  );
  height: var(--line-size);
  background: var(--line-color-local, var(--line-color));
  transform: translateY(-50%);
  pointer-events: none;
  z-index: -1;
}

.fifa-bracket-card--final::before {
  right: 100%;
}

.fifa-bracket-card--final::after {
  left: 100%;
}

/* ==========================================================================
   Center Area
   ========================================================================== */

.fifa-bracket-graph__center {
  position: relative;
  height: var(--bracket-height);
  min-height: var(--bracket-height);
}

.fifa-bracket-final-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  text-align: center;
  z-index: 2;
}

.fifa-bracket-final-panel__trophy {
  position: absolute;
  top: calc(50% + var(--round-label-offset) - 200px);
  left: 23px;
  width: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  line-height: 1;
  color: #77777a;
}

.fifa-bracket-final-panel__kicker {
  position: absolute;
  top: calc(50% + var(--round-label-offset) - 222px);
  left: 0;
  width: 100%;
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #b8a99a;
}

.fifa-bracket-final-panel__match {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fifa-bracket-final-panel > .fifa-bracket-final-panel__match {
  position: absolute;
  top: calc(50% + var(--round-label-offset) - 84px);
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  z-index: 3;
}

.fifa-bracket-final-panel > .fifa-bracket-final-panel__match .fifa-bracket-card--final {
  position: static;
  top: auto;
  left: auto;
  transform: none;
}

.fifa-bracket-final-panel__final-label {
  margin-bottom: 10px;
}

.fifa-bracket-extra-matches {
  position: absolute;
  top: calc(50% + var(--round-label-offset) + 50px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
}

.fifa-bracket-mobile__center-match {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================================
   Match Card
   ========================================================================== */

.fifa-bracket-card {
  --card-bg: #f2f2f2;
  --card-border: #dcdcdc;
  --card-text: #111111;
  --card-muted: #747474;
  --card-score-bg: rgba(17, 17, 17, 0.06);
  --card-score-text: #111111;
  --line-color-local: var(--line-color);

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  z-index: 2;
  width: var(--card-width);
  height: var(--card-height);
  min-height: var(--card-height);
  box-sizing: border-box;
  padding: 7px 8px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  background: var(--card-bg);
  color: var(--card-text);
}

.fifa-bracket-card--finished {
  --card-bg: #e9f4ee;
  --card-border: #8eb89f;
  --card-text: #173728;
  --card-muted: #466455;
  --card-score-bg: rgba(34, 103, 68, 0.12);
  --card-score-text: #173728;
  --line-color-local: #5f8f79;
}

.fifa-bracket-card--upcoming {
  --card-bg: #f3f3f3;
  --card-border: #d6d6d6;
}

.fifa-bracket-card--live {
  --card-bg: #fff3dd;
  --card-border: #e0b05b;
  --card-text: #5b3a06;
  --card-muted: #8a6221;
  --card-score-bg: rgba(213, 154, 41, 0.16);
  --card-score-text: #5b3a06;
  --line-color-local: #d59a29;
}

.fifa-bracket-card--postponed {
  --card-bg: #f3e8e8;
  --card-border: #c9a7a7;
  --card-text: #5c2c2c;
  --card-muted: #815858;
  --card-score-bg: rgba(129, 88, 88, 0.12);
  --card-score-text: #5c2c2c;
  --line-color-local: #a17c7c;
}

.fifa-bracket-card--final {
  position: absolute;
  top: 50.31%;
  left: 50%;
  width: var(--card-width);
  margin: 0;
  transform: translate(-50%, -50%);
}

.fifa-bracket-round-label {
  margin-bottom: 8px;
  color: #111;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.fifa-bracket-round-label--desktop {
  margin-bottom: 10px;
}

.fifa-bracket-card__teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.fifa-bracket-card__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.fifa-bracket-card__flag-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
}

.fifa-bracket-card__flag {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 999px;
}

.fifa-bracket-card__flag--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #111;
  font-size: 20px;
}

.fifa-bracket-card__code {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fifa-bracket-card__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 14px;
  text-align: center;
}

.fifa-bracket-card--has-score .fifa-bracket-card__meta {
  min-height: 28px;
}

.fifa-bracket-card__date {
  display: block;
  color: var(--card-muted);
  font-size: 9px;
  line-height: 1.2;
}

.fifa-bracket-card__score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--card-score-bg);
  color: var(--card-score-text);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

/* ==========================================================================
   Mobile Bracket
   ========================================================================== */

.fifa-bracket-mobile {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  padding-bottom: 8px;
}

.fifa-bracket-mobile__track {
  --card-width: 102px;
  --card-height: 80px;
  --surface: #222224;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-width);
  gap: 18px;
  align-items: center;
  min-width: max-content;
  padding: 8px 2px;
}

.fifa-bracket-mobile__round {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fifa-bracket-mobile__center {
  --card-width: 102px;
  --card-height: 80px;
  --surface: #222224;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  min-height: 390px;
  text-align: center;
}

.fifa-bracket-mobile__trophy {
  position: absolute;
  top: 18px;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  color: #77777a;
  font-size: 44px;
}

.fifa-bracket-mobile__champion {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  color: #b8a99a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fifa-bracket-mobile__final-label {
  position: absolute;
  top: 88px;
  left: 50%;
  width: max-content;
  margin: 0;
  transform: translateX(-50%);
  z-index: 2;
}

.fifa-bracket-mobile__center .fifa-bracket-card--final {
  position: static;
  transform: none;
}

.fifa-bracket-mobile__extra {
  position: absolute;
  top: 262px;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateX(-50%);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1279px) {
  .fifa-bracket-graph {
    --card-width: 80px;
    --card-height: 82px;

    --round-gap-y: 10px;
    --round-step: calc(var(--card-height) + var(--round-gap-y));
    --bracket-height: calc((var(--card-height) * 8) + (var(--round-gap-y) * 7));

    --round-gap-x: 22px;

    --center-extra-half-x: 8px;
    --center-width: calc(var(--card-width) + (var(--center-extra-half-x) * 2));
    --center-gap-x: calc(var(--round-gap-x) - var(--center-extra-half-x));

    --connector-overlap: 2px;
  }
}

@media (max-width: 1023px) {
  .fifa-bracket-card {
    width: var(--card-width);
    height: var(--card-height);
  }
}

/* ==========================================================================
   Tablet Fit: Show full desktop bracket from 768px+
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .fifa-bracket-graph {
    --card-width: 64px;
    --card-height: 64px;

    --round-gap-y: 8px;
    --round-step: calc(var(--card-height) + var(--round-gap-y));
    --bracket-height: calc(
      (var(--card-height) * 8.5) + (var(--round-gap-y) * 7)
    );

    /*
      Increased from very tight 8px.
      This should use the empty right-side space better.
    */
    --round-gap-x: 22px;

    /*
      9px + 4px = 13px
      So semi-final -> final gap equals other gaps.
    */
    --center-extra-half-x: 4px;
    --center-width: calc(var(--card-width) + (var(--center-extra-half-x) * 2));
    --center-gap-x: calc(var(--round-gap-x) - var(--center-extra-half-x));

    --round-label-height: 16px;
    --round-label-margin: 5px;
    --round-label-offset: calc(
      var(--round-label-height) + var(--round-label-margin)
    );

    --line-radius: 5px;
    --connector-overlap: 2px;

    padding: 4px 0 8px;
  }

  .fifa-bracket-graph__round-label {
    height: var(--round-label-height);
    margin-bottom: var(--round-label-margin);
    font-size: 7px;
    letter-spacing: 0;
  }

  .fifa-bracket-card {
    padding: 5px 4px;
    border-radius: 7px;
  }

  .fifa-bracket-card__teams {
    gap: 4px;
  }

  .fifa-bracket-card__team {
    gap: 2px;
  }

  .fifa-bracket-card__flag-wrap {
    height: 14px;
  }

  .fifa-bracket-card__flag {
    width: 14px;
    height: 14px;
  }

  .fifa-bracket-card__code {
    font-size: 8px;
    line-height: 1.1;
  }

  .fifa-bracket-card__meta {
    min-height: 12px;
  }

  .fifa-bracket-card--has-score .fifa-bracket-card__meta {
    min-height: 20px;
  }

  .fifa-bracket-card__date {
    font-size: 7px;
    line-height: 1.2;
  }

  .fifa-bracket-card__score {
    min-width: 28px;
    margin-top: 2px;
    padding: 1px 4px;
    font-size: 7px;
  }

  .fifa-bracket-card--final {
    top: 50.95%;
  }

  .fifa-bracket-final-panel__trophy {
    top: calc(50% + var(--round-label-offset) - 112px);
    font-size: 34px;
  }

  .fifa-bracket-final-panel__kicker {
    top: calc(50% + var(--round-label-offset) - 62px);
    font-size: 8px;
    letter-spacing: 0.16em;
  }

  .fifa-bracket-extra-matches {
    gap: 7px;
  }
}