/*
 * Market-card responsive name safety layer.
 * Scope: homepage main result-card market names + LIVE MARKET UPDATES names.
 * Geometry, colors, result values, buttons, timing bars and all other design
 * remain controlled by the previously approved styles.
 */
.royal-results-section .royal-result-card__title,
.royal-results-section .royal-result-card__title-text,
#live-res .today_live_name{
  min-width:0!important;
  box-sizing:border-box!important;
}

.royal-results-section .royal-result-card__title-text{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-align:center!important;
  line-height:1!important;
}

/* Keep the approved one-line name pattern. The JS fitter only reduces the
   font when the real available width requires it; normal names keep their
   existing computed size. */
.royal-results-section .royal-result-card__mobile-break{
  display:none!important;
}

#live-res .today_live_name{
  max-width:none!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.05!important;
}

/* CSS fallback for script-disabled/narrow devices. JS refines from here. */
@media (max-width:390px){
  .royal-results-section .royal-result-card__title-text{font-size:clamp(12px,5.2vw,20px)!important}
  #live-res .today_live_name{font-size:clamp(13px,5vw,19px)!important}
}
@media (max-width:320px){
  .royal-results-section .royal-result-card__title-text{font-size:clamp(11.5px,5vw,17px)!important}
  #live-res .today_live_name{font-size:clamp(12px,5vw,17px)!important}
}

/* Phone browser "desktop site" mode uses a wide CSS viewport on small
   hardware. Keep text fitting active without changing card geometry. */
html.msp-phone-desktop-view .royal-results-section .royal-result-card__title-text,
html.msp-phone-desktop-view #live-res .today_live_name{
  white-space:nowrap!important;
}

/* Keep the approved decorative star, but move it fully outside the text box.
   The previous final card CSS placed the star partly on top of the first
   character at some narrow/tablet widths. This changes no card geometry. */
.royal-results-section .royal-result-card__title::before{
  left:-1.15em!important;
  transform:translate(0,-50%)!important;
}

@media (max-width:260px){
  .royal-results-section .royal-result-card__title-text{font-size:clamp(8.5px,4.4vw,12px)!important}
  #live-res .today_live_name{font-size:clamp(9.5px,4.6vw,13px)!important}
}