*{box-sizing:border-box}body{margin:0;background:#090810;color:#fff;font-family:Arial,system-ui,sans-serif;display:grid;min-height:100svh;place-items:center}button,select,input{font:inherit}button,select{cursor:pointer;color:#fff;border:1px solid #bca4ff88;background:#23163de8;border-radius:12px;padding:10px 15px}button:hover{filter:brightness(1.2)}button:focus-visible,select:focus-visible{outline:3px solid #8bf6ff;outline-offset:3px}#game{position:relative;width:min(100vw,1800px);aspect-ratio:16/9;overflow:hidden;isolation:isolate;container-type:inline-size}#scene{position:absolute;inset:0;background:url(street-3d.png) center/cover}#scene:after{content:'';position:absolute;inset:0;background:linear-gradient(#15112744,transparent 40%,#110b2322)}header{position:absolute;z-index:8;top:2%;left:2%;right:2%;display:flex;align-items:center;gap:1.5%;padding:1% 1.5%;border:1px solid #bda2ff77;border-radius:18px;background:linear-gradient(135deg,#221638f5,#100e1ee8);box-shadow:0 8px 30px #0005}header b{margin-right:auto;font-size:clamp(15px,2cqw,34px)}em{font-style:normal;color:#ffce51}header label,header span{font-size:10px}header strong{display:block;font-size:22px;color:#ffdc6d}select{display:block;padding:4px}header button{font-size:12px}#question{position:absolute;top:17%;left:50%;transform:translateX(-50%);padding:.6% 3%;border:2px solid #ffcf69;background:#201331ed;border-radius:14px;font-size:clamp(24px,3.5cqw,60px);font-weight:900;box-shadow:0 8px 20px #0005;z-index:7}#heat{position:absolute;top:19%;left:3%;width:22%;background:#171021e8;border:1px solid #a88fcd66;border-radius:16px;padding:1.2%;z-index:7;font-size:clamp(10px,1.1cqw,17px)}#heat-bars{display:flex;gap:6px;margin:10px 0}#heat-bars i{flex:1;height:10px;border-radius:3px;background:#493b58}#heat-bars i.lit{background:linear-gradient(90deg,#f5b03f,#ff5d19);box-shadow:0 0 10px #ff7a2955}#heat small{font-size:.8em;color:#dfcfea}.on-fire #heat{border-color:#ffae48;box-shadow:0 0 25px #ff6a3844}.target{position:absolute;top:39%;width:12%;aspect-ratio:1;border:clamp(6px,1cqw,16px) solid #efb648;border-radius:50%;background:#1f16421a;box-shadow:inset 3px 4px 3px #fff5,4px 7px 0 #845422,0 12px 18px #0005;z-index:4;padding:0;touch-action:none}.target:after{content:'';position:absolute;left:46%;top:100%;width:8%;height:90%;background:linear-gradient(90deg,#312f38,#8c8990,#2e2b32);z-index:-1;box-shadow:12px 50px 20px #0007}.target span{position:absolute;bottom:calc(100% + 18px);left:0;right:0;padding:4px;background:#26173eea;border:2px solid #ecc65e;border-radius:10px;font-size:clamp(24px,3cqw,44px);font-weight:900}.target.aimed{filter:brightness(1.3);box-shadow:0 0 30px #ffdc73,inset 0 0 20px #ffcc69}.target.hit{border-color:#b8ff9a;box-shadow:0 0 45px #9aff67}#actor{position:absolute;left:19%;bottom:9%;height:57%;aspect-ratio:2/3;z-index:5;transform-origin:50% 85%;filter:drop-shadow(9px 10px 5px #0005)}#actor img{position:absolute;width:100%;height:100%;pointer-events:none}.body{clip-path:polygon(35% 2%,58% 1%,65% 7%,66% 17%,62% 23%,61% 26%,66% 29%,61% 38%,65% 52%,70% 65%,76% 83%,85% 90%,85% 94%,67% 97%,59% 95%,60% 84%,54% 75%,49% 65%,43% 75%,40% 84%,40% 96%,21% 96%,15% 93%,16% 89%,25% 84%,29% 74%,31% 64%,31% 53%,36% 45%,37% 40%,31% 46%,28% 54%,30% 60%,27% 62%,22% 60%,22% 55%,24% 47%,28% 40%,29% 35%,28% 37%,28% 35%,30% 31%,36% 28%,40% 26%,39% 22%,35% 20%,34% 16%,35% 2%)}.arm{clip-path:polygon(62% 28%,67% 29%,71% 37%,69% 39%,73% 45%,76% 53%,78% 58%,77% 61%,74% 62%,70% 60%,70% 55%,68% 50%,65% 45%,62% 40%,61% 35%);transform-origin:63% 31%;transform:rotate(var(--arm,0deg));filter:drop-shadow(2px 2px 2px #0002)}#flight{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}#feedback{position:absolute;left:15%;right:8%;top:66%;text-align:center;font-size:clamp(28px,4.5cqw,76px);font-weight:1000;color:#ffe18c;line-height:1.05;text-shadow:0 4px 0 #311128,0 0 25px #000;z-index:7;pointer-events:none}#feedback small{display:block;font-size:.3em;margin-top:12px;color:#fff}#cheer{display:none;position:absolute;right:4%;top:28%;font-size:clamp(13px,1.8cqw,25px);font-weight:900;color:#ffdb6a;text-shadow:0 3px #381849;z-index:7}.celebrate #cheer{display:block;animation:cheer .3s infinite alternate}@keyframes cheer{to{transform:translateY(-8px)}}footer{position:absolute;z-index:8;bottom:2%;left:2%;right:2%;background:#140e24ed;border:1px solid #b397d677;border-radius:16px;padding:1%;display:flex;align-items:center;gap:4%;font-size:clamp(10px,1.1cqw,16px)}footer small{display:block;font-size:.75em;color:#cabfd8;margin-top:5px}.power-wrap{width:38%;margin-left:auto}.power-wrap label{display:flex;justify-content:space-between;font-size:.8em}.meter{position:relative;height:14px;margin-top:7px;background:#3d3048;border-radius:8px;overflow:hidden}progress{width:100%;height:100%;display:block;border:0;background:none}progress::-webkit-progress-bar{background:transparent}progress::-webkit-progress-value{background:linear-gradient(90deg,#936aff,#4ee6e1,#ffcf4e)}progress::-moz-progress-bar{background:linear-gradient(90deg,#936aff,#4ee6e1,#ffcf4e)}.meter i{position:absolute;left:55%;top:0;height:100%;width:3px;background:gold}.on-fire .meter i{left:41%}details{position:relative}summary{cursor:pointer}.audio-controls{display:flex;gap:15px}.audio-controls label{font-size:11px;display:flex;flex-direction:column;gap:8px}.audio-controls input{width:110px;accent-color:#ffcd52}details .audio-controls{position:absolute;right:0;bottom:30px;background:#241433;padding:20px;border-radius:14px}#overlay{position:absolute;inset:0;z-index:12;display:flex;align-items:center;background:linear-gradient(90deg,#100c20f2,transparent 80%),url(title-fire.png) center/cover}.card{width:46%;padding:3% 4%;max-height:100%;overflow:auto}h1{font-size:clamp(40px,6.5cqw,110px);line-height:.86;margin:18px 0;font-weight:1000;letter-spacing:-3px;text-shadow:0 5px 0 #100916}.card p{font-size:clamp(11px,1.2cqw,18px);line-height:1.5}.card small{display:block;font-size:10px;color:#d4c3e0;margin:12px 0}.primary{background:linear-gradient(#ffe897,#ffc13c);color:#21112c;font-size:22px;font-weight:900;padding:15px 40px;border-color:#fff2a1;box-shadow:0 5px #995b21}.card select{margin:10px 0}.card .audio-controls{margin:20px 0}#leaders{font-size:11px;line-height:1.6;margin-top:12px}#overlay.results{justify-content:center;background:#140d26e8;backdrop-filter:blur(10px)}.results .card{text-align:center;width:min(650px,90%)}#initials{font-size:28px;padding:10px;width:140px;text-align:center;text-transform:uppercase;border-radius:10px;border:2px solid gold}.results button{margin:10px}@media(max-width:700px){#game{min-height:680px;aspect-ratio:auto}header{flex-wrap:wrap}header b{font-size:18px}header label{display:none}header button{padding:7px}#question{top:17%;font-size:30px}#heat{top:27%;left:3%;width:32%;font-size:11px}.target{top:47%;width:16%;border-width:6px}.target span{font-size:26px;bottom:calc(100% + 8px)}#actor{height:40%;left:6%;bottom:16%}#feedback{top:64%;font-size:32px;left:4%;right:4%}footer{flex-wrap:wrap;font-size:11px;padding:10px;gap:10px}.power-wrap{width:60%;margin:0}footer>div:first-child{width:100%}#overlay{background-position:65% center}.card{width:78%;padding:25px;background:#100a2499}.card h1{font-size:54px}.card p{font-size:13px}.card small{font-size:9px}.card .audio-controls input{width:85px}.primary{font-size:20px}#cheer{top:39%;font-size:14px}.results .card{width:95%}}@media(prefers-reduced-motion:reduce){.celebrate #cheer{animation:none}}
/* Shoulder camera and right-side controls */
#scene{right:22%;background-size:100% 100%}.on-fire #scene{background-image:url(street-cheer.png)}#game:before{content:'';position:absolute;right:0;top:0;bottom:0;width:22%;background:radial-gradient(ellipse at top,#352045,#100b19 65%);border-left:2px solid #bc935044;z-index:7}header{display:contents}header>*{position:absolute;z-index:9}header b{right:2%;top:3%;width:18%;text-align:center;font-size:clamp(15px,2.3cqw,40px);font-style:italic;line-height:1.05}header b em{display:block}header label{right:2%;top:17%;width:18%;font-size:clamp(9px,1cqw,15px);padding:6px 12px;background:#24182e;border:1px solid #977042;border-radius:10px;display:flex;align-items:center;justify-content:space-between}header select{font-size:clamp(9px,1cqw,15px);max-width:70%}header>span{right:2%;top:26%;width:18%;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#24182e;border:1px solid #977042;border-radius:10px;font-size:clamp(9px,1cqw,15px)}header strong{font-size:clamp(16px,2cqw,30px)}#question{left:auto;right:2%;top:36%;width:18%;padding:2% 0;text-align:center;transform:none;font-size:clamp(18px,2.3cqw,38px);z-index:9}header #home,header #pause,header #sound,header #back{right:2%;width:18%;padding:.6% 1%;font-size:clamp(9px,1cqw,16px);text-align:left;border-color:#b39354}#home{top:49%}#pause{top:55%}#sound{top:61%}#back{top:94%}#heat{left:auto;right:2%;top:68%;width:18%;padding:1%;font-size:clamp(9px,1cqw,16px);z-index:9}#heat-bars{margin:8px 0;position:relative}#heat-bars:after{content:'🔥';position:absolute;right:-4px;top:-24px;font-size:25px}#heat-bars i{height:14px}footer{display:contents}footer>div:first-child{position:absolute;bottom:3%;left:34%;width:40%;z-index:8;font-size:clamp(9px,1cqw,14px);text-align:center;text-shadow:0 2px 4px #000;background:#100a1bc9;padding:8px;border-radius:12px}footer .power-wrap{position:absolute;right:2%;top:82%;width:18%;z-index:9;margin:0;font-size:clamp(9px,.9cqw,14px)}.power-wrap label{display:block}.power-wrap label b{display:block;margin-top:4px}.power-wrap small{display:none}footer details{position:absolute;right:2%;top:90%;z-index:10;font-size:11px}.meter i,.on-fire .meter i{left:var(--zone-left,25%);width:var(--zone-width,30%);border:2px solid #ffe584;background:#ffda511c;box-shadow:0 0 5px gold}.target{border-width:clamp(3px,.4cqw,7px)}.target span{font-size:clamp(16px,1.7cqw,27px);bottom:calc(100% + 10px);border-width:1px}.target small{position:absolute;top:110%;left:-15%;width:130%;font-size:clamp(8px,.7cqw,12px);text-shadow:0 2px 3px #000;color:#fff}.target:after{height:60%}#actor{left:-20%;top:3%;bottom:auto;height:185%;z-index:5;transform-origin:50% 35%}#feedback{left:30%;right:24%;top:70%;font-size:clamp(24px,3.7cqw,58px)}#cheer{right:25%;top:20%;font-size:clamp(12px,1.3cqw,22px)}.points-popup{position:absolute;left:50%;top:51%;z-index:10;font-size:clamp(40px,6cqw,95px);font-weight:1000;color:#ffe77c;text-shadow:0 4px #8a3a11,0 0 30px #ff9d16;pointer-events:none;animation:points-rise 2.7s ease-out forwards}.points-popup small{display:block;font-size:.2em;white-space:nowrap}@keyframes points-rise{0%{opacity:0;transform:translateY(30px) scale(.6)}15%{opacity:1;transform:translateY(0) scale(1.15)}35%{transform:translateY(-20px) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-150px) scale(.9)}}#overlay{background-color:#100c20;background-image:linear-gradient(90deg,#100c20f2,transparent 75%),url(title-fire.png);background-size:100% 100%,100% 100%;background-position:0 0,70px 0;background-repeat:no-repeat}#overlay .card{width:43%;padding-left:4%;padding-right:2%}#overlay.results .card{width:60%}.on-fire #scene:after{background:linear-gradient(#ff8a0011,#ff662211);box-shadow:inset 0 0 80px #ff7a2233}
@media(max-width:700px){#game{aspect-ratio:16/10;min-height:470px}#game:before{width:27%}#scene{right:27%}header b,header label,header>span,#question,header #home,header #pause,header #sound,header #back,#heat,footer .power-wrap{width:23%}header b{font-size:18px}header label{display:flex;font-size:9px;padding:3px}header select{font-size:9px;padding:3px}header>span{font-size:9px;padding:5px}header strong{font-size:16px}#question{font-size:22px;padding:9px 0}header #home,header #pause,header #sound,header #back{font-size:10px;padding:5px}#heat{font-size:8px;padding:7px}#heat-bars{gap:3px;margin:6px 0}#heat-bars i{height:9px}#heat-bars:after{font-size:18px;top:-19px}footer .power-wrap{font-size:9px}footer details{font-size:9px}#actor{height:185%;left:-35%;top:3%}.target span{font-size:18px}.target{min-width:36px;min-height:36px}.target small{font-size:8px}#feedback{left:25%;right:29%;font-size:24px}footer>div:first-child{left:27%;width:43%;font-size:9px}footer>div:first-child small{font-size:8px}.card h1{font-size:40px}#overlay .card{width:60%;padding:14px;background:#100b2488}.card p{font-size:10px}.card small{font-size:8px}.primary{font-size:17px;padding:10px 25px}.card select{font-size:11px}#overlay.results .card{width:85%}#overlay{background-size:100% 100%,auto 100%;background-position:0 0,30px 0}}@media(prefers-reduced-motion:reduce){.points-popup{animation-duration:2.7s}}
/* Jointed throwing arm, floating depth targets, and teaching controls */
#actor .arm{display:none}.target:after{display:none}.target{--ring:#53b9ff;border-color:var(--ring);box-shadow:inset 0 0 12px #fff8,0 0 18px var(--ring);background:#13243d11}.target[data-i="1"]{--ring:#5eeda0}.target[data-i="2"]{--ring:#ff7970}.target span{border-color:var(--ring)}.target small{top:110%;font-weight:900}.meter{height:24px;overflow:visible;background:linear-gradient(90deg,#247bbb 0 40%,#427664 40% 70%,#ad4944 70%);border:1px solid #ffffff55}.meter progress{opacity:0}.meter i,.on-fire .meter i{background:#4cf87bcc;border:2px solid #c4ffd0;box-shadow:0 0 10px #53ff71;border-radius:5px;z-index:2}.power-cursor{position:absolute;top:-5px;bottom:-5px;width:4px;background:#fff;box-shadow:0 0 6px #fff;left:var(--charge,0%);z-index:4;transform:translateX(-50%)}.power-ticks{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;letter-spacing:2px;color:#fff8}.range-legend{display:flex;justify-content:space-between;font-size:8px;margin-top:7px;font-weight:bold}.range-legend span:nth-child(1){color:#53b9ff}.range-legend span:nth-child(2){color:#5eeda0}.range-legend span:nth-child(3){color:#ff7970}footer details{top:92%}#charge-orb{position:absolute;z-index:9;left:33%;top:65%;width:7%;aspect-ratio:1;border-radius:50%;padding:6px;background:conic-gradient(#73ff9a var(--charge),#ffffff22 0);opacity:0;transform:scale(.8);transition:opacity .15s,transform .15s;pointer-events:none}#charge-orb b{display:grid;place-items:center;background:#1c1430;border-radius:50%;height:100%;font-size:3cqw}#charge-orb span{position:absolute;top:115%;left:-50%;width:200%;text-align:center;font-size:1cqw;font-weight:900;color:#b9ffd0;text-shadow:0 2px 4px #000}.charging #charge-orb{opacity:1;transform:scale(1)}#torch-can{position:absolute;right:21%;top:16%;height:47%;width:12%;object-fit:fill;display:none;z-index:3;pointer-events:none}.on-fire #torch-can{display:block;animation:torch-glow .35s infinite alternate}#fire-frame{position:absolute;inset:0;z-index:11;pointer-events:none;opacity:0;border:7px solid #ffae28;box-shadow:inset 0 0 25px #ffed63,inset 0 0 65px #ff5c00,0 0 20px #ff5100;background:radial-gradient(ellipse at bottom,#ff830055,transparent 65%) bottom/100% 9% no-repeat}.on-fire #fire-frame{opacity:1;animation:frame-flare .5s infinite alternate}@keyframes frame-flare{to{border-color:#ffef80;box-shadow:inset 0 0 35px #ffb627,inset 0 0 90px #ff4600}}@keyframes torch-glow{to{filter:brightness(1.15) drop-shadow(0 -8px 12px #ff6a00)}}@media(prefers-reduced-motion:reduce){.on-fire #fire-frame,.on-fire #torch-can{animation:none}}
#game{overflow:clip}
/* Authored full-body poses keep the shoulder and elbow connected. */
#actor{display:none}#scene{background-image:url(street-3d.png)}.on-fire #scene{background-image:url(street-cheer.png)}
/* Transparent padding counts as the same target; labels remain clickable. */
.target:before{content:'';position:absolute;inset:-24px;border-radius:40%;background:transparent}.target span{min-height:36px;display:grid;place-items:center;min-width:56px;left:50%;right:auto;transform:translateX(-50%);padding:5px 14px}.target:focus-visible,.target.aimed{outline:3px solid white;outline-offset:10px}.target small{pointer-events:none}
@media(max-width:700px){.target:before{inset:-16px}.target span{min-width:44px;min-height:32px;padding:4px 8px}}