/* Street Heat: live HUD and controls over the playable court. */
body{background:#111514;font-family:Bahnschrift,'Arial Narrow',system-ui,sans-serif}
header{display:none}
.wrap{position:relative;width:min(100vw,177.7778dvh);max-width:none;padding:0;margin:auto}
.arena,body.training .arena{max-width:none;width:100%;border:0;border-radius:0;box-shadow:none;margin:0;isolation:isolate}
canvas{width:100%;height:auto;max-height:none;aspect-ratio:16/9}
.top{position:absolute;right:1.3%;top:2%;margin:0;padding:0;z-index:6}
.top>div:first-child{display:none}
.tools{gap:10px;flex-wrap:nowrap}
.tools button,.game-menu summary{background:#202629ed;border:2px solid #697476;border-radius:5px;color:white;box-shadow:inset 0 0 0 3px #111a1e,0 3px 4px #0007}
#pause,#sound{font-size:0;width:43px;height:43px;padding:7px;background-repeat:no-repeat;background-position:center;background-size:26px}
#pause{background-image:url('/duel-ui/pause.svg')}
#sound{background-image:url('/duel-ui/speaker-high.svg')}
#sound[aria-pressed=false]{opacity:.45}
.game-menu{position:relative;font-size:12px}
.game-menu summary{list-style:none;cursor:pointer;padding:12px 9px}
.game-menu>div{position:absolute;right:0;top:50px;width:140px;padding:10px;background:#151d22f5;border:1px solid #77827c;display:grid;gap:8px}
.game-menu button,.game-menu a{font-size:13px;color:#fff;text-decoration:none;text-align:center;padding:9px}
.street-brand{position:absolute;top:1.5%;left:1.5%;z-index:5;width:17%;pointer-events:none}
.street-brand img{display:block;width:100%;height:auto;max-height:90px;object-fit:contain}
.street-brand span{display:block;font:italic 700 clamp(9px,1vw,14px) Bahnschrift,sans-serif;color:#efeee1;background:#12191ce8;padding:3px 9px;width:max-content}
.scoreboard{top:1.5%;gap:0;padding:0;border:2px solid #7c898d;border-radius:5px;background:#151e24f5;box-shadow:0 5px 0 #071216a6;min-width:32%;height:70px}
.side{display:flex;align-items:center;gap:12px;padding:0 14px;font-size:clamp(10px,1.3vw,19px);font-weight:900;color:#55cce8;letter-spacing:0}
.side.cpu{color:#f47c38;flex-direction:row-reverse}
.side>span{max-width:85px;font-size:20px}
.score{font:900 clamp(30px,4.1vw,58px)/1 Bahnschrift,Impact,sans-serif;letter-spacing:1px;text-shadow:2px 3px #000}
.middle{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:76px;border-left:2px solid #69767a;border-right:2px solid #69767a;background:#091015;font-weight:800;color:#d6dcd9}
.clock{font:900 35px/1 Bahnschrift,Impact,sans-serif;color:#ef792f}
.controls{position:absolute;inset:auto 1.5% 9% 2.5%;padding:0;z-index:3;pointer-events:none;align-items:flex-end}
.joystick,.buttons{pointer-events:auto}
.joystick{width:clamp(100px,14vw,185px);height:clamp(100px,14vw,185px);background:#17232666;border:2px solid #aeb4aa;box-shadow:inset 0 0 0 5px #12191d66,0 2px 5px #0006;opacity:.88}
.joystick:before{content:'';inset:0;background:url('/duel-ui/caret-left.svg') 5% center/20px no-repeat,url('/duel-ui/caret-right.svg') 95% center/20px no-repeat}
.knob{width:47%;height:47%;left:26.5%;top:26.5%;background:#62696b;border:3px solid #d5d6cc;box-shadow:inset 0 0 0 5px #353e42,0 5px 5px #0009}
.buttons{--button:clamp(59px,8vw,112px);grid-template-columns:repeat(3,var(--button));grid-template-rows:repeat(3,calc(var(--button)*.69));gap:0;opacity:1}
.action{width:var(--button);height:var(--button);background:#85402c;color:#fff3d8;border:4px solid #bfc3b7;box-shadow:inset 0 0 0 5px #202d30,inset 0 -15px 18px #0005,0 0 0 3px #1b2429,0 5px 6px #0009;font-size:clamp(13px,1.5vw,21px);line-height:1.1;padding:8px 0 5px}
.action:before{content:'';display:block;height:clamp(23px,3vw,43px);margin:0 auto 3px;width:48%;background-position:center;background-repeat:no-repeat;background-size:contain;filter:invert(93%) sepia(13%) saturate(470%)}
.action small{font-size:9px;margin-top:3px;opacity:.7}
.shoot{grid-column:2;grid-row:1;background-color:#ad482c}
.shoot:before{background-image:url('/duel-ui/basketball.svg')}
.steal{grid-column:1;grid-row:2;background-color:#205a72}
.steal:before{background-image:url('/duel-ui/hand-palm.svg')}
.jump{grid-column:3;grid-row:2;background-color:#99741c}
.jump:before{background-image:url('/duel-ui/arrow-fat-lines-up.svg')}
.dash{grid-column:2;grid-row:3;background-color:#28794d}
.dash:before{background-image:url('/duel-ui/fast-forward.svg')}
.help,.foot{display:none}
.status{bottom:2.4%;border-radius:3px;font-size:clamp(10px,1vw,14px);max-width:48%;white-space:normal;text-align:center;background:#111b20d9;color:#eee9d9}
.streak-meter{position:absolute;bottom:2%;right:1.8%;display:flex;gap:4px;align-items:center;padding:5px 8px;background:#17252bed;border:2px solid #889493;transform:skew(-9deg);font:italic 800 12px Bahnschrift,sans-serif;color:#e9ede8}
.streak-meter i{width:24px;height:15px;background:#455258;border:1px solid #9ca29b}.streak-meter i.lit{background:#fa8c33}
.overlay{z-index:8}.card{background:#121c24f2;padding:26px;border:1px solid #c2b99e}
#practiceBar{position:absolute;z-index:7;top:15%;left:26%;width:48%;padding:8px;margin:0;border-radius:4px;background:#15232aed;gap:6px}
#practiceBar select,#practiceBar button{padding:5px;font-size:12px;border-radius:3px}#practiceHint{font-size:11px;margin:0}
@media(max-width:720px){.scoreboard{height:48px;min-width:38%;top:2%}.score{font-size:29px}.side{padding:0 6px;gap:5px}.side>span{font-size:8px;max-width:42px}.middle{min-width:49px;font-size:8px}.clock{font-size:24px}.tools{gap:4px}#pause,#sound{width:29px;height:29px;background-size:19px}.game-menu summary{padding:6px;font-size:10px}.street-brand{width:17%}.street-brand img{max-height:55px}.street-brand span{font-size:8px;padding:2px 5px}.action{border-width:2px;padding-top:5px}.action small{display:none}.streak-meter{font-size:8px;padding:3px}.streak-meter i{width:15px;height:10px}.status{max-width:45%}.knob{border-width:2px}.controls{bottom:11%}#practiceBar{left:22%;width:55%;top:18%}#practiceHint{display:none}}
@media(orientation:portrait){body{min-height:100dvh;display:flex;align-items:center}.wrap{width:100vw}.buttons{--button:52px}.joystick{width:85px;height:85px}.controls{inset:auto 2% -145px}.arena{overflow:visible;margin-bottom:155px!important}.status{bottom:4%}.streak-meter{bottom:-145px}.top{right:1%;top:-43px}.street-brand{top:-55px;width:110px}.scoreboard{height:43px}.score{font-size:25px}.side>span{font-size:8px}.middle{min-width:46px}.clock{font-size:23px}.overlay{min-height:100%;padding:8px}.card{padding:10px}.card h2{font-size:24px}#practiceBar{top:60px;left:10%;width:80%}}