/* FBB-WORLDCUP-HISTORY-ASSET-VERSION 20260702-2 */
/*
 * World Cup historical predictions
 * Same card layout as predictions.html with World Cup colours.
 */

:root {
  --fbb-wc-history-bg: #0d100f;
  --fbb-wc-history-card: #171a18;
  --fbb-wc-history-card-hover: #1b211d;

  --fbb-wc-history-border:
    rgba(0, 255, 135, 0.25);

  --fbb-wc-history-border-hover:
    rgba(244, 200, 90, 0.68);

  --fbb-wc-history-green: #00ff87;
  --fbb-wc-history-green-soft: #73e6ac;

  --fbb-wc-history-gold: #f4c85a;
  --fbb-wc-history-gold-dark: #c99622;

  --fbb-wc-history-text: #ffffff;
  --fbb-wc-history-muted: #aebcb5;
}


#historySection,
#historicalSection,
#worldCupHistorySection,
[data-history-section],
.history-section,
.historical-section {
  position: relative;
  overflow: hidden;
  width: min(1240px, calc(100% - 32px));
  margin: 32px auto;
  padding: 20px 18px;

  border:
    1px solid
    var(--fbb-wc-history-border);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(0, 255, 135, 0.08),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #0f1311,
      var(--fbb-wc-history-bg)
    );

  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28);
}


#historySection::before,
#historicalSection::before,
#worldCupHistorySection::before,
[data-history-section]::before,
.history-section::before,
.historical-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(244, 200, 90, 0.72),
      transparent
    );

  pointer-events: none;
}


#historyTitle,
.history-section h2,
.historical-section h2 {
  margin: 0 0 8px;
  color: var(--fbb-wc-history-text);
  font-size: clamp(1.32rem, 2vw, 1.68rem);
  font-weight: 850;
  line-height: 1.15;
}


#historyTitle::first-letter {
  color: var(--fbb-wc-history-gold);
}


#historyIntro,
.history-intro {
  margin: 0;
  color: var(--fbb-wc-history-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}


.fbb-wc-history-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;
  width: 100%;
  margin-top: 18px;
}


.fbb-wc-history-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 166px;
  margin: 0;
  padding: 15px 14px 14px;

  border:
    1px solid
    var(--fbb-wc-history-border);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(27, 31, 28, 0.98),
      rgba(20, 23, 21, 0.98)
    );

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.2);

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}


.fbb-wc-history-card:hover {
  transform: translateY(-2px);

  border-color:
    var(--fbb-wc-history-border-hover);

  background:
    linear-gradient(
      145deg,
      var(--fbb-wc-history-card-hover),
      rgba(18, 22, 19, 0.99)
    );

  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(0, 255, 135, 0.07);
}


.fbb-wc-history-title {
  min-width: 0;
  margin: 0 0 11px;

  color: var(--fbb-wc-history-text);

  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.32;

  overflow-wrap: anywhere;
}


.fbb-wc-history-date {
  margin: 0 0 8px;

  color: #afc5b9;

  font-size: 0.77rem;
  font-weight: 650;
  line-height: 1.35;
}


.fbb-wc-history-status {
  margin: 0 0 8px;

  color: var(--fbb-wc-history-green-soft);

  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}


.fbb-wc-history-status::before {
  content: "●";
  display: inline-block;
  margin-right: 6px;

  color: var(--fbb-wc-history-green);

  font-size: 0.63rem;
  vertical-align: 1px;
}


.fbb-wc-history-pick {
  min-width: 0;
  margin: 0 0 13px;

  color: var(--fbb-wc-history-muted);

  font-size: 0.79rem;
  font-weight: 650;
  line-height: 1.4;

  overflow-wrap: anywhere;
}


.fbb-wc-history-pick strong {
  color: var(--fbb-wc-history-text);
  font-weight: 800;
}


.fbb-wc-history-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  min-height: 36px;
  margin-top: auto;
  padding: 8px 14px;

  border:
    1px solid
    var(--fbb-wc-history-gold-dark);

  border-radius: 999px;

  color: #171309;

  background:
    linear-gradient(
      135deg,
      var(--fbb-wc-history-gold),
      #e7ae32
    );

  box-shadow:
    0 6px 16px rgba(201, 150, 34, 0.18);

  font-size: 0.77rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;

  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    filter 150ms ease;
}


.fbb-wc-history-button::before {
  content: "🏆";
  margin-right: 6px;
  font-size: 0.82rem;
}


.fbb-wc-history-button:hover,
.fbb-wc-history-button:focus-visible {
  transform: translateY(-1px);

  color: #0d120f;

  filter: brightness(1.07);

  box-shadow:
    0 8px 20px rgba(244, 200, 90, 0.26),
    0 0 16px rgba(0, 255, 135, 0.1);

  outline: none;
}


.fbb-wc-result-won {
  border-left:
    2px solid
    rgba(0, 255, 135, 0.62);
}


.fbb-wc-result-lost {
  border-left:
    2px solid
    rgba(217, 75, 85, 0.72);
}


.fbb-wc-result-void {
  border-left:
    2px solid
    rgba(244, 200, 90, 0.62);
}


@media (max-width: 1080px) {
  .fbb-wc-history-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


@media (max-width: 820px) {
  #historySection,
  #historicalSection,
  #worldCupHistorySection,
  [data-history-section],
  .history-section,
  .historical-section {
    width: min(100% - 20px, 1240px);
    margin: 24px auto;
    padding: 17px 14px;
    border-radius: 18px;
  }

  .fbb-wc-history-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 11px;
  }
}


@media (max-width: 560px) {
  .fbb-wc-history-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 15px;
  }

  .fbb-wc-history-card {
    min-height: 158px;
    padding: 14px 13px 13px;
    border-radius: 15px;
  }

  .fbb-wc-history-title {
    font-size: 0.91rem;
  }

  .fbb-wc-history-button {
    min-height: 35px;
    padding: 8px 13px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .fbb-wc-history-card,
  .fbb-wc-history-button {
    transition: none;
  }

  .fbb-wc-history-card:hover,
  .fbb-wc-history-button:hover {
    transform: none;
  }
}