/* UTEC English · Public Leaderboard Fidelity v1.0.25
   Target: approved desktop composition at 1648x928; responsive adjustments for smaller screens.
   Presentation only: IDs, APIs, timer and judging logic remain unchanged. */
@media(min-width:1231px){
  body:has(.public-main) .site-header{height:60px}
  body:has(.public-main) .site-header-inner{min-height:59px!important;height:59px!important;width:calc(100% - 18%)!important;max-width:1380px!important}
  body:has(.public-main) .public-main{width:calc(100% - 11.2%)!important;max-width:1690px!important;padding-top:0}
  /* The approved design begins immediately below the header, not a breadcrumb row. */
  body:has(.public-main) .breadcrumbs{display:none}
  body:has(.public-main) .hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);min-height:232px;height:232px;align-items:center;gap:17px;margin:0 0 1px}
  body:has(.public-main) .hero-title{height:224px;min-height:0;padding:0 0 0 clamp(208px,14.8vw,243px);justify-content:center; transform:translateY(8px)}
  body:has(.public-main) .hero-title .eyebrow.blue{font-size:11px;letter-spacing:.08em;margin:0 0 9px}
  body:has(.public-main) .hero-title h1{font-size:clamp(45px,3.81vw,63px);letter-spacing:-.058em;white-space:nowrap;line-height:1.04;margin:0}
  body:has(.public-main) .v22-event-subtitle{font-size:clamp(16px,1.18vw,20px);margin-top:3px}
  body:has(.public-main) .hero-title p{font-size:clamp(12px,.9vw,15px);line-height:1.45;margin-top:6px;max-width:560px}
  body:has(.public-main) .v22-bee{width:330px;height:280px;left:-74px;top:-21px;object-fit:contain;object-position:left center;filter:drop-shadow(0 7px 12px rgba(13,87,177,.09))}
  body:has(.public-main) .v124-castle{right:-75px;top:-30px;width:193px;height:256px;opacity:.92;z-index:0}
  body:has(.public-main) .event-banner{min-height:167px;height:167px;max-width:100%;padding:19px 20px 19px 11px;gap:14px;border-radius:23px;box-shadow:0 18px 38px rgba(45,116,191,.10)}
  body:has(.public-main) .trophy-shape{min-width:129px;width:129px;height:128px}
  body:has(.public-main) .trophy-shape img{width:127px;height:129px;object-fit:contain}
  body:has(.public-main) .banner-title strong{font-size:clamp(22px,1.7vw,30px)}
  body:has(.public-main) .banner-title span{font-size:12px}
  body:has(.public-main) .banner-divider{height:96px}
  body:has(.public-main) .banner-right{min-width:195px;font-size:13px;gap:7px}
  body:has(.public-main) .banner-right strong{font-size:13px}
  body:has(.public-main) .filter-bar{margin:0 0 12px;gap:16px;min-height:51px}
  body:has(.public-main) .segmented{min-height:51px;padding:4px;border-radius:14px;gap:2px}
  body:has(.public-main) .segmented button{min-width:142px;min-height:42px;padding:8px 12px;font-size:12px}
  body:has(.public-main) .phase-tabs button{min-width:139px}
  body:has(.public-main) .round-select{min-width:317px;min-height:51px;font-size:13px;border-radius:14px}
  body:has(.public-main) .public-layout{grid-template-columns:minmax(0,1fr) 347px;gap:14px}
  body:has(.public-main) .stats-grid{gap:10px;margin-bottom:13px}
  body:has(.public-main) .stat-card{min-height:103px;height:103px;padding:11px 12px;border-radius:18px;gap:9px}
  body:has(.public-main) .stat-icon{min-width:55px;height:55px;width:55px;border-radius:50%}
  body:has(.public-main) .stat-card strong{font-size:clamp(23px,1.65vw,27px)}
  body:has(.public-main) .stat-card:last-child strong{font-size:clamp(14px,1.14vw,19px)}
  body:has(.public-main) .stat-card small{font-size:11px}
  body:has(.public-main) .public-countdown{min-height:116px;height:116px;margin-bottom:12px;padding:14px 16px 21px 124px;border-radius:17px}
  body:has(.public-main) .v22-countdown-icon{left:20px;top:23px;width:85px;height:62px;border-radius:17px}
  body:has(.public-main) .v22-countdown-icon .v22-icon{width:42px;height:42px}
  body:has(.public-main) .public-countdown-person strong{font-size:25px;line-height:1.07}
  body:has(.public-main) .countdown-kicker{font-size:10px}
  body:has(.public-main) .leader-table th{padding:13px 9px;font-size:13px}
  body:has(.public-main) .leader-table td{height:50px;padding:8px 9px;font-size:13px}
  body:has(.public-main) .leader-table .score-total{font-size:21px}
  body:has(.public-main) .side-card{padding:15px 16px;border-radius:17px}
  body:has(.public-main) .card-title h2{font-size:17px}
  body:has(.public-main) .rule-row{padding:8px 0;font-size:12px}
  body:has(.public-main) .rule-row strong{font-size:12px}
  body:has(.public-main) .small-note{font-size:10px}
}
@media(min-width:1231px) and (max-width:1500px){
  body:has(.public-main) .hero-title{padding-left:clamp(155px,14vw,205px)}
  body:has(.public-main) .v22-bee{left:-44px;width:260px}
  body:has(.public-main) .hero-title h1{font-size:clamp(39px,3.45vw,49px)}
  body:has(.public-main) .event-banner{padding:13px 13px 13px 8px;gap:8px}
  body:has(.public-main) .trophy-shape{min-width:78px;width:78px}
  body:has(.public-main) .trophy-shape img{width:80px}
  body:has(.public-main) .banner-title strong{font-size:clamp(19px,1.5vw,24px)}
  body:has(.public-main) .banner-right{min-width:135px;font-size:11px}
  body:has(.public-main) .banner-right strong{font-size:11px}
  body:has(.public-main) .segmented button{min-width:99px;font-size:11px}
  body:has(.public-main) .phase-tabs button{min-width:99px}
  body:has(.public-main) .round-select{min-width:200px}
  body:has(.public-main) .public-layout{grid-template-columns:minmax(0,1fr) 320px}
  body:has(.public-main) .stat-icon{width:42px;height:42px;min-width:42px}
  body:has(.public-main) .stat-card strong{font-size:21px}
  body:has(.public-main) .stat-card:last-child strong{font-size:14px}
}
/* Fix mismatched icon rendering in live score cells: the original JS emits glyphs,
   but the earlier premium CSS hid their text at font-size:0. */
body:has(.public-main) .score-cell .result-dot{
  font-size:15px!important;
  font-family:Arial, sans-serif;
  font-weight:900;
  line-height:1;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* At smaller widths, continue using the established responsive layout and avoid locked heights. */
@media(max-width:1230px){
  body:has(.public-main) .public-main{max-width:100%;}
}