/*
 * NBL Design System 2.0 "Next games" (Figma node 40041982:8013).
 *
 * Colours, radii, spacing and type come from the Figma component set:
 *   - Regular background: #061030 (navy) → #000000 → #F56B0D (orange).
 *   - Ignite Competition background: gradient sampled from the Figma art
 *     (stored as an image, not a token).
 *   - Divider: rgba(255, 255, 255, 0.16), 0.5px.
 *   - Timer value: Inter 600, 12px / 14px, #FFFFFF.
 *   - Timer label: Inter 600, 8px / 1.2em, #B2B2B2.
 *
 * The card scales from the 285x128 Figma frame with container queries, like the
 * Next Game module's Home Component. `.root` is the query container; every
 * dimension on `.card` and below reads a `cqi` custom property. Each property is
 * declared twice: the px value is the fallback for engines without
 * container-query units, which discard the `cqi` declaration at parse time.
 */

.hhQSETxFVHT2CzmiryLw {
  box-sizing: border-box;
  width: 100%;
  min-width: 0px;
  container-type: inline-size;

  --next-games-height: 128px;
  --next-games-height: clamp(104px, 44.9cqi, 168px);
  --next-games-radius: 8px;
  --next-games-radius: clamp(6px, 2.8cqi, 11px);
  --next-games-avatar: 64px;
  --next-games-avatar: clamp(52px, 22.5cqi, 84px);
  --next-games-broadcast-width: 127px;
  --next-games-broadcast-width: clamp(103px, 44.6cqi, 167px);
  --next-games-broadcaster-width: 109px;
  --next-games-broadcaster-width: clamp(89px, 38.2cqi, 143px);
  --next-games-broadcaster-height: 32px;
  --next-games-broadcaster-height: clamp(26px, 11.2cqi, 42px);
  --next-games-channel9-width: 36px;
  --next-games-channel9-width: clamp(29px, 12.6cqi, 47px);
  --next-games-channel9-height: 20px;
  --next-games-channel9-height: clamp(16px, 7cqi, 26px);
  --next-games-ignite-width: 66px;
  --next-games-ignite-width: clamp(54px, 23.2cqi, 87px);
  --next-games-ignite-height: 26px;
  --next-games-ignite-height: clamp(21px, 9.1cqi, 34px);
  --next-games-matchup-gap: 4px;
  --next-games-matchup-gap: clamp(3px, 1.4cqi, 5px);
  --next-games-matchup-inset: 11px;
  --next-games-matchup-inset: clamp(8px, 3.9cqi, 15px);
  --next-games-broadcast-gap: 2px;
  --next-games-broadcast-gap: clamp(2px, 0.7cqi, 3px);
  --next-games-segment-width: 22px;
  --next-games-segment-width: clamp(18px, 7.7cqi, 29px);
  --next-games-segment-gap: 9px;
  --next-games-segment-gap: clamp(7px, 3.2cqi, 12px);
  --next-games-digit-size: 12px;
  --next-games-digit-size: clamp(10px, 4.2cqi, 16px);
  --next-games-label-size: 8px;
  --next-games-label-size: clamp(7px, 2.8cqi, 10px);
  --next-games-actions-padding: 2px;
  --next-games-actions-padding: clamp(2px, 0.7cqi, 3px);
  --next-games-action-font-size: 12px;
  --next-games-action-font-size: clamp(10px, 4.2cqi, 16px);
  --next-games-action-icon-size: 16px;
  --next-games-action-icon-size: clamp(13px, 5.6cqi, 21px);
  --next-games-action-min-height: 24px;
  --next-games-action-min-height: clamp(20px, 8.4cqi, 32px);
  --next-games-action-padding: 4px;
  --next-games-action-padding: clamp(3px, 1.4cqi, 5px);
  --next-games-action-gap: 4px;
  --next-games-action-gap: clamp(3px, 1.4cqi, 5px);
}

.hhQSETxFVHT2CzmiryLw *,
.hhQSETxFVHT2CzmiryLw *::before,
.hhQSETxFVHT2CzmiryLw *::after {
  box-sizing: border-box;
}

.JvEyWZ3WaD34atbRIwu7 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0px;
  height: var(--next-games-height);
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  border-radius: var(--next-games-radius);
  color: #ffffff;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  background-color: #061030;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.qHydjJ6fv_CRh_VXbaQq .JvEyWZ3WaD34atbRIwu7 {
  background-image: linear-gradient(
    90deg,
    #061030 0%,
    #000000 50%,
    #f56b0d 100%
  );
}

