/* Kumuls World Cup card (shared/_kumuls_card.php) — homepage, mobile + desktop.
   Always dark, like the event page it leads to (pages/kumuls.css). */
.kuc {
  --ku-gold: #f0c24b;
  --ku-gold-line: rgba(240, 194, 75, 0.38);
  --ku-btn: linear-gradient(180deg, #f8d56a 0%, #f0c24b 45%, #dda63c 100%);
  --ku-red: #e5393f;
  --ku-muted: #8b8b99;
  --ku-panel: #16161b;
  --ku-stripe: linear-gradient(90deg, #ce1126 0 33.3%, #000 33.3% 66.6%, #fcd116 66.6%);

  max-width: 31.75rem; /* the mock's card width; wider screens centre it */
  margin: 1rem auto;
  overflow: hidden;
  border: 0.0625rem solid transparent;
  border-radius: 1.375rem;
  background:
    linear-gradient(var(--ku-panel), var(--ku-panel)) padding-box,
    linear-gradient(135deg, rgba(255, 228, 150, 0.85), rgba(240, 194, 75, 0.18) 28%, rgba(240, 194, 75, 0.08) 60%, rgba(255, 228, 150, 0.7)) border-box;
  box-shadow: 0 1.125rem 2.75rem rgba(0, 0, 0, 0.6), 0 0 2.125rem rgba(240, 194, 75, 0.1);
  color: #fff;
  font-family: var(--font-brand);
  line-height: 1.5;
}

/* hero: flag behind a dark fade, title + LIVE */
.kuc-hero {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 1rem 0.875rem;
}
.kuc-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kuc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 13, 18, 0.97) 0%, rgba(14, 13, 18, 0.86) 50%, rgba(14, 13, 18, 0.35) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%);
}
.kuc-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.kuc-title {
  flex: 1;
  min-width: 0;
  font-size: clamp(0.75rem, 3.45vw, 1.0625rem);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.kuc-title span {
  background: var(--ku-btn);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kuc-live {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.5625rem;
  border: 0.0625rem solid rgba(229, 57, 63, 0.45);
  border-radius: 6.1875rem;
  background: rgba(229, 57, 63, 0.14);
  color: var(--ku-red);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.0625rem;
}
.kuc-live i {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--ku-red);
  animation: kuc-blink 1.4s infinite;
}
@keyframes kuc-blink { 50% { opacity: 0.25; } }

.kuc-stripe {
  height: 0.1875rem;
  background: var(--ku-stripe);
}

/* match carousel */
.kuc-matches {
  padding: 0.75rem 0 0.625rem;
  background: linear-gradient(180deg, #17141f, #121216);
}
.kuc-car { position: relative; }
.kuc-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.kuc-track::-webkit-scrollbar { display: none; }
.kuc-slide {
  flex: 0 0 100%;
  padding: 0 1rem;
  scroll-snap-align: start;
  cursor: pointer;
}

.kuc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kuc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.5625rem;
  border-radius: 0.375rem;
  background: #34343d;
  color: #bbb;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.0625rem;
}
.kuc-slide[data-state="open"] .kuc-pill {
  background: var(--ku-red);
  color: #fff;
}
.kuc-slide[data-state="open"] .kuc-pill::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #fff;
  animation: kuc-blink 1.4s infinite;
}
.kuc-round {
  color: #cfcfd8;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09375rem;
}

