*{box-sizing:border-box} :root{font-family:'Microsoft YaHei','PingFang SC',sans-serif;color:#f7eedb;background:#10232b}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid #ffe49c;outline-offset:3px}#app{max-width:1600px;margin:auto}header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid #ffffff17}.brand{font-weight:900;letter-spacing:3px;font-size:20px;color:inherit;text-decoration:none}.brand span{font-weight:400;font-size:11px;letter-spacing:1px;margin-left:24px;color:#b3c1bd}.top-actions{display:flex;gap:9px}.top-actions button{background:#ffffff09;border:1px solid #ffffff1c;border-radius:6px;padding:9px 13px;font-size:12px}#arena{position:relative;aspect-ratio:1200/760;max-height:calc(100svh - 118px);margin:auto;overflow:hidden;background:#243c42}canvas{display:block;width:100%;height:100%;object-fit:contain;outline:0;touch-action:none}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#122932f5 0%,#122932eb 35%,#12293205 80%);display:flex;align-items:center;padding:4% 7%;z-index:4}.intro{width:410px;max-width:48%}.eyebrow{font-size:10px;letter-spacing:2px;color:#edb989;font-weight:bold}h1{font-size:clamp(40px,5.2vw,78px);line-height:1.12;margin:20px 0;color:#fff0d6;letter-spacing:-3px}h1 em{color:#ff845c;font-style:normal}p{color:#b4c9c7;font-size:13px;line-height:1.9}.select{display:flex;gap:10px;margin:20px 0}.player{background:#203b43;border:1px solid #4a6062;border-radius:9px;display:grid;grid-template-columns:44px 1fr;text-align:left;padding:12px;gap:4px 8px;flex:1}.player.selected{border-color:#ff9e6b;background:#3d3e38;box-shadow:0 0 0 1px #ff9e6b}.jersey{grid-row:span 2;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;clip-path:polygon(16% 0,35% 0,50% 12%,65% 0,84% 0,100% 25%,84% 37%,84% 100%,16% 100%,16% 37%,0 25%);height:47px;color:#172c34}.coral{background:#ff7955}.teal{background:#65d8d1}.player strong{font-size:16px}.player small{font-size:9px;white-space:nowrap;color:#bbccc9}.primary{background:#ff875c;color:#152a32;width:100%;padding:15px 20px;font-weight:900;border-radius:6px;display:flex;justify-content:space-between}.rule{font-size:10px;color:#a1b7b5}.menu-tag{position:absolute;right:6%;bottom:13%;font-size:18px;font-weight:bold;line-height:1.8;text-shadow:0 2px 8px #13252b}.menu-tag span{display:block;font-size:8px;letter-spacing:3px;color:#ffcf94;margin-top:12px}footer{display:flex;justify-content:space-between;padding:14px 4%;color:#9cb1b3;font-size:10px}kbd{font:inherit;color:#e7dfc8;margin-left:12px}#hud{position:absolute;top:3%;left:3%;right:3%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.score{display:flex;gap:16px;align-items:center;padding:10px 20px;background:#102831e8;border-radius:7px;border:1px solid #ffffff21}.score span{font-size:13px}.score b{font-size:32px}.score i{color:#91a7a5;font-style:normal}#status{position:absolute;top:79px;left:0;font-size:13px;color:#fff1c7;background:#172e36d9;padding:7px 13px;border-radius:4px}.clock{background:#102831e8;padding:12px;border-radius:6px;font-size:11px}.clock b{font-size:22px;color:#ffcb8c}#stamina{margin-left:15px;color:#7fe2cf}#toast{position:absolute;left:50%;top:23%;transform:translateX(-50%);font-weight:bold;font-size:21px;color:#fff2d9;text-shadow:0 2px 10px #14262d;pointer-events:none;text-align:center;white-space:nowrap}.hidden{display:none!important}#dialog{justify-content:center;background:#10232bba;backdrop-filter:blur(6px)}.dialog-card{background:#19343d;border:1px solid #69817a;border-radius:14px;padding:35px;max-width:460px;width:90%;text-align:center;box-shadow:0 20px 100px #0007}h2{font-size:32px;margin:16px 0;color:#ffe0ae}#dialogActions{display:flex;flex-direction:column;gap:10px;margin-top:20px}#dialogActions button{padding:13px;border-radius:5px;background:#2e4c53}#dialogActions button:first-child{background:#ff875c;color:#162d34;font-weight:bold}#touch{position:absolute;inset:0;pointer-events:none;z-index:3}#stick{position:absolute;left:5%;bottom:7%;width:112px;height:112px;border-radius:50%;background:#142e385c;border:2px solid #ffffff45;pointer-events:auto;touch-action:none}#knob{width:46px;height:46px;background:#f1e2bf8c;border:2px solid #fff9;border-radius:50%;position:absolute;left:31px;top:31px;pointer-events:none}.touch-actions{position:absolute;bottom:7%;right:4%;display:flex;gap:14px;align-items:end;pointer-events:auto}.touch-actions button{border-radius:50%;width:64px;height:64px;background:#19343dc9;border:2px solid #c9d6c580;touch-action:none;font-size:13px;user-select:none}#shootTouch{width:87px;height:87px;background:#ed8759d9;border-color:#ffe1aa;font-weight:bold;color:#142c35}.touch-actions button:active{filter:brightness(1.4)}#rotate{display:none;position:absolute;bottom:4%;left:0;right:0;text-align:center;font-size:12px;color:#ffdda8;pointer-events:none}body{overscroll-behavior:none}@media(pointer:coarse){#touch:not(.hidden){display:block}footer{display:none}}@media(max-height:600px), (orientation:portrait) and (pointer:coarse), (orientation:portrait) and (max-width:600px){header{height:40px}.brand{font-size:14px}.brand span{font-size:9px}.top-actions button{padding:5px 9px;font-size:10px}#arena{height:calc(100svh - 40px);max-height:none;width:100%;aspect-ratio:auto}footer{display:none}.overlay{padding:2% 6%}.intro{width:360px;max-width:49%}h1{font-size:38px;margin:10px 0}.intro p{font-size:10px;line-height:1.6;margin:7px 0}.select{margin:10px 0}.player{padding:7px;grid-template-columns:33px 1fr;gap:2px 4px}.jersey{height:38px;font-size:15px}.player small{font-size:8px}.player strong{font-size:13px}.primary{padding:10px}.menu-tag{font-size:15px;bottom:18%}.score{padding:4px 12px;gap:12px}.score b{font-size:24px}#status{top:49px;font-size:11px}.clock{padding:7px}#toast{font-size:17px}.dialog-card{padding:19px;max-width:410px}.dialog-card p{font-size:11px}h2{font-size:25px;margin:8px 0}#dialogActions{margin-top:10px}#dialogActions button{padding:9px}#stick{width:100px;height:100px}#knob{left:25px;top:25px}}
/* Keep the new jump button within thumb reach without covering the court. */
.touch-actions{gap:10px;display:grid;grid-template-columns:62px 62px 82px;grid-template-rows:62px 62px;align-items:center}
.touch-actions button{width:60px;height:60px}
#jumpTouch{grid-column:2;grid-row:1;background:#3c6a7dcc;border-color:#93d6dc}
#stepTouch{grid-column:1;grid-row:1;background:#504f70cc;border-color:#c5b9e2}
#dashTouch{grid-column:1;grid-row:2}
#defendTouch{grid-column:2;grid-row:2}
#shootTouch{grid-column:3;grid-row:1 / 3;width:82px;height:82px;align-self:center}

.portrait{grid-row:span 2;width:44px;height:44px;align-self:center;border:0;background-repeat:no-repeat;background-color:transparent}@media(max-height:600px), (orientation:portrait) and (pointer:coarse), (orientation:portrait) and (max-width:600px){.portrait{width:33px;height:33px}}

/* Keep the entire mobile interface in landscape, including portrait-only browsers. */
@media(pointer:coarse){
  html,body{width:100%;height:100%;overflow:hidden}
  #app{height:100svh;max-width:none}
  header{height:40px;padding-left:max(4%,env(safe-area-inset-left));padding-right:max(4%,env(safe-area-inset-right))}
  #arena{height:calc(100svh - 40px);max-height:none;width:100%;aspect-ratio:auto}
  #rotate{display:none}
}
@media(orientation:portrait) and (pointer:coarse), (orientation:portrait) and (max-width:600px){
  #app{position:fixed;top:0;left:100%;width:100svh;height:100svw;transform-origin:top left;transform:rotate(90deg)}
  #arena{height:calc(100svw - 40px)}
}

.touch-actions.has-dunk{grid-template-columns:62px 62px 62px 82px}.touch-actions.has-dunk #shootTouch{grid-column:4}#dunkTouch{grid-column:3;grid-row:1 / 3;background:#b45c32dc;border-color:#ffd39a;color:#fff0d7;font-weight:bold}#dunkTouch:disabled{opacity:.48;cursor:default;font-size:11px}