/* World Skate Games ASU26 hybrid arena theme.
   Concept A: lists, qualifiers, rankings and official results.
   Concept B: live timing, live points, live elimination and general screens. */
:root{
  --wsg-dark-green:#014906;
  --wsg-green:#01d04a;
  --wsg-orange:#ff6e3b;
  --wsg-pink:#ffbad7;
  --wsg-cream:#eeede3;
  --wsg-charcoal:#2e2d2c;
  --wsg-speed:#6371e4;
}

.wsg-hybrid{
  --brand-primary:var(--wsg-primary,var(--wsg-dark-green));
  --brand-accent:var(--wsg-accent,var(--wsg-orange));
  color:var(--wsg-text,var(--wsg-cream));
  font-family:Arial,Helvetica,sans-serif;
}

.wsg-hybrid .wsg-identity-rail{
  position:absolute;
  z-index:5;
  left:0;
  top:0;
  bottom:0;
  width:.7vw;
  background:linear-gradient(180deg,var(--wsg-green) 0 34%,var(--brand-accent) 34% 67%,var(--wsg-pink) 67%);
}

.wsg-hybrid .hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background-color:var(--wsg-header,var(--brand-primary));
  border-bottom:.48vh solid var(--brand-accent);
  color:var(--wsg-header-text,var(--wsg-cream));
}

.wsg-hybrid .hero:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(110deg,color-mix(in srgb,var(--brand-primary) 96%,transparent) 0 64%,color-mix(in srgb,var(--wsg-green) 76%,transparent) 100%);
  pointer-events:none;
}

.wsg-hybrid .hero-left{position:relative;z-index:2}
.wsg-hybrid .custom-logo{width:6.8vw;height:10.5vh;object-fit:contain}
.wsg-hybrid .wsg-default-logo{object-fit:contain;background:var(--wsg-dark-green)}
.wsg-hybrid .discipline-logo{width:5.2vw;height:7.5vh}

.wsg-sport-label{
  display:inline-block;
  width:max-content;
  margin:0 .7vw .2vh 0;
  padding:.32vh .72vw .24vh;
  background:var(--wsg-speed);
  color:var(--wsg-cream);
  font-family:Impact,"Arial Narrow",sans-serif;
  font-size:1.02vw;
  line-height:1;
  letter-spacing:.05em;
  transform:rotate(-1deg);
}

.wsg-hybrid .championship{
  display:inline-block;
  color:var(--wsg-pink);
  font-size:1vw;
  letter-spacing:.16em;
  margin-bottom:.35vh;
}

.wsg-hybrid .title-block h1{
  color:var(--wsg-header-text,var(--wsg-cream));
  font-family:Arial,Helvetica,sans-serif;
  font-weight:900;
}

.wsg-brand-pattern{
  display:none;
}

.wsg-hybrid .title-block h1{max-width:78vw}

.wsg-hybrid .live-box{
  background:color-mix(in srgb,var(--wsg-charcoal) 92%,transparent);
  border-left:.32vw solid var(--brand-accent);
}
.wsg-hybrid .live-bar{display:none}
.wsg-hybrid .live-dot{background:var(--wsg-green);box-shadow:0 0 0 .55vw rgba(1,208,74,.13)}
.wsg-hybrid .live-box small{color:var(--wsg-pink)}

.wsg-hybrid .stage-bar{
  border-color:color-mix(in srgb,var(--wsg-pink) 35%,var(--wsg-charcoal));
  background:color-mix(in srgb,var(--wsg-charcoal) 96%,transparent);
}
.wsg-hybrid .stage-copy{border-color:color-mix(in srgb,var(--wsg-pink) 35%,var(--wsg-charcoal))}
.wsg-hybrid .stage-copy small,.wsg-hybrid .local-time small{color:var(--wsg-pink)}
.wsg-hybrid .stage-number{background:var(--brand-accent);color:var(--wsg-charcoal)}
.wsg-hybrid .local-time strong{color:var(--wsg-green)}