.kuc-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.375rem;
  margin: 0.5rem 2.5rem 0;
}
.kuc-team { text-align: center; }
.kuc-team img {
  display: block;
  width: 3.25rem;
  height: 2.1875rem;
  margin: 0 auto;
  object-fit: cover;
  border: 0.0625rem solid rgba(255, 228, 150, 0.35);
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.55);
}
.kuc-team img.is-samoa { object-position: left; }
.kuc-team b {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.03125rem;
}
.kuc-vs {
  color: var(--ku-gold);
  font-size: 1rem;
  font-weight: 900;
}
.kuc-when {
  margin-top: 0.375rem;
  color: var(--ku-gold);
  font-size: 0.78125rem;
  text-align: center;
}
.kuc-left {
  margin: 0.0625rem 0 0.5rem;
  color: var(--ku-muted);
  font-size: 0.71875rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.kuc-slide[data-state="closed"] .kuc-teams,
.kuc-slide[data-state="closed"] .kuc-when {
  opacity: 0.5;
  filter: grayscale(0.9);
}

.kuc-btn {
  display: block;
  padding: 0.625rem;
  border-radius: 0.625rem;
  background: var(--ku-btn);
  box-shadow: 0 0.25rem 0.875rem rgba(240, 194, 75, 0.25);
  color: #1a1405;
  font-size: 0.90625rem;
  font-weight: 600;
  text-align: center;
}
.kuc-btn[aria-disabled="true"] {
  background: #2a2a31;
  box-shadow: none;
  color: #6f6f7a;
  pointer-events: none;
}

.kuc-arr {
  position: absolute;
  top: 3rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  transform: translateY(-50%);
  border: 0.0625rem solid var(--ku-gold-line);
  border-radius: 50%;
  background: rgba(12, 12, 15, 0.85);
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.5);
  color: var(--ku-gold);
  cursor: pointer;
  transition: opacity 0.2s;
}
.kuc-arr svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
.kuc-arr.is-prev { left: 0.5rem; }
.kuc-arr.is-next { right: 0.5rem; }
.kuc-arr:disabled {
  opacity: 0.25;
  cursor: default;
}

/* footer: 1 / 2, dots, Details */
.kuc-bot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.625rem 1rem 0;
}
.kuc-count {
  color: var(--ku-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.kuc-dots {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
}
.kuc-dots i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 6.1875rem;
  background: #3a3a44;
  cursor: pointer;
  transition: all 0.25s;
}
.kuc-dots i.is-on {
  width: 1.625rem;
  background: var(--ku-btn);
}
.kuc-more {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  color: var(--ku-gold);
  font-size: 0.8125rem;
  font-weight: 600;
}
.kuc-more svg {
  width: 0.9375rem;
  height: 0.9375rem;
  fill: currentColor;
}

/* PC (kuc-wide): full width, bigger hero, every match side by side, no carousel */
.kuc-wide {
  max-width: none;
  margin: 0 0 2.5rem;
}
.kuc-wide .kuc-hero { padding: 1.375rem 1.75rem; }
.kuc-wide .kuc-bg { width: 55%; left: auto; }
.kuc-wide .kuc-hero::after {
  background:
    linear-gradient(90deg, rgba(14, 13, 18, 1) 0%, rgba(14, 13, 18, 0.97) 45%, rgba(14, 13, 18, 0.55) 75%, rgba(14, 13, 18, 0.2) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%);
}
.kuc-wide .kuc-title { font-size: 1.625rem; }
.kuc-wide .kuc-live { padding: 0.3125rem 0.875rem; font-size: 0.8125rem; }

.kuc-wide .kuc-matches { padding: 1.25rem 1.75rem 1.125rem; }
.kuc-wide .kuc-arr,
.kuc-wide .kuc-count,
.kuc-wide .kuc-dots { display: none; }
.kuc-wide .kuc-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1.25rem;
  overflow: visible;
}
.kuc-wide .kuc-slide {
  padding: 1rem 1.25rem 1.125rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.2s, background 0.2s;
}
.kuc-wide .kuc-slide:hover { border-color: var(--ku-gold-line); background: rgba(240, 194, 75, 0.04); }
.kuc-wide .kuc-slide[data-state="open"] { border-color: rgba(229, 57, 63, 0.5); }
.kuc-wide .kuc-teams { margin: 0.75rem 3rem 0; gap: 0.75rem; }
.kuc-wide .kuc-team img { width: 4.25rem; height: 2.875rem; }
.kuc-wide .kuc-team b { margin-top: 0.375rem; font-size: 0.9375rem; }
.kuc-wide .kuc-vs { font-size: 1.375rem; }
.kuc-wide .kuc-when { margin-top: 0.625rem; font-size: 0.9375rem; }
.kuc-wide .kuc-left { margin-bottom: 0.875rem; font-size: 0.8125rem; }
.kuc-wide .kuc-btn { padding: 0.75rem; font-size: 0.9375rem; }
.kuc-wide .kuc-bot { display: flex; justify-content: flex-end; padding: 0.875rem 0 0; }
.kuc-wide .kuc-live { background: rgba(14, 13, 18, 0.75); border-color: rgba(229, 57, 63, 0.7); }