.p80gh51eCcXMT0ykdo4K .JvEyWZ3WaD34atbRIwu7 {
  background-image: linear-gradient(
    150deg,
    #c6096b 0%,
    #5b165f 50%,
    #2d1b40 100%
  );
}

.a5bTkqbmjey2stGg4shg {
  position: absolute;
  inset: 0px;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.j5iaFXRNax3ecPTtAFUd {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0px;
}

.Cjde9uYwXB6KqedlgfaK {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--next-games-matchup-gap);
  width: 100%;
  min-width: 0px;
}

/*
 * No broadcaster column: push the avatars to the edges so the card keeps the
 * same inset as the Figma frame instead of collapsing them into the centre.
 */
.ShHm3EMmr5zPtbr5aqgk {
  justify-content: space-between;
  padding-inline: var(--next-games-matchup-inset);
}

.aRdrW2Abh47_Zwzacz4g {
  /* Size the shared TeamLogo well to the avatar slot. */
  --match-slider-logo: var(--next-games-avatar);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--next-games-avatar);
  height: var(--next-games-avatar);
  overflow: hidden;
  border-radius: 999px;
}

.aRdrW2Abh47_Zwzacz4g > * {
  max-width: 100%;
  max-height: 100%;
}

.dBPRDSPPB9_e19uFsLZ_ {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--next-games-broadcast-gap);
  width: var(--next-games-broadcast-width);
  min-width: 0px;
}

.oStAHtiSFK2sEEU8miQI {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--next-games-broadcaster-width);
  height: var(--next-games-broadcaster-height);
}

.qEL0zUySh6pJIaAwVMJe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--next-games-channel9-width);
  height: var(--next-games-channel9-height);
}

.fT5Nzw6XAiBavMFyZ20c {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--next-games-ignite-width);
  height: var(--next-games-ignite-height);
}

.oStAHtiSFK2sEEU8miQI > *,
.qEL0zUySh6pJIaAwVMJe > *,
.fT5Nzw6XAiBavMFyZ20c > * {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.s31xxxYcd_EkTpP2sfs9 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

/* Broadcaster marks are image URLs (defaults are fixed; hosts can override). */
.DOPCo_gbxGwi8BW4XesB {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.cZK8yZpet2vTuTcCol2w {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--next-games-segment-gap);
}

.VFjAQ3wucjogbpcDfDYW {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--next-games-segment-width);
  min-width: 0px;
}

.dlvJ7nHgSK9FW3DSgGBS {
  font-size: var(--next-games-digit-size);
  font-weight: 600;
  line-height: 1.1667em;
  color: #ffffff;
  text-align: center;
}

.bAnyz8b1mZ29NglZT0E_ {
  font-size: var(--next-games-label-size);
  font-weight: 600;
  line-height: 1.2em;
  color: #b2b2b2;
  text-align: center;
}

.b7ReKGDa0tSVzZXIIMZQ {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-width: 0px;
  padding: var(--next-games-actions-padding);
  border-top: 0.5px solid rgba(255, 255, 255, 0.16);
}

.NHImwc_tnGpO8bekMqLQ {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0px;
}

/*
 * The action slots are Figma Button/Text instances (the shared ButtonText). Its
 * size tokens are fixed px, so re-map them to the card's scaled custom
 * properties. The icon box is the trailing span inside the button.
 */
.JvEyWZ3WaD34atbRIwu7 .NHImwc_tnGpO8bekMqLQ > * {
  flex: 1 1 auto;
  min-height: var(--next-games-action-min-height);
  padding: var(--next-games-action-padding);
  gap: var(--next-games-action-gap);
  font-size: var(--next-games-action-font-size);
}

.JvEyWZ3WaD34atbRIwu7 .NHImwc_tnGpO8bekMqLQ > * > span:last-child {
  width: var(--next-games-action-icon-size);
  height: var(--next-games-action-icon-size);
}

/*
 * NBL Design System 2.0 buttons (Figma file AbCKiKvqqaG9K0MSA6HBeE).
 *
 * One stylesheet backs the whole family: `ButtonBase` owns layout, size and
 * shape, while the variant components select a `tone` + `colour` pair. Figma
 * models Default/Hover/Active/Disabled as variants; here they map to
 * `:hover` / `:active` / `:disabled` (and `[data-disabled]` for anchors).
 */

