/* UTEC English Spelling Bee Contest 2026 — Wide Premium Hero 1.0.24
   Design refinement for PUBLIC leaderboard. Do not change dynamic IDs, scoring rules, DB or JS. */
body:has(.public-main){
  color:#082e77;
  background:linear-gradient(180deg,#e7f5ff 0%,#f5fbff 47%,#f8fcff 100%);
  overflow-x:hidden;
}
body:has(.public-main) .site-header{height:66px;border-bottom:1px solid #e1ebf8;background:rgba(255,255,255,.97)}
body:has(.public-main) .site-header-inner,
body:has(.public-main) .public-main{
  width:calc(100% - 86px)!important;
  max-width:1830px!important;
}
body:has(.public-main) .site-header-inner{min-height:65px}
body:has(.public-main) .public-main{position:relative;padding-top:3px}
body:has(.public-main) .public-main::before{
  content:"";position:absolute;inset:0 auto auto 50%;width:100vw;height:460px;transform:translateX(-50%);
  background:
    radial-gradient(ellipse 290px 140px at 10% 53%,rgba(255,255,255,.96) 0%,rgba(255,255,255,.02) 95%),
    radial-gradient(ellipse 250px 110px at 32% 75%,rgba(255,255,255,.84),transparent 92%),
    radial-gradient(ellipse 340px 145px at 76% 49%,rgba(255,255,255,.64),transparent 87%),
    radial-gradient(ellipse 490px 230px at -4% 30%,rgba(85,181,255,.37),transparent 82%),
    linear-gradient(180deg,#cceaff 0%,#e5f5ff 62%,rgba(242,250,255,0));
  pointer-events:none;z-index:0;
}
body:has(.public-main) .public-main>*{z-index:1;position:relative}
body:has(.public-main) .breadcrumbs{margin:0 0 6px;opacity:.84;min-height:18px}
body:has(.public-main) .hero-grid{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.13fr) minmax(0,.9fr);
  align-items:center;gap:34px;min-height:250px;
  margin:0 0 12px;
}
body:has(.public-main) .v124-castle{
  position:absolute;right:-43px;top:-24px;width:213px;height:264px;
  object-fit:fill;pointer-events:none;z-index:0;opacity:.95;
  filter:drop-shadow(0 5px 8px rgba(15,92,156,.06));
}
body:has(.public-main) .hero-title{
  min-height:243px;padding:11px 0 10px clamp(218px,17vw,274px);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
body:has(.public-main) .v22-bee{
  position:absolute;left:-47px;top:-26px;width:354px;height:290px;
  max-width:none;object-fit:contain;z-index:0;
  filter:drop-shadow(0 9px 18px rgba(16,85,159,.12));
}
body:has(.public-main) .hero-title .eyebrow.blue{
  font-size:12px;letter-spacing:.11em;font-weight:900;margin:0 0 10px;
}
body:has(.public-main) .hero-title h1{
  font-size:clamp(43px,3.9vw,69px);font-weight:900;line-height:1.03;
  white-space:nowrap;letter-spacing:-.062em;color:#0b307b;
}
body:has(.public-main) .hero-title h1 em{color:#ffb900}
body:has(.public-main) .v22-event-subtitle{font-size:clamp(19px,1.44vw,25px);font-weight:850;margin-top:5px}
body:has(.public-main) .hero-title p{font-size:clamp(14px,.98vw,17px);line-height:1.5;max-width:630px;margin-top:7px;color:#24518f}
body:has(.public-main) .event-banner{
  position:relative;z-index:2;
  min-height:184px;max-width:100%;gap:15px;padding:23px 29px 23px 16px;
  border-radius:24px;border:1px solid rgba(255,255,255,.88);
  background:linear-gradient(105deg,#fff5d2,#fffef9 56%,#fff9eb 100%);
  box-shadow:0 20px 40px rgba(35,104,180,.11);
}
body:has(.public-main) .banner-left{gap:15px;min-width:0}
body:has(.public-main) .trophy-shape{height:132px;width:125px;min-width:125px}
body:has(.public-main) .trophy-shape img{width:120px;height:129px;object-fit:contain}
body:has(.public-main) .banner-title strong{font-size:clamp(24px,1.95vw,36px);line-height:1.08}
body:has(.public-main) .banner-title span{font-size:13px;margin-top:8px}
body:has(.public-main) .banner-right{font-size:14px;min-width:194px;gap:9px}
body:has(.public-main) .banner-right strong{font-size:14px}
body:has(.public-main) .banner-divider{height:101px}
body:has(.public-main) .filter-bar{gap:20px;margin:0 0 13px;justify-content:space-between}
body:has(.public-main) .segmented{min-height:56px;gap:5px;padding:5px;border-radius:15px}
body:has(.public-main) .segmented button{min-width:135px;min-height:45px;font-size:13px;border-radius:11px;font-weight:800}
body:has(.public-main) .phase-tabs button{min-width:138px}
body:has(.public-main) .round-select{min-height:56px;min-width:300px;border-radius:15px;font-size:14px;font-weight:850}
body:has(.public-main) .public-layout{grid-template-columns:minmax(0,2.55fr) minmax(345px,.88fr);gap:15px}
body:has(.public-main) .stats-grid{gap:12px;margin-bottom:12px}
body:has(.public-main) .stat-card{min-height:116px;padding:16px 14px;border-radius:17px}
body:has(.public-main) .stat-icon{height:61px;width:61px;min-width:61px;border-radius:22px}
body:has(.public-main) .stat-card strong{font-size:32px}
body:has(.public-main) .stat-card:last-child strong{font-size:19px}
body:has(.public-main) .stat-card small{font-size:12px}
body:has(.public-main) .public-countdown{min-height:135px;border-radius:19px;margin-bottom:12px}
body:has(.public-main) .public-countdown-person strong{font-size:26px}
body:has(.public-main) .leader-card{border-radius:17px}
body:has(.public-main) .leader-table th{font-size:13px;padding:15px 10px}
body:has(.public-main) .leader-table td{height:58px;font-size:13px;padding:10px 9px}
body:has(.public-main) .leader-table .v22-name{font-size:14px}
body:has(.public-main) .leader-table .score-total{font-size:20px}
body:has(.public-main) .side-card{padding:20px 19px;border-radius:18px}
body:has(.public-main) .card-title h2{font-size:20px}
body:has(.public-main) .rule-row{font-size:13px;padding:11px 0}
body:has(.public-main) .rule-row strong{font-size:13px}
body:has(.public-main) .notice-card{font-size:12px}

@media(max-width:1520px){
  body:has(.public-main) .site-header-inner, body:has(.public-main) .public-main{width:calc(100% - 60px)!important}
  body:has(.public-main) .hero-grid{gap:22px}
  body:has(.public-main) .hero-title{padding-left:clamp(185px,15.5vw,230px)}
  body:has(.public-main) .hero-title h1{font-size:clamp(39px,3.4vw,54px)}
  body:has(.public-main) .v22-bee{left:-35px;width:310px}
  body:has(.public-main) .event-banner{padding:19px 19px 19px 10px}
  body:has(.public-main) .trophy-shape{width:92px;min-width:92px}
  body:has(.public-main) .trophy-shape img{width:90px}
  body:has(.public-main) .banner-title strong{font-size:clamp(21px,1.85vw,29px)}
  body:has(.public-main) .banner-right{min-width:155px;font-size:12px}
  body:has(.public-main) .banner-right strong{font-size:12px}
  body:has(.public-main) .segmented button{min-width:110px}
  body:has(.public-main) .phase-tabs button{min-width:110px}
  body:has(.public-main) .round-select{min-width:240px}
  body:has(.public-main) .stat-card strong{font-size:25px}
  body:has(.public-main) .stat-card:last-child strong{font-size:16px}
}
@media(max-width:1230px){
  body:has(.public-main) .hero-grid{grid-template-columns:minmax(0,1fr);gap:7px;margin-bottom:13px}
  body:has(.public-main) .hero-title{padding-left:230px;min-height:211px}
  body:has(.public-main) .hero-title h1{font-size:clamp(42px,5vw,62px)}
  body:has(.public-main) .v22-bee{width:310px;top:-27px}
  body:has(.public-main) .v124-castle{right:-25px;top:165px;width:160px;height:215px}
  body:has(.public-main) .event-banner{min-height:145px;max-width:740px;margin-left:auto;z-index:2}
  body:has(.public-main) .filter-bar{flex-wrap:wrap}
  body:has(.public-main) .public-layout{grid-template-columns:1fr}
  body:has(.public-main) .side-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:780px){
  body:has(.public-main) .site-header-inner,body:has(.public-main) .public-main{width:calc(100% - 26px)!important}
  body:has(.public-main) .hero-grid{gap:10px}
  body:has(.public-main) .hero-title{min-height:205px;padding:12px 0 8px 119px}
  body:has(.public-main) .v22-bee{left:-34px;top:3px;width:178px;height:191px}
  body:has(.public-main) .hero-title h1{white-space:normal;font-size:clamp(30px,7.2vw,47px)}
  body:has(.public-main) .hero-title .eyebrow.blue{font-size:9px;margin-bottom:4px}
  body:has(.public-main) .v22-event-subtitle{font-size:13px}
  body:has(.public-main) .hero-title p{font-size:11px;margin-top:5px}
  body:has(.public-main) .v124-castle{display:none}
  body:has(.public-main) .event-banner{width:100%;min-height:118px;gap:4px;padding:10px}
  body:has(.public-main) .trophy-shape{width:60px;min-width:60px;height:80px}
  body:has(.public-main) .trophy-shape img{width:60px;height:80px}
  body:has(.public-main) .banner-title strong{font-size:16px}
  body:has(.public-main) .banner-title span{font-size:8px;padding:5px 7px;margin-top:3px}
  body:has(.public-main) .banner-right{font-size:9px;gap:4px;min-width:0}
  body:has(.public-main) .banner-right strong{font-size:9px}
  body:has(.public-main) .live-chip{font-size:9px;padding:5px 6px}
  body:has(.public-main) .banner-divider{height:70px}
  body:has(.public-main) .filter-bar{gap:9px}
  body:has(.public-main) .segmented{width:100%;min-height:46px}
  body:has(.public-main) .segmented button{flex:1;min-width:0;min-height:36px;font-size:11px;padding:8px 5px}
  body:has(.public-main) .round-select{min-width:0;width:100%;min-height:48px}
  body:has(.public-main) .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:has(.public-main) .stat-card{min-height:95px;padding:10px}
  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) .side-column{display:flex;flex-direction:column}
  body:has(.public-main) .leader-table{min-width:840px}
  body:has(.public-main) .public-countdown-person strong{font-size:19px}
}