/* UTEC Spelling Bee – Public Leaderboard Preview Match v1.0.23
   Visual composition only. No changes to API, live polling, score/round IDs, login, or scoring rules.
   This stylesheet is intentionally LAST on the PUBLIC PAGE ONLY. */

body:has(.public-main){
  color:#082c74;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(ellipse 750px 410px at -6% 240px,rgba(57,160,255,.21),transparent 78%),
    radial-gradient(ellipse 520px 350px at 103% 360px,rgba(250,199,41,.13),transparent 78%),
    linear-gradient(180deg,#f2faff 3%,#f5faff 47%,#f9fcff 100%);
  overflow-x:hidden;
}
body:has(.public-main) .site-header{height:72px}
body:has(.public-main) .site-header-inner,
body:has(.public-main) .public-main{max-width:1690px;width:calc(100% - 72px)}
body:has(.public-main) .site-header-inner .nav-links a{font-size:14px}
body:has(.public-main) .header-actions .btn{font-size:13px;min-height:45px}
body:has(.public-main) .public-main{position:relative;padding-top:8px;padding-bottom:48px}
body:has(.public-main) .public-main:before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:360px;
  background:
    radial-gradient(ellipse 390px 95px at 18% 45%,rgba(255,255,255,.85),transparent 85%),
    radial-gradient(ellipse 250px 160px at 35% 19%,rgba(255,255,255,.48),transparent 80%),
    radial-gradient(ellipse 280px 115px at 73% 32%,rgba(255,255,255,.58),transparent 82%),
    linear-gradient(180deg,rgba(195,227,255,.53) 0%,rgba(233,247,255,.20) 88%,transparent);
  pointer-events:none;z-index:0;
}
body:has(.public-main) .public-main>*{position:relative;z-index:1}
body:has(.public-main) .breadcrumbs{margin:3px 0 6px;font-size:12px;color:#5680ac}

/* A proper hero region: larger mascot on sky background, stronger hierarchy and more breathing room */
body:has(.public-main) .hero-grid{
  grid-template-columns:minmax(0,1.25fr) minmax(0,.97fr);
  align-items:center;gap:34px;min-height:214px;margin:2px 0 14px;
}
body:has(.public-main) .hero-title{
  min-height:204px;padding:15px 0 10px clamp(198px,16vw,240px);
  justify-content:center;
}
body:has(.public-main) .v22-bee{
  left:-75px;top:-36px;width:360px;height:274px;
  object-fit:contain;max-width:none;
  filter:drop-shadow(0 13px 17px rgba(13,75,154,.09));
}
body:has(.public-main) .hero-title .eyebrow.blue{font-size:12px;letter-spacing:.13em;margin-bottom:3px}
body:has(.public-main) .hero-title h1{
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  white-space:nowrap;font-size:clamp(44px,3.35vw,70px);
  font-weight:900;letter-spacing:-.062em;line-height:1.08;
}
body:has(.public-main) .hero-title h1 em{color:#ffb900}
body:has(.public-main) .v22-event-subtitle{font-size:19px;font-weight:850;margin-top:6px;color:#082c6d}
body:has(.public-main) .hero-title p{font-size:15px;line-height:1.52;max-width:585px;margin-top:7px;color:#315d92;font-weight:550}
body:has(.public-main) .event-banner{
  min-height:177px;gap:18px;padding:20px 25px;
  border-radius:23px;
  background:radial-gradient(circle at 8% 35%,rgba(255,220,98,.28),transparent 39%),linear-gradient(105deg,#fffefa,#fffdf7 64%,#fff3d6);
  border:1px solid #e1eaff;box-shadow:0 18px 31px rgba(20,80,157,.09);
}
body:has(.public-main) .banner-left{gap:18px}
body:has(.public-main) .trophy-shape{width:122px;height:126px}
body:has(.public-main) .trophy-shape img{width:116px;height:126px}
body:has(.public-main) .banner-title strong{font-size:clamp(24px,1.8vw,34px)}
body:has(.public-main) .banner-title span{font-size:12px;padding:7px 15px}
body:has(.public-main) .banner-right{font-size:14px;min-width:195px;gap:10px;color:#5c7ba9}
body:has(.public-main) .banner-right strong{font-size:14px}
body:has(.public-main) .live-chip{font-size:14px;padding:9px 13px}
body:has(.public-main) .banner-divider{height:90px}

/* Filters show deliberate equal-height interactive components. */
body:has(.public-main) .filter-bar{margin:13px 0 16px;gap:19px}
body:has(.public-main) .segmented{min-height:53px;border-radius:14px;padding:5px;gap:3px}
body:has(.public-main) .segmented button{font-size:13px;min-width:135px;padding:10px 16px;border-radius:10px;font-weight:780}
body:has(.public-main) .phase-tabs button{min-width:138px}
body:has(.public-main) .round-select{min-height:53px;min-width:260px;padding:11px 16px;font-size:14px}

/* Wider main content / slightly roomier sidebar – intended desktop preview proportions. */
body:has(.public-main) .public-layout{grid-template-columns:minmax(0,2.4fr) minmax(330px,.90fr);gap:18px}
body:has(.public-main) .side-column{gap:15px}
body:has(.public-main) .stats-grid{gap:13px;margin-bottom:15px}
body:has(.public-main) .stat-card{min-height:118px;padding:15px;gap:12px;border-radius:20px}
body:has(.public-main) .stat-card small{font-size:12px;font-weight:650}
body:has(.public-main) .stat-card strong{font-size:29px;font-weight:900;line-height:1.15;letter-spacing:-.055em}
body:has(.public-main) .stat-card:last-child strong{font-size:19px;line-height:1.15}
body:has(.public-main) .stat-card i{font-size:12px}
body:has(.public-main) .stat-icon{height:58px;width:58px;min-width:58px;border-radius:19px}
body:has(.public-main) .stat-icon .v22-icon{height:27px;width:27px}

body:has(.public-main) .public-countdown{min-height:140px;margin-bottom:15px;padding:22px 24px 28px 100px;border-radius:21px}
body:has(.public-main) .v22-countdown-icon{left:23px;top:31px;width:60px;height:60px}
body:has(.public-main) .v22-countdown-icon .v22-icon{width:35px;height:35px}
body:has(.public-main) .countdown-kicker{font-size:11px;letter-spacing:.13em}
body:has(.public-main) .public-countdown-person strong{font-size:26px;line-height:1.22}
body:has(.public-main) .public-countdown-person small{font-size:14px}
body:has(.public-main) #publicTimerBadge{font-size:12px;padding:9px 13px}
body:has(.public-main) #publicTimerDigits{font-size:43px;letter-spacing:.03em}
body:has(.public-main) .public-countdown-track{height:8px;left:22px;right:22px;bottom:12px}

/* Leaderboard is the focus. Make row text and symbols readable from a screen at an event. */
body:has(.public-main) .leader-card{border-radius:18px}
body:has(.public-main) .leader-table th{font-size:13px;padding:16px 10px}
body:has(.public-main) .leader-table td{height:60px;padding:10px 8px;font-size:13px}
body:has(.public-main) .leader-table th:first-child{width:59px}
body:has(.public-main) .leader-table th:nth-child(2){min-width:152px}
body:has(.public-main) .v22-participant{gap:10px}
body:has(.public-main) .v22-avatar{width:33px;height:33px;font-size:14px}
body:has(.public-main) .v22-name{font-size:14px;font-weight:800}
body:has(.public-main) .rank-bubble{width:33px;height:33px;font-size:14px}
body:has(.public-main) .score-cell>strong{font-size:13px}
body:has(.public-main) .result-dot{width:22px;height:22px;min-width:22px}
body:has(.public-main) .score-total{font-size:19px}
body:has(.public-main) .status-badge{min-width:87px;padding:8px 10px;font-size:11px}
body:has(.public-main) .table-foot{padding:14px;gap:13px;font-size:11px}
body:has(.public-main) .notice-card{padding:16px 18px;font-size:12px;line-height:1.55}
body:has(.public-main) .side-card{border-radius:20px;padding:21px 19px}
body:has(.public-main) .card-title h2{font-size:19px}
body:has(.public-main) .heading-icon{width:34px;height:34px}
body:has(.public-main) .rule-row{font-size:13px;padding:12px 0;gap:10px}
body:has(.public-main) .rule-row strong{font-size:13px}
body:has(.public-main) .rule-symbol{width:26px;height:26px;min-width:26px}
body:has(.public-main) .penalty-note{font-size:12px;padding:13px}
body:has(.public-main) .side-card .small-note{font-size:11px}
body:has(.public-main) .ongoing-meta{font-size:12px}
body:has(.public-main) .ongoing-meta strong{font-size:13px}
body:has(.public-main) .progress-ring{width:112px;height:112px}
body:has(.public-main) .progress-ring::before{width:84px;height:84px}
body:has(.public-main) .progress-ring strong{font-size:26px}
body:has(.public-main) .info-pill{font-size:11px}
body:has(.public-main) .update-footer{font-size:11px}

@media(max-width:1530px){
 body:has(.public-main) .site-header-inner,body:has(.public-main) .public-main{width:calc(100% - 60px)}
 body:has(.public-main) .hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px}
 body:has(.public-main) .hero-title{padding-left:190px}
 body:has(.public-main) .v22-bee{left:-55px;width:316px}
 body:has(.public-main) .hero-title h1{font-size:clamp(38px,3.3vw,57px)}
 body:has(.public-main) .trophy-shape{width:92px}
 body:has(.public-main) .trophy-shape img{width:96px}
 body:has(.public-main) .banner-title strong{font-size:25px}
 body:has(.public-main) .banner-right{min-width:163px;font-size:12px}
 body:has(.public-main) .segmented button{min-width:105px;font-size:12px}
 body:has(.public-main) .phase-tabs button{min-width:105px}
 body:has(.public-main) .stat-icon{height:47px;width:47px;min-width:47px}
 body:has(.public-main) .stat-card strong{font-size:24px}
 body:has(.public-main) .stat-card:last-child strong{font-size:17px}
}
@media(max-width:1220px){
 body:has(.public-main) .hero-grid{grid-template-columns:1fr;gap:12px}
 body:has(.public-main) .hero-title{padding-left:210px;min-height:206px}
 body:has(.public-main) .v22-bee{left:-55px;width:340px}
 body:has(.public-main) .event-banner{min-height:135px}
 body:has(.public-main) .public-layout{grid-template-columns:minmax(0,1fr)}
 body:has(.public-main) .side-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 body:has(.public-main) .filter-bar{flex-wrap:wrap}
 body:has(.public-main) .leader-table{min-width:900px}
 body:has(.public-main) .round-select{flex:1}
}
@media(max-width:720px){
 body:has(.public-main) .site-header-inner,body:has(.public-main) .public-main{width:calc(100% - 30px)}
 body:has(.public-main) .hero-grid{min-height:0}
 body:has(.public-main) .hero-title{padding:8px 0 10px 114px;min-height:195px}
 body:has(.public-main) .v22-bee{left:-38px;top:3px;width:175px;height:180px}
 body:has(.public-main) .hero-title h1{white-space:normal;font-size:clamp(29px,7vw,41px)}
 body:has(.public-main) .hero-title .eyebrow.blue{font-size:9px}
 body:has(.public-main) .v22-event-subtitle{font-size:13px}
 body:has(.public-main) .hero-title p{font-size:11px}
 body:has(.public-main) .event-banner{padding:12px 10px;gap:5px}
 body:has(.public-main) .trophy-shape{width:55px;height:77px}
 body:has(.public-main) .trophy-shape img{width:60px;height:78px}
 body:has(.public-main) .banner-title strong{font-size:16px}
 body:has(.public-main) .banner-title span{font-size:8px}
 body:has(.public-main) .banner-right{min-width:0;font-size:9px;gap:3px}
 body:has(.public-main) .banner-right strong{font-size:9px}
 body:has(.public-main) .live-chip{font-size:9px;padding:6px 7px}
 body:has(.public-main) .segmented{width:100%}
 body:has(.public-main) .segmented button{min-width:0;flex:1;padding:9px 5px}
 body:has(.public-main) .round-select{width:100%;min-width:0}
 body:has(.public-main) .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body:has(.public-main) .stat-card{min-height:96px;padding:11px;gap:7px}
 body:has(.public-main) .stat-icon{height:42px;width: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}
 body:has(.public-main) .stat-card small{font-size:10px}
 body:has(.public-main) .public-countdown{padding:17px 14px 28px 62px;min-height:149px}
 body:has(.public-main) .v22-countdown-icon{left:13px;top:20px;width:42px;height:42px}
 body:has(.public-main) .v22-countdown-icon .v22-icon{height:27px;width:27px}
 body:has(.public-main) .public-countdown-person strong{font-size:19px}
 body:has(.public-main) .public-countdown-person small{font-size:11px}
 body:has(.public-main) #publicTimerDigits{font-size:29px}
 body:has(.public-main) .side-column{display:flex;flex-direction:column}
 body:has(.public-main) .side-card{padding:17px;width:100%}
 body:has(.public-main) .leader-table{min-width:840px}
}