.u8HMBR2OxCW0rvsYbFkw {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  border: 0px solid transparent;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.u8HMBR2OxCW0rvsYbFkw *,
.u8HMBR2OxCW0rvsYbFkw *::before,
.u8HMBR2OxCW0rvsYbFkw *::after {
  box-sizing: border-box;
}

.UMVPjZlI14hSdgnccc6S {
  display: block;
}

.WiJLlqMQBuuzz7UL6KJQ {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.WiJLlqMQBuuzz7UL6KJQ > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.KjUCbL46dF0sG2amR8Ew {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.e1pickffmOaDXSwrTzvH {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px dashed currentColor;
  border-radius: 2px;
  opacity: 0.5;
}

/* Sizes — padding, min-height, type scale and icon box from `.Button Base`. */
.UIJRpVzrjJL1LGnpynjK {
  min-height: 24px;
  padding: 4px;
  gap: 4px;
  font-size: 12px;
}

.uXtAYpaz8bMUSsUz_ZLI {
  min-height: 30px;
  padding: 4px 8px;
  gap: 8px;
  font-size: 14px;
}

/* Label/L: 16/22. Figma Large = 8px pad + label py 2 + lh 22 → 42px tall. */
.ffWxo9etsahiOrNPUBwy {
  min-height: 42px;
  padding: 8px;
  gap: 8px;
  font-size: 16px;
  line-height: 22px;
}

.rhwVnc2lxraJVO9DW10h {
  min-height: 60px;
  padding: 12px;
  gap: 12px;
  font-size: 20px;
}

.UIJRpVzrjJL1LGnpynjK .WiJLlqMQBuuzz7UL6KJQ {
  width: 16px;
  height: 16px;
}

.uXtAYpaz8bMUSsUz_ZLI .WiJLlqMQBuuzz7UL6KJQ {
  width: 16px;
  height: 16px;
}

.ffWxo9etsahiOrNPUBwy .WiJLlqMQBuuzz7UL6KJQ {
  width: 20px;
  height: 20px;
}

.rhwVnc2lxraJVO9DW10h .WiJLlqMQBuuzz7UL6KJQ {
  width: 36px;
  height: 36px;
}

/* Shapes — `Type=Pill` and `Type=Rounded`. */
.UMEXgoMTqzZCLfqZvmOW {
  border-radius: 999px;
}

.Rvvmai3QmdGpbxKPVjBg {
  border-radius: 4px;
}

/* Base tone (Figma `.Button Base`): white surface, near-black label. */
.SQKFBu15DM6lengBs0Q9 {
  background: #ffffff;
  color: #1a1a1a;
}

/* Button/Filled (node 40036005:20335). */
.K_DZzSsq8wteTb4G4ZQK.Lwo2yWDPra8LcJgGDix2 {
  background: #1a1a1a;
  color: #ffffff;
}

.K_DZzSsq8wteTb4G4ZQK.Ueagv4S1DdvkvE1YSpL0 {
  background: #ff7900;
  color: #ffffff;
}

.K_DZzSsq8wteTb4G4ZQK.IHW0xVeF7GeVnKFAlO6b {
  background: #ffffff;
  color: #1a1a1a;
}

.K_DZzSsq8wteTb4G4ZQK.yfhzI3sC3ySWLv9nxhEC {
  background: #eeeeee;
  color: #1a1a1a;
}

/* Button/Outlined (node 40038311:19916). */
.q1cxUKGnOnLWh86B2fvw {
  background: transparent;
}

.q1cxUKGnOnLWh86B2fvw.Lwo2yWDPra8LcJgGDix2 {
  border: 1px solid #666666;
  color: #1a1a1a;
}

.q1cxUKGnOnLWh86B2fvw.Ueagv4S1DdvkvE1YSpL0 {
  border: 1px solid #ff7900;
  color: #ff7900;
}

.q1cxUKGnOnLWh86B2fvw.IHW0xVeF7GeVnKFAlO6b {
  border: 1px solid #ffffff;
  color: #ffffff;
}

.q1cxUKGnOnLWh86B2fvw.yfhzI3sC3ySWLv9nxhEC {
  border: 1px solid #cccccc;
  color: #666666;
}

/* Button/Text (node 40038311:20697). */
.TA1nbKQxoz8E1JpS3mGG {
  background: transparent;
}

.TA1nbKQxoz8E1JpS3mGG.Lwo2yWDPra8LcJgGDix2 {
  color: #1a1a1a;
}

.TA1nbKQxoz8E1JpS3mGG.Ueagv4S1DdvkvE1YSpL0 {
  color: #ff7900;
}

.TA1nbKQxoz8E1JpS3mGG.IHW0xVeF7GeVnKFAlO6b {
  color: #ffffff;
}

.TA1nbKQxoz8E1JpS3mGG.yfhzI3sC3ySWLv9nxhEC {
  color: #666666;
}

/* Button/Link (node 40039592:1257): underlined label, no surface. */
.KFdaPe9fBwOn5Aw9zJwY {
  background: transparent;
}

.KFdaPe9fBwOn5Aw9zJwY .UMVPjZlI14hSdgnccc6S {
  text-decoration: underline;
}

.KFdaPe9fBwOn5Aw9zJwY.Lwo2yWDPra8LcJgGDix2 {
  color: #1a1a1a;
}

.KFdaPe9fBwOn5Aw9zJwY.Ueagv4S1DdvkvE1YSpL0 {
  color: #ff7900;
}

.KFdaPe9fBwOn5Aw9zJwY.IHW0xVeF7GeVnKFAlO6b {
  color: #ffffff;
}

.KFdaPe9fBwOn5Aw9zJwY.yfhzI3sC3ySWLv9nxhEC {
  color: #666666;
}

/* Button/Glass (node 40039599:1705): translucent white on imagery. */
.y_HuFxyiqsmswIWM0ynl {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

/* Hover — Figma `State=Hover`. */
@media (hover: hover) {
  .K_DZzSsq8wteTb4G4ZQK.Lwo2yWDPra8LcJgGDix2:hover:not(:disabled):not([data-disabled="true"]) {
    background: rgba(0, 0, 0, 0.82);
  }

  .K_DZzSsq8wteTb4G4ZQK.Ueagv4S1DdvkvE1YSpL0:hover:not(:disabled):not([data-disabled="true"]) {
    background: rgba(245, 107, 13, 0.15);
    color: #ff7900;
  }

  .K_DZzSsq8wteTb4G4ZQK.IHW0xVeF7GeVnKFAlO6b:hover:not(:disabled):not([data-disabled="true"]) {
    background: rgba(0, 0, 0, 0.05);
  }

  .K_DZzSsq8wteTb4G4ZQK.yfhzI3sC3ySWLv9nxhEC:hover:not(:disabled):not([data-disabled="true"]) {
    background: #f7f8f8;
  }

  .q1cxUKGnOnLWh86B2fvw.Ueagv4S1DdvkvE1YSpL0:hover:not(:disabled):not([data-disabled="true"]) {
    background: rgba(245, 107, 13, 0.15);
  }

  .q1cxUKGnOnLWh86B2fvw.IHW0xVeF7GeVnKFAlO6b:hover:not(:disabled):not([data-disabled="true"]) {
    background: rgba(0, 0, 0, 0.05);
  }

  .TA1nbKQxoz8E1JpS3mGG.Ueagv4S1DdvkvE1YSpL0:hover:not(:disabled):not([data-disabled="true"]) {
    background: rgba(245, 107, 13, 0.15);
  }

  .TA1nbKQxoz8E1JpS3mGG.IHW0xVeF7GeVnKFAlO6b:hover:not(:disabled):not([data-disabled="true"]) {
    background: rgba(0, 0, 0, 0.05);
  }

  .KFdaPe9fBwOn5Aw9zJwY.Ueagv4S1DdvkvE1YSpL0:hover:not(:disabled):not([data-disabled="true"]) {
    background: rgba(245, 107, 13, 0.15);
  }

  .KFdaPe9fBwOn5Aw9zJwY.IHW0xVeF7GeVnKFAlO6b:hover:not(:disabled):not([data-disabled="true"]) {
    background: rgba(0, 0, 0, 0.05);
  }

  .y_HuFxyiqsmswIWM0ynl:hover:not(:disabled):not([data-disabled="true"]) {
    background: rgba(255, 255, 255, 0.2);
  }
}

/* Active — Figma `State=Active`. */
.y_HuFxyiqsmswIWM0ynl:active:not(:disabled):not([data-disabled="true"]) {
  background: rgba(255, 255, 255, 0.24);
}

/* Disabled — Figma `State=Disabled` normalises to a muted grey surface. */
.u8HMBR2OxCW0rvsYbFkw:disabled,
.u8HMBR2OxCW0rvsYbFkw[data-disabled="true"] {
  cursor: not-allowed;
}

.K_DZzSsq8wteTb4G4ZQK:disabled,
.K_DZzSsq8wteTb4G4ZQK[data-disabled="true"],
.q1cxUKGnOnLWh86B2fvw:disabled,
.q1cxUKGnOnLWh86B2fvw[data-disabled="true"],
.TA1nbKQxoz8E1JpS3mGG:disabled,
.TA1nbKQxoz8E1JpS3mGG[data-disabled="true"],
.KFdaPe9fBwOn5Aw9zJwY:disabled,
.KFdaPe9fBwOn5Aw9zJwY[data-disabled="true"] {
  border-color: #e8eded;
  background: #e8eded;
  color: #8c8c8c;
}

.y_HuFxyiqsmswIWM0ynl:disabled,
.y_HuFxyiqsmswIWM0ynl[data-disabled="true"] {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}

.u8HMBR2OxCW0rvsYbFkw:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

.K_DZzSsq8wteTb4G4ZQK.Lwo2yWDPra8LcJgGDix2:focus-visible,
.K_DZzSsq8wteTb4G4ZQK.Ueagv4S1DdvkvE1YSpL0:focus-visible,
.y_HuFxyiqsmswIWM0ynl:focus-visible {
  outline-color: #ffffff;
}

.SZt8PCntJZcC1KRJ_wRa {
  width: 100%;
  color: #111111;
}

.SU3gShpZqtH91vNTWomJ {
  margin: 0px;
  font-size: 14px;
  color: #6b7280;
}

.Hkun_jagTUGRKFHLGdVQ {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
  border: 0px;
}

/*
 * Loading state: the real Next games card chrome (variant gradient, divider
 * and action labels) with shimmer placeholders only in the data slots — crests,
 * broadcaster marks and countdown digits. Layout and scaling come from
 * `NextGames.module.css`; only the placeholder blocks live here.
 */
.UNjea85bvT4LAsxRbmhF {
  width: 100%;
}

.vSFxooEcvcxujdN6_ZvY {
  display: block;
  background: rgba(255, 255, 255, 0.2);
  animation: lPjXmkbm1yZ9UqyUeh_2 1.4s ease-in-out infinite;
}

.NLP2vujuXaAaYiVOxbui {
  width: 100%;
  height: 100%;
  border-radius: 999px;
}

.E72fuPkOl03d6_aiGdFd {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.yJc3d7XYQ9bjh_B0mkiw {
  width: 100%;
  height: calc(var(--next-games-digit-size) * 1.1667);
  border-radius: 3px;
}

/* Action labels are static, so the skeleton shows the real buttons. */
.u10MCWSo0Jl6x8FEQKvC {
  pointer-events: none;
}

.u10MCWSo0Jl6x8FEQKvC button:disabled {
  background: transparent;
  color: #ffffff;
}

@keyframes lPjXmkbm1yZ9UqyUeh_2 {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vSFxooEcvcxujdN6_ZvY {
    animation: none;
  }
}

.mXTe6dBCGsaPh6ckPMuZ {
  display: inline-flex;
  flex-flow: wrap;
  align-items: center;
  gap: 0.5em;
  min-width: 0px;
  color: inherit;
}

.tGxQ48aYXOTtFKu6JZ8U {
  width: var(--match-slider-logo, 2.5em);
  height: var(--match-slider-logo, 2.5em);
  padding: var(--team-logo-well-padding, 3px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}

.iv3L51hPuqYrccrN1USx {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  background: transparent;
}

.BaOq33K__YZFw9mVKrQX {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--team-logo-placeholder-bg, #e6e6e6);
  border: 1px dashed var(--team-logo-placeholder-border, #b0b0b0);
  box-sizing: border-box;
}

.ovZdMUK26bii9ySKEF7r {
  margin: 0px;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0px;
  color: inherit;
  line-height: 1.4;
}