/* HOME STADIUM frames (home-stadium.js). Positions are % of the home canvas, matching the live windows. */
html.hs-on #home .final-home-img{filter:brightness(.82) contrast(1.06) saturate(1.08)}
html.hs-on #home .final-home-canvas::before{display:none!important}          /* no "lighter sky" pass on the photo */
#hsFrames{position:absolute;inset:0;z-index:4;pointer-events:none}
.hs-frame{position:absolute;border-radius:.7cqw;border:.22cqw solid transparent;
  background:linear-gradient(180deg,rgba(9,20,36,.84),rgba(3,8,16,.9)) padding-box,
             linear-gradient(135deg,#f4f6f9,#7d8792 28%,#e6eaef 50%,#5f6873 72%,#d9dfe6) border-box;
  box-shadow:0 0 0 .12cqw rgba(0,0,0,.6),0 1cqw 2.6cqw rgba(0,0,0,.65),inset 0 0 1.6cqw rgba(110,160,230,.14);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hs-left{left:1.6%;top:31.2%;width:25.4%;height:53.4%}
.hs-center{left:27%;top:29%;width:46%;height:55.6%}
.hs-right{left:72.9%;top:31.2%;width:25.5%;height:53.4%}
.hs-bar{position:absolute;left:0;right:0;top:0;height:11.5%;border-radius:.5cqw .5cqw 0 0;
  background:linear-gradient(180deg,#223a5c,#0c1a2e 70%,#08111f);border-bottom:.18cqw solid #c9a44a;box-shadow:0 .2cqw .6cqw rgba(0,0,0,.5)}
.hs-center .hs-bar{height:9.5%}
.hs-gold{position:absolute;left:33%;width:34%;top:9.5%;height:6.8%;clip-path:polygon(0 0,100% 0,94% 100%,6% 100%);
  background:linear-gradient(180deg,#f7e39a,#c9a44a 55%,#8a6a22);box-shadow:0 .2cqw .5cqw rgba(0,0,0,.5)}
.hs-gotw-label{position:absolute;left:72%;top:9.6%;width:24%;text-align:center;font:400 1.55cqw/1 Anton,Impact,sans-serif;letter-spacing:.08em;color:#fff;
  text-shadow:0 0 .8cqw rgba(110,170,255,.8),0 .15cqw 0 rgba(0,0,0,.7)}
.hs-plate{position:absolute;left:37%;top:82.6%;width:26%;padding:.45cqw 0;text-align:center;border-radius:.3cqw;
  background:linear-gradient(180deg,#1b2b42,#0a1424);border:.15cqw solid #aab4c0;box-shadow:0 .3cqw .8cqw rgba(0,0,0,.6);
  font:400 .95cqw/1 Anton,Impact,sans-serif;letter-spacing:.22em;color:#dfe7ee;font-style:italic}
/* team logo spot over the stadium's own sign: everyone gets a logo there (Pigskin logo if no favorite team) */
@media(min-width:851px){
  html.hs-on #hwTeamBadge{display:block;position:absolute;left:33%;top:11.5%;width:34%;height:14%;z-index:5;pointer-events:none}
  html.hs-on:not(.pp-team) #hwTeamBadge .logo{background:url(/assets/official-pigskin-logo.png) center/contain no-repeat;filter:drop-shadow(0 0 1cqw rgba(231,189,88,.6)) drop-shadow(0 .3cqw .5cqw rgba(0,0,0,.6))}
}
@media(max-width:850px){#hsFrames{display:none}}

/* old artwork effects (glints, beams, haze) were placed for the painted stadium - off on the photo */
html.hs-on #hwStadium{display:none!important}
/* soften the stadium's own name sign so no words show in the photo */
.hs-sign{position:absolute;left:26.5%;top:3.5%;width:20%;height:12%;border-radius:40%;-webkit-backdrop-filter:blur(16px) brightness(.75);backdrop-filter:blur(16px) brightness(.75);-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%)}
/* no favorite team: no center logo (the Pigskin logo is already top-left) */
@media(min-width:851px){html.hs-on:not(.pp-team) #hwTeamBadge{display:none!important}}

/* ---------- BROADCAST WINDOWS (TV package look) ----------
   glass panel with a diagonal sheen, a light that runs around the chrome edge, gold corner brackets,
   glossy title bar with a slanted red/navy header and a shine that sweeps across it every few seconds. */
@property --hsA{syntax:'<angle>';initial-value:0deg;inherits:false}
.hs-frame{overflow:visible}
.hs-glass{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 22%,transparent 40%),
             repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
.hs-run{position:absolute;inset:-.22cqw;border-radius:.8cqw;pointer-events:none;padding:.22cqw;
  background:conic-gradient(from var(--hsA),transparent 0 76%,rgba(255,236,170,.0) 78%,rgba(255,236,170,.95) 84%,#fff 85%,rgba(255,236,170,.0) 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:hsRun 7s linear infinite;filter:drop-shadow(0 0 .4cqw rgba(255,220,140,.8))}
.hs-center .hs-run{animation-duration:9s;animation-delay:-3s}
.hs-right .hs-run{animation-delay:-5s}
@keyframes hsRun{to{--hsA:360deg}}
.hs-c{position:absolute;width:1.6cqw;height:1.6cqw;border:.2cqw solid #e2c26a;filter:drop-shadow(0 0 .3cqw rgba(226,194,106,.7))}
.hs-c.tl{left:-.5cqw;top:-.5cqw;border-right:0;border-bottom:0;border-radius:.4cqw 0 0 0}
.hs-c.tr{right:-.5cqw;top:-.5cqw;border-left:0;border-bottom:0;border-radius:0 .4cqw 0 0}
.hs-c.bl{left:-.5cqw;bottom:-.5cqw;border-right:0;border-top:0;border-radius:0 0 0 .4cqw}
.hs-c.br{right:-.5cqw;bottom:-.5cqw;border-left:0;border-top:0;border-radius:0 0 .4cqw 0}
/* glossy header: navy with a slanted red leading edge, gold underline, sweeping shine */
.hs-bar{overflow:hidden;background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 48%),
    linear-gradient(100deg,#b3161c 0 9%,#7a080c 9% 10.5%,#15294a 10.5% 89.5%,#7a080c 89.5% 91%,#b3161c 91%)!important;
  border-bottom:.2cqw solid #e2c26a!important}
.hs-bar::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  animation:hsShine 6s ease-in-out infinite}
.hs-center .hs-bar::after{animation-delay:-2s}.hs-right .hs-bar::after{animation-delay:-4s}
@keyframes hsShine{0%,70%{left:-40%}100%{left:120%}}
/* frame edge: brighter chrome + outer team-neutral glow */
.hs-frame{box-shadow:0 0 0 .12cqw rgba(0,0,0,.7),0 0 1.8cqw rgba(90,150,255,.25),0 1.2cqw 3cqw rgba(0,0,0,.7),inset 0 0 1.8cqw rgba(110,160,230,.16)!important}
@media(prefers-reduced-motion:reduce){.hs-run,.hs-bar::after{animation:none}.hs-run{display:none}}
html.hs-on #hwLeftTitle,html.hs-on #hwRightTitle,html.hs-on #hwCenterTitle{background:none!important;box-shadow:none!important;border:0!important;text-shadow:0 .15cqw .3cqw rgba(0,0,0,.8)}

/* calmer (Brian 09-27): no header shines; one slow edge light on the center window only */
.hs-bar::after{display:none!important}
.hs-left .hs-run,.hs-right .hs-run{display:none!important}
.hs-center .hs-run{animation-duration:14s!important}

/* ================= BROADCAST PACKAGES (replace the chrome dashboard look) ================= */
/* shared: no chrome, no rounded corners, no corner brackets, no running light */
html.hs-fox .hs-frame,html.hs-snf .hs-frame{border:0!important;border-radius:0!important;box-shadow:0 1.2cqw 3cqw rgba(0,0,0,.55)!important}
html.hs-fox .hs-c,html.hs-snf .hs-c,html.hs-fox .hs-run,html.hs-snf .hs-run,html.hs-fox .hs-gold,html.hs-snf .hs-gold{display:none!important}
html.hs-fox .hs-glass,html.hs-snf .hs-glass{background:none!important}

/* ---- FOX style: frosted dark glass, bold white italic titles on a solid bar with a red cut-in tab ---- */
html.hs-fox .hs-frame{background:rgba(8,12,20,.66)!important;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-top:.12cqw solid rgba(255,255,255,.35)!important}
html.hs-fox .hs-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.28cqw;background:#d50a0a}
html.hs-fox .hs-bar{border-radius:0!important;height:12%!important;border-bottom:0!important;box-shadow:none!important;
  background:linear-gradient(180deg,#1d2a3d,#0e1624)!important}
html.hs-fox .hs-center .hs-bar{height:10%!important}
html.hs-fox .hs-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7%;background:#d50a0a;clip-path:polygon(0 0,100% 0,70% 100%,0 100%)}
html.hs-fox .hs-plate{border-radius:0;border:0;background:#d50a0a;color:#fff;font-style:italic;letter-spacing:.18em;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%)}
html.hs-fox .hs-gotw-label{text-shadow:0 .15cqw .3cqw rgba(0,0,0,.8);font-style:italic}
html.hs-fox #hwLeftTitle,html.hs-fox #hwRightTitle,html.hs-fox #hwCenterTitle{font-style:italic;letter-spacing:.06em}
html.hs-fox #hwCenterTab{background:none!important;color:#ff5a5a!important}

/* ---- SNF style: deep navy panels, parallelogram header with metallic rule, gold accent ---- */
html.hs-snf .hs-frame{background:linear-gradient(180deg,rgba(6,18,40,.88),rgba(2,8,20,.92))!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  outline:.1cqw solid rgba(190,205,225,.45);outline-offset:-.1cqw}
html.hs-snf .hs-bar{border-radius:0!important;height:12%!important;border-bottom:.14cqw solid #c9d3df!important;box-shadow:none!important;
  background:linear-gradient(90deg,#0a2a6b,#123e94 45%,#0a2a6b)!important;clip-path:polygon(0 0,100% 0,100% 100%,3% 100%)}
html.hs-snf .hs-center .hs-bar{height:10%!important}
html.hs-snf .hs-bar::before{content:"";position:absolute;right:0;top:0;bottom:0;width:18%;background:linear-gradient(90deg,transparent,#e7bd58);opacity:.85;clip-path:polygon(25% 0,100% 0,100% 100%,0 100%)}
html.hs-snf .hs-frame::after{content:"";position:absolute;left:3%;right:3%;bottom:-.18cqw;height:.18cqw;background:linear-gradient(90deg,transparent,#e7bd58,transparent)}
html.hs-snf .hs-plate{border-radius:0;border:.1cqw solid #c9d3df;background:linear-gradient(90deg,#0a2a6b,#123e94);clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)}
html.hs-snf #hwCenterTab{background:none!important;color:#e7bd58!important}

/* ================= ALTERNATIVE HOME BACKGROUNDS (review) ================= */
#hsBg{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
html.hs-bg-studio #home .final-home-img,html.hs-bg-stripes #home .final-home-img{visibility:hidden}
html.hs-bg-studio .hs-sign,html.hs-bg-stripes .hs-sign{display:none}
/* ---- #2 TV STUDIO SET ---- */
.hsbg-studio .wall{position:absolute;inset:0 0 34% 0;
  background:radial-gradient(ellipse 45% 60% at 50% 30%,rgb(var(--tc1,20 60 140) / .75),transparent 70%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 .25%,transparent .25% 8.33%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 .4%,transparent .4% 12.5%),
    linear-gradient(180deg,#0b1830,#060d1c)}
.hsbg-studio .led{position:absolute;top:4%;bottom:34%;width:9%;background:linear-gradient(180deg,rgb(var(--tc2,215 22 30)),rgb(var(--tc2,215 22 30) / .35));
  box-shadow:0 0 3cqw 1cqw rgb(var(--tc2,215 22 30) / .55);opacity:.85;animation:hsLed 5s ease-in-out infinite alternate}
.hsbg-studio .led.l{left:3%;clip-path:polygon(0 0,100% 6%,100% 94%,0 100%)}
.hsbg-studio .led.r{right:3%;clip-path:polygon(0 6%,100% 0,100% 100%,0 94%);animation-delay:-2.5s}
@keyframes hsLed{from{opacity:.6}to{opacity:.95}}
.hsbg-studio .wall-logo{position:absolute;left:50%;top:6%;width:22%;height:26%;transform:translateX(-50%);
  background:var(--team-logo,url(/assets/official-pigskin-logo.png)) center/contain no-repeat;filter:drop-shadow(0 0 2cqw rgb(var(--tc2,231 189 88) / .7))}
.hsbg-studio .floor{position:absolute;left:-20%;right:-20%;bottom:0;height:40%;transform:perspective(40cqw) rotateX(58deg);transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 4cqw),repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3cqw),
    radial-gradient(ellipse 50% 70% at 50% 0%,rgb(var(--tc1,20 60 140) / .6),transparent 70%),linear-gradient(180deg,#101a2c,#03060c)}
.hsbg-studio .rim{position:absolute;left:0;right:0;top:65.5%;height:.35cqw;background:linear-gradient(90deg,transparent,rgb(var(--tc2,231 189 88)),transparent);box-shadow:0 0 1.5cqw rgb(var(--tc2,231 189 88))}
html.hs-bg-studio #hwTeamBadge{display:none!important}
/* ---- #4 BROADCAST STRIPES ---- */
.hsbg-stripes{background:linear-gradient(180deg,#07101f,#030811)}
.hsbg-stripes .stripes{position:absolute;inset:-30%;transform:rotate(-18deg);
  background:linear-gradient(90deg,transparent 0 28%,rgb(var(--tc1,20 60 140) / .85) 28% 44%,rgb(var(--tc2,215 22 30) / .9) 44% 47%,transparent 47% 52%,rgb(var(--tc1,20 60 140) / .45) 52% 60%,rgb(var(--tc2,215 22 30) / .6) 60% 61.5%,transparent 61.5%)}
.hsbg-stripes .yards{position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 1px,transparent 1px 6cqw);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent);animation:hsYards 30s linear infinite}
@keyframes hsYards{to{background-position:6cqw 0}}
.hsbg-stripes .glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 20%,rgba(255,255,255,.12),transparent 70%),radial-gradient(ellipse 120% 90% at 50% 60%,transparent 50%,rgba(0,0,0,.6) 100%)}

/* STADIUM NAME SIGN (Brian 09-28): the photo's upper-deck name sign now reads PIGSKIN PICK'EM, lit like the real sign.
   Measured from the 1672x941 photo: letters x 482-728, y 68-100. */
html .hs-sign{left:26.2%!important;top:5%!important;width:20.2%!important;height:9%!important;border-radius:.2cqw!important;
  -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
  -webkit-mask-image:radial-gradient(ellipse 58% 64% at 50% 50%,#000 78%,transparent 100%)!important;mask-image:radial-gradient(ellipse 58% 64% at 50% 50%,#000 78%,transparent 100%)!important;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,17,15,.94);
  box-shadow:none}
.hs-sign span{font:400 1.95cqw/1 Anton,Impact,sans-serif;letter-spacing:.05em;color:#f3f6f2;white-space:nowrap;
  text-shadow:0 0 .35cqw rgba(255,255,255,.45),0 0 1.1cqw rgba(200,230,255,.25)}
/* Dusk stadium (Brian 09-28 "use this"): no stadium name in the photo, so no cover sign needed */
html.hs-on .hs-sign{display:none!important}
/* Less sky, more stadium (Brian 09-28): zoom the photo from the field up so the stands fill the top */
html.hs-on #home .final-home-canvas{overflow:hidden}
html.hs-on #home .final-home-img{transform:scale(1.55);transform-origin:50% 100%}

/* ================= SILVER FRAMES — CLEAN GRID (Brian 09-28: "they overlap, they don't match") =================
   One system for all three windows: same top, same height, same header, equal gutters, nothing crossing a neighbor.
   Content boxes (from home-windows.css): left 3.0–26.0%, center 27.93–71.77%, right 73.33–98.09%. */
@media(min-width:851px){
html.hs-on:not(.hs-fox):not(.hs-snf) .hs-left  {left:1.4%!important; width:25.1%!important}
html.hs-on:not(.hs-fox):not(.hs-snf) .hs-center{left:27.4%!important;width:44.9%!important}
html.hs-on:not(.hs-fox):not(.hs-snf) .hs-right {left:73.2%!important;width:25.4%!important}
html.hs-on:not(.hs-fox):not(.hs-snf) .hs-frame{top:30.4%!important;height:54.2%!important;border-radius:.45cqw!important}
html.hs-on:not(.hs-fox):not(.hs-snf) .hs-bar,
html.hs-on:not(.hs-fox):not(.hs-snf) .hs-center .hs-bar{height:10.5%!important;border-radius:.3cqw .3cqw 0 0!important}
html.hs-on:not(.hs-fox):not(.hs-snf) .hs-gold{top:10.5%!important;height:5.4%!important}
html.hs-on:not(.hs-fox):not(.hs-snf) .hs-c{display:none!important}               /* corner brackets crossed into the next window */
/* titles all centered on the same header line */
html.hs-on:not(.hs-fox):not(.hs-snf) #hwLeftTitle{left:2.2%!important;width:23.5%!important;top:31.05%!important;height:4.4%!important;background:none!important}
html.hs-on:not(.hs-fox):not(.hs-snf) #hwRightTitle{left:74%!important;width:23.8%!important;top:31.05%!important;height:4.4%!important}
html.hs-on:not(.hs-fox):not(.hs-snf) #hwCenterTitle{left:33%!important;width:34%!important;top:31.05%!important;height:4.4%!important}
html.hs-on:not(.hs-fox):not(.hs-snf) #hwCenterTab{top:36.1%!important;height:2.9%!important}
/* same interior everywhere (no darker inner boxes) */
html.hs-on:not(.hs-fox):not(.hs-snf) #hwLeftPulse,html.hs-on:not(.hs-fox):not(.hs-snf) #hwRightPulse{background:transparent!important}
/* bottom plate sits cleanly on the center frame's bottom edge, in the same silver/navy */
html.hs-on:not(.hs-fox):not(.hs-snf) .hs-plate{top:83.1%!important;left:38%!important;width:24%!important;padding:.5cqw 0!important;border-radius:.3cqw!important;
  border:.18cqw solid transparent!important;background:linear-gradient(180deg,#15294a,#0a1426) padding-box,linear-gradient(135deg,#f4f6f9,#7d8792 30%,#e6eaef 50%,#5f6873 72%,#d9dfe6) border-box!important;font-style:normal!important}
}