.wsg-hybrid .arena-footer{
  background:var(--brand-primary);
  border-top:.35vh solid var(--brand-accent);
  color:var(--wsg-pink);
}
.wsg-hybrid .arena-footer>strong,.wsg-hybrid .arena-footer b{color:var(--wsg-cream)}
.wsg-hybrid .simple-footer{letter-spacing:.08em}

/* Athlete names are the priority field: keep every name on one line and give
   it substantially more width than secondary race information. */
.wsg-hybrid .result-row{grid-template-columns:7% 7% 42% 25% 12% 7%}
.wsg-hybrid .athlete{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1;
  font-size:max(22px,1.85vw);
  font-weight:950;
}
.wsg-hybrid .team{min-width:0;font-size:1.25vw}
.wsg-hybrid .team,.wsg-hybrid.mode-medal_standings .athlete,.wsg-hybrid .elim-athlete p{
  display:grid;
  grid-template-columns:2.1vw minmax(0,1fr);
  align-items:center;
  column-gap:.65vw;
  min-width:0;
}
.wsg-hybrid .country-flag-slot{display:block;width:1.8vw;height:1.35vw;flex:0 0 auto}
.wsg-hybrid .country-flag{display:block;width:1.8vw;height:1.35vw;object-fit:cover}
.wsg-hybrid .country-flag-tpe{object-fit:contain;background:#fff}
.wsg-hybrid .country-name{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsg-hybrid .table-head{font-size:.7vw}

/* The former full-width stage bar duplicated information and consumed more
   than ten percent of the 16:9 canvas. Round, heat and clock now sit compactly
   inside the results title, leaving taller rows for distance-readable names. */
.arena-shell.wsg-hybrid{grid-template-rows:16vh 1fr 6.2vh}
.wsg-hybrid .results-card{grid-template-rows:11.2vh 1fr}
.wsg-hybrid .results-heading{min-width:0}
.wsg-hybrid .stage-inline{
  display:flex;
  align-items:baseline;
  gap:.48vw;
  color:var(--wsg-pink);
  font-size:.7vw;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
}
.wsg-hybrid .stage-inline strong{color:#fff;font-size:1.02vw;letter-spacing:.04em;margin-right:.65vw}
.wsg-hybrid .results-title h2{margin:.35vh 0 0}
.wsg-hybrid .results-meta{display:flex;align-items:center;justify-content:flex-end;gap:1.6vw;min-width:20vw}
.wsg-hybrid .title-clock{text-align:right;white-space:nowrap}
.wsg-hybrid .title-clock small{display:block;color:var(--wsg-pink);font-size:.66vw;font-weight:900;letter-spacing:.13em}
.wsg-hybrid .title-clock strong{display:block;color:var(--wsg-green);font-size:1.25vw;margin-top:.25vh}
.wsg-hybrid .heat-count span{margin-top:.55vh}

/* CONCEPT A - dense, high-legibility start lists and official information. */
.wsg-concept-a{background:color-mix(in srgb,var(--wsg-background,var(--wsg-charcoal)) 94%,transparent)}
.wsg-concept-a .results-card{border:0;background:#151918;color:#fff}
.wsg-concept-a .results-title{
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand-primary) 55%,#151918),#151918 55%);
  border-bottom:.55vh solid var(--brand-primary);
}
.wsg-concept-a .results-title small{color:#fff}
.wsg-concept-a .results-title h2{color:#fff}
.wsg-concept-a .heat-count{color:#fff}
.wsg-concept-a .heat-count span{background:linear-gradient(90deg,var(--wsg-green),var(--brand-accent),var(--wsg-pink))}
.wsg-concept-a .result-row{
  color:#fff;
  background:#202523;
  border-color:rgba(255,255,255,.16);
}
.wsg-concept-a .result-row:nth-child(odd):not(.table-head){background:#292e2c}
.wsg-concept-a .result-row.leader{background:linear-gradient(90deg,rgba(1,208,74,.34),#202523 48%);border-left:.45vw solid var(--wsg-green)}
.wsg-concept-a .table-head{background:#0c0f0e!important;color:#fff}
.wsg-concept-a .rank{color:#fff}
.wsg-concept-a .bib{color:var(--wsg-speed)}
.wsg-concept-a .status span{color:#fff;border-color:var(--brand-accent);background:rgba(255,110,59,.18)}
.wsg-concept-a .empty-results{color:rgba(255,255,255,.72)}
.wsg-concept-a .result-row.placeholder-row{background:#202523}
.wsg-concept-a .country-name,.wsg-concept-a .athlete,.wsg-concept-a .team{color:#fff}

/* CONCEPT B - more expressive live-action presentation. */
.wsg-concept-b{background:color-mix(in srgb,var(--wsg-charcoal) 95%,transparent)}
.wsg-concept-b .hero{border-bottom-color:var(--wsg-green)}
.wsg-concept-b .results-card{border-color:var(--brand-primary);background:color-mix(in srgb,var(--wsg-charcoal) 92%,#000)}
.wsg-concept-b .results-title{
  background:linear-gradient(100deg,var(--brand-primary),color-mix(in srgb,var(--wsg-charcoal) 94%,transparent) 65%);
  border-bottom:.45vh solid var(--brand-accent);
}
.wsg-concept-b .results-title small{color:var(--wsg-pink)}
.wsg-concept-b .results-title h2{color:var(--wsg-cream)}
.wsg-concept-b .heat-count{color:var(--wsg-pink)}
.wsg-concept-b .heat-count span{background:linear-gradient(90deg,var(--wsg-green),var(--brand-accent),var(--wsg-pink))}
.wsg-concept-b .result-row{background:color-mix(in srgb,var(--wsg-charcoal) 88%,#111);border-color:rgba(238,237,227,.18)}
.wsg-concept-b .result-row:nth-child(odd):not(.table-head){background:color-mix(in srgb,var(--wsg-charcoal) 96%,#000)}
.wsg-concept-b .result-row.leader{background:linear-gradient(90deg,color-mix(in srgb,var(--wsg-green) 24%,transparent),color-mix(in srgb,var(--wsg-charcoal) 96%,#000) 42%);border-left:.5vw solid var(--wsg-green)}
.wsg-concept-b .table-head{background:var(--brand-primary)!important;color:var(--wsg-cream)}
.wsg-concept-b .rank{color:var(--wsg-pink)}
.wsg-concept-b .bib{color:var(--wsg-green)}
.wsg-concept-b .status span{border-color:var(--brand-accent);color:var(--wsg-cream);background:rgba(255,110,59,.18)}
.wsg-concept-b .lap-points{color:var(--wsg-green);font-size:1vw}

/* Live points is intentionally sparse: only the complete 2-person or 3-person action is shown. */
.wsg-hybrid.mode-live_points .results-card{grid-template-rows:15vh 1fr}
.wsg-hybrid.mode-live_points .result-row.placeholder-row{display:none}
.wsg-hybrid.mode-live_points .results-table{display:grid;grid-template-rows:4.2vh repeat(3,minmax(0,1fr))}
.wsg-hybrid.mode-live_points .result-row:not(.table-head){min-height:0;font-size:1.8vw}
.wsg-hybrid.mode-live_points .result-row:not(.table-head) .rank{font-size:3.5vw}
.wsg-hybrid.mode-live_points .result-row:not(.table-head) .bib{font-size:2.6vw}
.wsg-hybrid.mode-live_points .result-row:not(.table-head) .athlete,.wsg-hybrid.mode-live_points .result-row:not(.table-head) .team{font-size:2vw}
.wsg-hybrid.mode-live_points .result-row:not(.table-head) .time{font-size:3.7vw;color:#fff}
.wsg-hybrid.mode-live_points .empty-results{grid-row:2/5;color:#fff;font-size:2vw;font-weight:800}

/* Live elimination uses the same light presentation palette as every race screen. */
.elimination-screen.wsg-hybrid{
  position:relative;
  height:100%;
  padding:1.7vh 1.55vw 0;
  display:grid;
  grid-template-rows:16vh 1fr 6.2vh;
  gap:1.15vh;
  background:color-mix(in srgb,var(--wsg-background,var(--wsg-charcoal)) 94%,transparent);
}
.elimination-screen .elimination-content{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto 1fr;
  align-items:center;
  padding:5vh 6vw;
  background:linear-gradient(90deg,color-mix(in srgb,var(--wsg-pink) 34%,transparent),transparent 48%),var(--wsg-cream);
  border-bottom:.55vh solid var(--brand-accent);
}
.elimination-screen .elimination-content:after{
  content:"";
  position:absolute;
  right:-7vw;
  bottom:-13vw;
  width:32vw;
  height:32vw;
  border:3.2vw solid rgba(255,186,215,.17);
  border-radius:50%;
}
.elimination-screen .elim-label{position:relative;z-index:1;color:var(--brand-primary);font-size:2.2vw}
.elimination-screen .elim-event{position:relative;z-index:1;color:var(--wsg-charcoal)}
.elimination-screen .elim-athlete{position:relative;z-index:1}
.elimination-screen .elim-athlete>strong{background:var(--brand-accent);color:var(--wsg-charcoal)}
.elimination-screen .elim-athlete h1{font-family:Arial,Helvetica,sans-serif;color:var(--wsg-charcoal)}
.elimination-screen .elim-athlete h1{white-space:nowrap;overflow:hidden;max-width:72vw}
.elimination-screen .elim-athlete p{color:var(--brand-primary)}
.elimination-screen .elim-waiting{position:relative;z-index:1;color:var(--wsg-charcoal)}

/* General screens reuse Concept B identity while leaving uploaded media dominant. */
.general-screen.wsg-hybrid{
  position:relative;
  height:100%;
  padding:1.7vh 1.55vw 0;
  display:grid;
  grid-template-rows:16vh 1fr 6.2vh;
  gap:1.15vh;
  background:color-mix(in srgb,var(--wsg-background,var(--wsg-charcoal)) 94%,transparent);
}
.general-screen .general-header{position:relative;overflow:hidden;isolation:isolate;background-color:var(--wsg-header,var(--brand-primary));border-bottom:.48vh solid var(--wsg-green)}
.general-screen .general-header>div:first-child,.general-screen .general-header>strong{position:relative;z-index:2}
.general-screen .general-header .wsg-brand-pattern{right:17vw}
.general-screen .general-content{
  position:relative;
  overflow:hidden;
  background:linear-gradient(112deg,color-mix(in srgb,var(--brand-primary) 95%,transparent) 0 34%,color-mix(in srgb,var(--wsg-charcoal) 96%,transparent) 34%);
  border-bottom:.55vh solid var(--brand-accent);
}
.general-screen .general-content:after{
  content:"";
  position:absolute;
  right:-8vw;
  bottom:-13vw;
  width:34vw;
  height:34vw;
  border:3.4vw solid rgba(255,186,215,.18);
  border-radius:50%;
  pointer-events:none;
}
.general-screen .general-content>div,.general-screen .general-sponsor,.general-screen .general-content video{position:relative;z-index:1}
.general-screen .general-content h1{color:var(--wsg-cream);font-family:Arial,Helvetica,sans-serif;font-weight:900}
.general-screen .general-content p{color:var(--wsg-pink)}
.general-screen .general-content video{width:100%;height:100%;object-fit:contain;background:#000}
.general-screen.mode-sponsor .general-content{background:var(--wsg-cream)}

@media(max-aspect-ratio:4/3){
  .arena-shell.wsg-hybrid .wsg-brand-pattern,.elimination-screen.wsg-hybrid .wsg-brand-pattern{right:0;width:24vw}
  .wsg-hybrid .custom-logo{width:8vw}
  .wsg-sport-label{font-size:1.25vw}
  .wsg-hybrid.mode-live_points .result-row:not(.table-head) .athlete{font-size:2vw}
  .wsg-hybrid.mode-live_points .result-row:not(.table-head) .team{font-size:1.8vw}
  .arena-shell.wsg-hybrid{grid-template-rows:15vh 1fr 6vh}
}

/* Keep every public output inside a fixed 16:9 canvas. This prevents laptop
   browser proportions from changing the medal/list layout. */
html,body{background:#020502}
body{display:grid;place-items:center}
.screen{width:min(100vw,177.777777vh);height:min(100vh,56.25vw);position:relative;flex:0 0 auto}
.video-promo video{width:100%;height:100%}

/* Medal screens use only the rows that exist, allowing three awarded athletes
   to occupy three large, legible rows while still supporting up to eight. */
.wsg-hybrid.mode-medals .results-table{
  display:grid;
  grid-template-rows:4.2vh repeat(var(--visible-rows),minmax(0,1fr));
}
.wsg-hybrid.mode-medals .result-row{min-height:0}
.wsg-hybrid.mode-medals .result-row.placeholder-row{display:none}
.wsg-hybrid.mode-medals .medal-row .status span{font-size:3.2vw;line-height:1;min-height:0}
.wsg-hybrid.mode-medals .table-head{min-height:4.2vh}
.wsg-hybrid.mode-medals .result-row{grid-template-columns:7% 7% 39% 23% 12% 12%}
.wsg-hybrid.mode-medals .table-head div:nth-child(5),
.wsg-hybrid.mode-medals .table-head div:nth-child(6){text-align:center;padding:0 .6vw}
.wsg-hybrid.mode-medals .table-head div:nth-child(6){border-left:1px solid rgba(255,255,255,.28)}

/* Championship medal standings have a dedicated column layout. Previously
   the ordinary country/team grid forced the medal breakdown into its narrow
   flag column, hiding Silver, Bronze, rank, country and total values. */
.wsg-hybrid.mode-medal_standings .result-row{grid-template-columns:7% 0 34% 46% 0 13%}
.wsg-hybrid.mode-medal_standings .bib,.wsg-hybrid.mode-medal_standings .time{display:none}
.wsg-hybrid.mode-medal_standings .athlete{
  display:grid;
  grid-template-columns:1.8vw minmax(0,1fr);
  column-gap:.65vw;
  overflow:hidden;
  white-space:nowrap;
  color:#fff;
  font-size:1.22vw;
  font-weight:900;
}
.wsg-hybrid.mode-medal_standings .athlete .country-name,
.wsg-hybrid.mode-medal_standings .athlete .medal-country-name{
  display:block!important;
  width:auto!important;
  overflow:visible!important;
  visibility:visible!important;
  opacity:1!important;
  color:#fff!important;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden!important;
  text-overflow:ellipsis;
}
.wsg-hybrid.mode-medal_standings .team{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:.5vw;
  white-space:nowrap;
  overflow:hidden;
  font-size:.82vw;
}
.wsg-hybrid.mode-medal_standings .medal-count{display:grid;grid-template-columns:1.35vw minmax(0,1fr);align-items:baseline;gap:.2vw;overflow:hidden}
.wsg-hybrid.mode-medal_standings .medal-count b{font-size:1.25vw}
.wsg-hybrid.mode-medal_standings .status span{font-size:1.35vw;font-weight:1000;border:0;background:transparent;min-width:0}

/* Keep elimination consistent with the dark, high-contrast race screens. */
.elimination-screen .elimination-content{background:linear-gradient(90deg,rgba(1,208,74,.2),transparent 48%),#151918}
.elimination-screen .elim-event,.elimination-screen .elim-athlete h1,.elimination-screen .elim-waiting{color:#fff}
.elimination-screen .elim-athlete p{color:#fff}

/* Arena output must never depend on green text over a configurable green
   surface. Keep these live values and labels white for reliable contrast. */
.wsg-hybrid .local-time strong,
.wsg-hybrid .title-clock strong,
.wsg-concept-b .bib,
.wsg-concept-b .lap-points,
.elimination-screen .elim-label{color:#fff!important}

/* Official Velopro attribution, packaged locally for offline reliability. */
.wsg-hybrid .arena-footer .powered-by{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55vw;
  min-width:0;
}
.wsg-hybrid .arena-footer .powered-by>span:first-child{font-size:.62vw;letter-spacing:.12em;white-space:nowrap}
.wsg-hybrid .arena-footer .velopro-logo-plate{
  display:flex;
  align-items:center;
  justify-content:center;
  height:4.1vh;
  padding:0;
  border-radius:0;
  background:transparent;
}
.wsg-hybrid .arena-footer .velopro-footer-logo{display:block;width:auto;height:3.25vh;max-width:12vw;object-fit:contain}