/* p35: flames and the target glow are centred with margins, not a CSS translate. GSAP takes over transform when it animates them, and if the scene mounts hidden (scene view, then Take the throne) it reads the translate as 0 and the flames drift beside their holders. Margin % use the box width, so they scale with the art. */
/* Shared scene styles for Archery Glade and Sheriff's Seat. DRAFT 29 Oct pt1062u.
   Used by the live D2 game pages and the anim/ previews. Everything sits under .gss so nothing leaks into the page. */
.gss{position:relative;overflow:hidden;border-radius:12px;background:#121614;isolation:isolate;touch-action:pan-y}
.gss .cam{position:absolute;inset:0;transform:scale(1.035);will-change:transform}
.gss .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.gss .shd{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,7,.1),rgba(6,8,7,.55))}
.gss .box{position:absolute;left:0;top:0;width:100%}
.gss svg.sc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gss .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gss .vig{position:absolute;inset:0;pointer-events:none}
.gss .pool{position:absolute;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);will-change:opacity;pointer-events:none}
/* archery */
.gss-arch{aspect-ratio:16/10}
.gss-arch .box{aspect-ratio:16/10}
.gss-arch .art{object-position:50% 72%}
.gss-arch .pool{width:40%;background:radial-gradient(circle,rgba(255,170,70,.32),rgba(255,140,50,.1) 42%,rgba(255,140,50,0) 68%)}
.gss-arch .pool.l{left:37.5%;top:20%}.gss-arch .pool.r{left:62.5%;top:20%}
.gss-arch .tglow{position:absolute;left:79.5%;top:47%;width:44%;aspect-ratio:1;border-radius:50%;margin:-22% 0 0 -22%;transform:none;background:radial-gradient(circle,rgba(255,226,150,.85),rgba(240,201,106,.28) 34%,rgba(240,201,106,0) 64%);opacity:0;pointer-events:none;will-change:opacity,transform}
.gss-arch .lf{position:absolute;width:3.2%;aspect-ratio:.62;margin:-2.581% 0 0 -1.6%;transform:none;pointer-events:none;will-change:transform,opacity}
.gss-arch .lf.l{left:37.5%;top:20.4%}.gss-arch .lf.r{left:62.5%;top:20.4%}
.gss .lf:before,.gss .lf:after,.gss .fl:before,.gss .fl:after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-radius:50% 50% 46% 46%/62% 62% 38% 38%}
.gss .lf:before,.gss .fl:before{width:100%;height:100%;background:radial-gradient(ellipse at 50% 72%,#FFB347 0,#F07A2A 46%,rgba(200,70,30,0) 74%)}
.gss .lf:after{width:50%;height:56%;bottom:6%;background:radial-gradient(ellipse at 50% 70%,#FFF6D8 0,#FFD77A 50%,rgba(255,200,90,0) 78%)}
.gss-arch .lastv{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(120,20,10,0) 50%,rgba(150,30,14,.55) 85%,rgba(90,12,6,.85) 100%),linear-gradient(0deg,rgba(214,84,36,.28),rgba(214,84,36,0) 45%);will-change:opacity}
.gss-arch .vig{background:radial-gradient(ellipse 74% 80% at 50% 42%,rgba(40,18,6,0) 52%,rgba(40,18,6,.42) 80%,rgba(14,7,3,.78) 100%),linear-gradient(180deg,rgba(255,170,80,.06),rgba(0,0,0,0) 40%)}
.gss #ga-hitTxt{font:700 11px Inter;fill:#F0C96A}
.gss .over{position:absolute;left:50%;top:14px;z-index:3;transform:translateX(-50%);opacity:0;display:flex;align-items:center;gap:8px;background:rgba(18,22,19,.9);border-radius:999px;padding:10px 16px;font:600 13px/1 Inter;white-space:nowrap;color:var(--txt,#F2EEE3)}
.gss .over b{color:var(--gold,#D9A441)}.gss .over .crest{display:block;flex:none}
/* archery, cropped to the band from the lantern tops to the archer's feet (viewBox y 38 to 229) */
.gss-arch.crop{aspect-ratio:400/191}
.gss-arch.crop .box{transform:translateY(-15.2%)}
/* sheriff */
.gss-sher{aspect-ratio:4/3}
.gss-sher .box{height:100%;width:auto;aspect-ratio:4/3;left:50%;transform:translateX(-50%)}
.gss-sher .art{object-position:50% 30%;opacity:.5}
.gss-sher .pool{width:46%;background:radial-gradient(circle,rgba(255,170,70,.34),rgba(255,140,50,.12) 40%,rgba(255,140,50,0) 68%)}
.gss-sher .pool.l{left:10%;top:30.2%}.gss-sher .pool.r{left:90%;top:30.2%}
.gss-sher .heat,.gss-sher .heat2,.gss-sher .flash{position:absolute;left:50%;top:40%;width:92%;aspect-ratio:1.25;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;will-change:opacity}
.gss-sher .heat{background:radial-gradient(ellipse,rgba(240,190,90,.55),rgba(217,164,65,.2) 38%,rgba(217,164,65,0) 66%)}
.gss-sher .heat2{background:radial-gradient(ellipse,rgba(255,130,50,.5),rgba(214,84,36,.18) 36%,rgba(214,84,36,0) 62%);opacity:0}
.gss-sher .flash{background:radial-gradient(ellipse,rgba(255,236,180,.9),rgba(240,201,106,.3) 34%,rgba(240,201,106,0) 62%);opacity:0}
.gss-sher .fl{position:absolute;width:7.5%;aspect-ratio:.62;margin:-10.403% 0 0 -3.75%;transform:none;transform-origin:50% 100%;pointer-events:none;will-change:transform,opacity}
.gss-sher .fl.l{left:10%;top:30.8%}.gss-sher .fl.r{left:90%;top:30.8%}
.gss-sher .fl:after{width:46%;height:52%;bottom:6%;background:radial-gradient(ellipse at 50% 70%,#FFF6D8 0,#FFD77A 50%,rgba(255,200,90,0) 78%)}
.gss-sher .vig{background:radial-gradient(ellipse 72% 78% at 50% 44%,rgba(40,18,6,0) 52%,rgba(40,18,6,.42) 80%,rgba(14,7,3,.78) 100%),linear-gradient(180deg,rgba(255,170,80,.06),rgba(0,0,0,0) 40%)}
.gss-sher .bnr{position:absolute;left:11%;right:11%;bottom:calc(2.5% + 12px);min-height:34px;display:grid;place-items:center;padding:4px 24px;transform-origin:50% 50%;will-change:transform}
.gss-sher .bnr svg{position:absolute;inset:-4px 0;width:100%;height:calc(100% + 8px);overflow:visible}
.gss-sher .bnr p{position:relative;font:600 15px/1.3 'Cormorant Garamond',serif;text-align:center;color:var(--bt,#17120B);word-break:break-word;will-change:transform;margin:0}

/* live D2 game pages: the scene sits in the hero. Phone: in the gap under the header, above the hero box.
   Desktop: in the open band above the clock card, so nothing below it moves. */
.hero .hst{position:relative}
.hero .hst .gss{box-shadow:0 10px 30px rgba(0,0,0,.35)}
@media (min-width:821px){
 .hero .hst{position:absolute;left:0;right:0;top:0;height:190px;max-width:1340px;width:calc(100% - 20px);margin:0 auto;pointer-events:none}
 .hero .hst .gss{position:absolute;right:0;bottom:10px;width:340px;pointer-events:auto}
 .hero .hst .gss-sher{aspect-ratio:auto;height:170px}
 .hero .hst .gss-sher .bnr p{font-size:13.5px}
}
@media (max-width:820px){
 body.has-stage .hero{padding-top:0}
 .hero .hst{width:calc(100% - 16px);margin:12px auto 8px}
 /* Sheriff on phone: same height and frame as the Archery stage, whole 4:3 scene centred */
 .hero .hst .gss-sher{aspect-ratio:400/191;height:auto}
 .hero .hst .gss-sher .bnr p{font-size:13px;line-height:1.15}
 /* compact title card on phone, same on Archery and Sheriff */
 body.has-stage .hero .hin .t{padding:17px 14px 10px}
 body.has-stage .hero .hin h1{font-size:24px;line-height:1.05;margin-top:5px}
 body.has-stage .hero .hin .lede{font-size:15px;line-height:1.3;margin-top:5px}
}
/* p30: desktop, the game scene is a full width banner above the title and clock row (about 16:6.5, at most 360px tall).
   The scene box keeps its own shape, centred, and the painted art covers the whole banner. */
@media (min-width:821px){
 .dash .hero{padding-top:0}
 .dash .sc-top.gtop+.hero{padding-top:12px}
 .hero .hst{position:relative;left:auto;right:auto;top:auto;height:auto;max-width:1340px;width:calc(100% - 20px);margin:0 auto 12px;pointer-events:auto}
 .hero .hst .gss{position:relative;right:auto;bottom:auto;width:100%;height:min(360px,calc((min(100vw,1360px) - 20px)*6.5/16));aspect-ratio:auto}
 .hero .hst .gss-arch .box{left:50%;width:auto;height:calc(100% * 250 / 191);aspect-ratio:16/10;transform:translate(-50%,-15.2%)}
 .hero .hst .gss-sher{height:min(360px,calc((min(100vw,1360px) - 20px)*6.5/16))}
 .hero .hst .gss-sher .bnr p{font-size:15px}
}

/* p35: title card and timer card sit above the scene, so the scene sits right on top of the play card and its button.
   Desktop dash and phone. */
body.has-stage .hero{display:flex;flex-direction:column}
body.has-stage .hero .hin{order:0}
body.has-stage .hero .hst{order:1}
body.has-stage .hero .hst>div{scroll-margin:12px}
@media (min-width:821px){
 body.has-stage .hero .hin{margin:0 auto 12px}
 body.has-stage .hero .hst{margin:0 auto}
}
@media (max-width:820px){
 body.has-stage .hero .hin{margin:12px auto 0}
 body.has-stage .hero .hst{margin:10px auto 0}
}