:root{--ink:#f5f4ee;--muted:#a6a7a1;--night:#080a0c;--panel:#111519;--line:#ffffff1f;--lime:#d9ff43;--orange:#ff6b2c;--blue:#53a6ff}.route-loading{background:#07090b;min-height:100vh}*{box-sizing:border-box}html,body{background:var(--night);min-height:100%;color:var(--ink);margin:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}button,input,select{font:inherit}button{color:inherit}.app-shell{background:radial-gradient(circle at 78% 10%,#d9ff431c,#0000 27rem),radial-gradient(circle at 3% 80%,#53a6ff1c,#0000 31rem),#080a0c;min-height:100vh}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:72px;padding:0 4vw;display:flex}.brand{letter-spacing:-.04em;align-items:center;gap:12px;font-size:22px;font-weight:950;display:flex}.brand-ball{background:var(--orange);border:2px solid #111;border-radius:50%;width:30px;height:30px;position:relative;box-shadow:inset -6px -5px #0000002e}.brand-ball:after{content:"";border:2px solid #111;border-radius:50%;position:absolute;inset:4px -2px;transform:rotate(-27deg)}.status-pill{color:var(--muted);align-items:center;gap:8px;font-size:13px;display:inline-flex}.status-dot{background:var(--lime);width:8px;height:8px;box-shadow:0 0 12px var(--lime);border-radius:50%}.landing{width:min(1180px,92vw);margin:0 auto;padding:64px 0 80px}.eyebrow{color:var(--lime);letter-spacing:.16em;text-transform:uppercase;font-size:12px;font-weight:850}.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;display:grid}.hero h1{letter-spacing:-.075em;max-width:720px;margin:14px 0 20px;font-size:clamp(54px,7vw,106px);font-weight:950;line-height:.86}.hero h1 span{color:var(--lime)}.hero-copy{color:#b8bbb4;max-width:630px;font-size:18px;line-height:1.75}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:30px;display:flex}.primary,.secondary,.tiny-btn{cursor:pointer;border:0;transition:transform .15s,background .15s}.primary:hover,.secondary:hover,.tiny-btn:hover{transform:translateY(-2px)}.primary{background:var(--lime);color:#080a0c;border-radius:5px;padding:15px 24px;font-weight:900;box-shadow:0 10px 34px #d9ff432e}.secondary{border:1px solid var(--line);background:0 0;border-radius:5px;padding:14px 22px;font-weight:750}.tiny-btn{background:#ffffff14;border-radius:4px;padding:9px 12px}.court-card{border:1px solid var(--line);background:linear-gradient(145deg,#ffffff0e,#ffffff03);border-radius:12px;min-height:460px;padding:22px;transform:perspective(900px)rotateY(-4deg)rotateX(2deg);box-shadow:0 40px 100px #0000005c}.demo-score{justify-content:space-between;align-items:center;font-weight:900;display:flex}.demo-score strong{letter-spacing:.08em;font-size:27px}.mini-court{clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);background:#b8793e;border-radius:5px;height:345px;margin-top:24px;position:relative;overflow:hidden}.mini-court:before{content:"";border:2px solid #ffffffbf;border-radius:50%;position:absolute;inset:8%;transform:scaleX(.55)}.mini-court:after{content:"";border-left:2px solid #ffffffb3;position:absolute;top:0;bottom:0;left:50%}.mini-player{background:var(--blue);border-radius:45% 45% 40% 40%;width:28px;height:43px;position:absolute;box-shadow:0 13px 10px #00000059}.mini-player.orange{background:var(--orange)}.mini-ball{background:#ed7a27;border-radius:50%;width:18px;height:18px;position:absolute;top:46%;left:59%;box-shadow:0 7px 10px #0006}.mode-strip{border-top:1px solid var(--line);grid-template-columns:repeat(3,1fr);margin-top:66px;display:grid}.mode-feature{padding:28px 24px 0 0}.mode-feature+.mode-feature{border-left:1px solid var(--line);padding-left:24px}.mode-feature b{margin-bottom:7px;display:block}.mode-feature p{color:var(--muted);margin:0;font-size:14px;line-height:1.6}.setup-wrap{width:min(1100px,92vw);margin:0 auto;padding:48px 0 80px}.back-link{color:var(--muted);cursor:pointer;background:0 0;border:0;margin-bottom:28px;padding:0}.setup-head{justify-content:space-between;align-items:end;gap:30px;display:flex}.setup-head h1{letter-spacing:-.06em;margin:6px 0 0;font-size:clamp(40px,6vw,72px)}.setup-layout{grid-template-columns:1.1fr .9fr;gap:22px;margin-top:35px;display:grid}.panel{border:1px solid var(--line);background:#101316eb;border-radius:8px;padding:24px}.panel h2{margin:0 0 20px;font-size:18px}.mode-tabs{grid-template-columns:1fr 1fr;gap:10px;display:grid}.mode-tab{text-align:left;border:1px solid var(--line);cursor:pointer;background:#0c0f12;border-radius:6px;padding:18px}.mode-tab.active{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}.mode-tab strong{margin-bottom:5px;font-size:20px;display:block}.mode-tab span{color:var(--muted);font-size:13px}.form-grid{grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;display:grid}.field{flex-direction:column;gap:7px;display:flex}.field label{color:var(--muted);letter-spacing:.04em;font-size:12px;font-weight:750}.field input,.field select{border:1px solid var(--line);width:100%;color:var(--ink);background:#090b0d;border-radius:4px;outline:none;padding:12px}.field input:focus,.field select:focus{border-color:var(--lime)}.full{grid-column:1/-1}.rule-list{gap:10px;display:grid}.rule{color:#c9cbc6;align-items:center;gap:11px;font-size:14px;display:flex}.rule i{width:22px;height:22px;color:var(--lime);background:#d9ff431f;border-radius:50%;flex:none;place-items:center;font-size:12px;font-style:normal;display:grid}.setup-cta{width:100%;margin-top:22px;padding:17px;font-size:16px}.lobby{width:min(1100px,94vw);margin:0 auto;padding:40px 0 70px}.lobby-grid{grid-template-columns:.75fr 1.25fr;gap:22px;display:grid}.room-code{letter-spacing:.13em;color:var(--lime);margin:14px 0;font-size:clamp(50px,7vw,78px);font-weight:950}.join-url{overflow-wrap:anywhere;color:var(--muted);border:1px solid var(--line);background:#090b0d;border-radius:5px;padding:12px;font-size:13px;line-height:1.6}.qr-placeholder{background:#f2f2ed;grid-template-rows:repeat(9,1fr);grid-template-columns:repeat(9,1fr);gap:2px;width:184px;height:184px;margin:22px 0;padding:13px;display:grid}.qr-placeholder i{background:#111}.slot-picker{flex-wrap:wrap;gap:7px;margin:-10px 0 12px;display:flex}.slot-picker button{border:1px solid var(--line);color:#aeb7bc;background:#11161a;border-radius:4px;padding:7px 9px;font-size:11px;font-weight:800}.slot-picker button.active{border-color:var(--lime);color:var(--lime);background:#d9ff431f}.seats{grid-template-columns:1fr 1fr;gap:12px;display:grid}.seat{border:1px solid var(--line);border-radius:6px;justify-content:space-between;align-items:center;min-height:90px;padding:16px;display:flex}.seat.blue{border-left:4px solid var(--blue)}.seat.orange{border-left:4px solid var(--orange)}.seat small{color:var(--muted);margin-top:4px;display:block}.seat-state{color:var(--lime);font-size:12px}.lobby-actions{gap:10px;margin-top:18px;display:flex}.game-page{background:#040506;flex-direction:column;height:100vh;min-height:640px;display:flex}.scoreboard{z-index:3;background:linear-gradient(#17232e,#0a1016);border-top:4px solid #354a5b;border-bottom:5px solid #05080a;grid-template-columns:1fr auto 1fr;align-items:center;height:78px;padding:0 24px;display:grid;box-shadow:0 8px 24px #00000073,inset 0 1px #ffffff1f}.scoreboard-hit .score-number{color:#fff35b;animation:.6s cubic-bezier(.2,1.8,.5,1) scoreBump}@keyframes scoreBump{0%{transform:scale(1)}35%{transform:scale(1.55)rotate(-4deg)}to{transform:scale(1)}}.score-team{align-items:center;gap:13px;font-weight:900;display:flex}.score-team.away{justify-content:flex-end}.team-mascot{letter-spacing:.1em;background:#238fc2;border:3px solid #66c9ed;border-radius:4px;place-items:center;width:52px;height:38px;font:950 12px/1 ui-monospace,monospace;display:grid;box-shadow:inset 0 -5px #00000024}.team-mascot.orange{background:#ec653c}.team-chip{background:var(--blue);width:13px;height:32px}.team-chip.orange{background:var(--orange)}.score-number{letter-spacing:-.05em;text-shadow:0 3px #130a05;min-width:42px;font-size:40px;display:inline-block}.clockbox{text-align:center;background:#080c0f;border:3px solid #475b69;border-radius:5px;min-width:180px;padding:8px 18px;box-shadow:inset 0 0 0 2px #020405}.clock{font:900 27px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.period{color:var(--muted);letter-spacing:.13em;margin-top:6px;font-size:11px}.game-stage{background:radial-gradient(circle at 50% 20%,#40566a,#101921 70%);flex:1;place-items:start center;min-height:0;display:grid;position:relative;overflow:hidden}.game-canvas{aspect-ratio:5/3;outline:none;width:min(100vw,166.67vh - 130.003px);height:auto;max-height:calc(100vh - 78px);display:block}.game-hud{pointer-events:none;position:absolute;inset:0}.shot-clock{border:1px solid var(--line);text-align:center;color:#ff5a43;background:#050607d1;min-width:68px;padding:8px 12px;font:900 23px/1 ui-monospace,monospace;position:absolute;top:18px;right:24px}.rule-toast{border-left:4px solid var(--lime);letter-spacing:.02em;background:#050708e0;padding:13px 20px;font-weight:850;animation:.2s toastIn;position:absolute;top:20px;left:50%;transform:translate(-50%)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,-8px)}}.score-celebration{pointer-events:none;z-index:5;flex-direction:column;justify-content:center;align-items:center;animation:2.35s both scoreScene;display:flex;position:absolute;inset:0;overflow:hidden}.score-celebration:before{content:"";background:radial-gradient(circle,#fff7ae4d,#09131c0a 45%,#03080c85);animation:.55s ease-out flashIn;position:absolute;inset:0}.score-burst{aspect-ratio:1;background:repeating-conic-gradient(from 0deg, #ffffff5c 0 7deg, transparent 7deg 16deg);border-radius:50%;width:340px;animation:4s linear infinite burstSpin;position:absolute}.score-celebration.blue .score-burst{background-color:#249dcf8c}.score-celebration.orange .score-burst{background-color:#ef5b328c}.score-mascot{z-index:1;filter:drop-shadow(0 12px 4px #00000059);font-size:clamp(74px,11vw,130px);animation:.65s cubic-bezier(.15,1.7,.35,1) mascotPop}.score-call{z-index:1;letter-spacing:-.06em;color:#fff;text-shadow:0 5px #372012,0 9px 28px #00000080;margin-top:-5px;font-size:clamp(30px,5vw,62px);font-weight:1000;line-height:.9;transform:rotate(-3deg)}.score-points{z-index:1;color:#fff35b;letter-spacing:-.09em;text-shadow:0 7px #9c5b22,0 14px 38px #00000073;font-size:clamp(70px,12vw,148px);font-weight:1000;line-height:.85;animation:.7s cubic-bezier(.2,1.8,.4,1) .12s both pointSlam}.score-team-name{z-index:1;color:#fff5c8;letter-spacing:.12em;background:#372012;border:3px solid #fff5c8;border-radius:999px;margin-top:12px;padding:9px 24px;font-weight:950;box-shadow:0 7px #00000047}@keyframes flashIn{0%{opacity:1;background:#fff}to{opacity:1}}@keyframes scoreScene{0%{opacity:0}8%,78%{opacity:1}to{opacity:0}}@keyframes burstSpin{to{transform:rotate(360deg)scale(1.2)}}@keyframes mascotPop{0%{transform:translateY(70px)scale(.2)rotate(-18deg)}to{transform:translateY(0)scale(1)rotate(4deg)}}@keyframes pointSlam{0%{opacity:0;transform:scale(2.6)rotate(10deg)}to{opacity:1;transform:scale(1)rotate(-4deg)}}.controls-hint{color:#c7c8c2;border:1px solid var(--line);background:#050607bf;padding:10px 13px;font-size:12px;position:absolute;bottom:18px;left:18px}.game-actions{pointer-events:auto;gap:8px;display:flex;position:absolute;top:18px;left:18px}.timeout-btn{color:#ffe883;border-color:#e7c35a}.timeout-count{color:#e9e1cc;letter-spacing:.06em;background:#050607c2;border-radius:4px;padding:7px 10px;font-size:11px;position:absolute;top:64px;right:24px}.foul-count{color:#f8d77c;letter-spacing:.06em;background:#050607c2;border-radius:4px;padding:7px 10px;font-size:11px;position:absolute;top:98px;right:24px}.inbound-count{color:#221807;background:#f4d248;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:950;position:absolute;top:68px;left:50%;transform:translate(-50%);box-shadow:0 4px 14px #0000004d}.timeout-overlay{z-index:6;background:radial-gradient(circle,#238dc1b8,#04090de6);flex-direction:column;justify-content:center;align-items:center;animation:.22s toastIn;display:flex;position:absolute;inset:0}.timeout-overlay.orange{background:radial-gradient(circle,#ef5b32b8,#0c0604e6)}.timeout-overlay strong{letter-spacing:-.06em;text-shadow:0 8px 24px #00000080;font-size:clamp(42px,8vw,92px)}.timeout-overlay span{color:#fff3c5;letter-spacing:.12em;margin-top:10px;font-weight:800}.free-throw-panel{z-index:5;background:#060a0dd6;border:1px solid #ffffffa6;border-radius:5px;justify-items:center;gap:4px;width:min(340px,68vw);padding:9px 16px 10px;display:grid;position:absolute;top:66px;left:50%;transform:translate(-50%);box-shadow:0 8px 22px #0000005c}.free-throw-panel strong{color:#fff;letter-spacing:.08em;font-size:17px}.free-throw-panel span{color:#d7d9d2;font-size:11px}.game-over{pointer-events:auto;background:#040506d1;place-items:center;display:grid;position:absolute;inset:0}.game-over-card{text-align:center;border:1px solid var(--line);background:#111519;border-radius:10px;width:min(520px,88vw);padding:36px}.game-over-card h2{letter-spacing:-.05em;margin:4px 0 14px;font-size:48px}.controller-page{-webkit-user-select:none;user-select:none;touch-action:none;background:radial-gradient(circle at 50% 120%,#1a252c,#07090b 64%);flex-direction:column;min-height:100vh;padding:14px 18px 12px;display:flex;overflow:hidden}.controller-head{justify-content:space-between;align-items:center;display:flex}.controller-head strong{color:var(--lime);letter-spacing:.12em}.controller-status{color:var(--muted);font-size:12px}.controller-body{flex:1;grid-template-columns:minmax(150px,1fr) minmax(130px,.86fr) minmax(235px,1.18fr);align-items:center;gap:clamp(10px,2.6vw,34px);min-height:0;display:grid}.stick-zone{justify-items:center;gap:10px;min-width:0;display:grid}.stick-zone>span{color:#9ba5aa;text-align:center;letter-spacing:.03em;font-size:11px;font-weight:750}.joystick{aspect-ratio:1;touch-action:none;background:radial-gradient(circle,#ffffff17,#ffffff05 70%);border:2px solid #ffffff2e;border-radius:50%;width:min(27vw,210px);position:relative;box-shadow:inset 0 0 0 9px #0003,0 18px 42px #00000040}.joystick:before,.joystick:after{content:"";pointer-events:none;background:#ffffff17;position:absolute}.joystick:before{width:52%;height:1px;top:50%;left:24%}.joystick:after{width:1px;height:52%;top:24%;left:50%}.pro-stick{border-color:#d9ff433d;width:min(23vw,178px)}.stick{aspect-ratio:1;z-index:1;background:linear-gradient(145deg,#343c42,#1a1e22);border:2px solid #ffffff40;border-radius:50%;width:40%;position:absolute;top:30%;left:30%;box-shadow:0 8px 20px #0006,inset 0 2px #ffffff14}.action-grid{grid-template-rows:repeat(3,clamp(66px,8.3vw,100px));grid-template-columns:repeat(3,clamp(66px,8.3vw,100px));justify-content:center;align-items:center;display:grid}.action-btn{aspect-ratio:1;color:#fff;touch-action:none;background:#171b1f;border:2px solid #fff3;border-radius:50%;width:clamp(66px,8.3vw,100px);padding:9px;font-size:clamp(10px,1.2vw,13px);font-weight:900;line-height:1.15;box-shadow:0 8px 18px #00000059,inset 0 2px #ffffff14}.action-btn:active{filter:brightness(1.18);transform:scale(.93)}.face-y{color:#10130b;background:#b69a24;border-color:#ffe46d;grid-area:1/2}.face-x{background:#276ca9;border-color:#75bfff;grid-area:2/1}.face-b{background:#a63e35;border-color:#ff8b7e;grid-area:2/3}.face-a{background:#38874a;border-color:#7fe493;grid-area:3/2}.controller-note{text-align:center;color:var(--muted);letter-spacing:.025em;font-size:11px}@media (width<=820px){.hero-grid,.setup-layout,.lobby-grid{grid-template-columns:1fr}.court-card{min-height:380px;transform:none}.mini-court{height:290px}.mode-strip{grid-template-columns:1fr}.mode-feature+.mode-feature{border-left:0;padding-left:0}.mode-feature{border-top:1px solid var(--line);padding:18px 0}.scoreboard{padding:0 10px}.score-team span:not(.score-number){display:none}.clockbox{min-width:120px}}@media (orientation:portrait) and (width<=720px){.controller-page{overflow:auto}.controller-body{grid-template-rows:auto auto;grid-template-columns:1fr 1fr;padding:20px 0}.action-grid{grid-column:1/-1}.joystick{width:min(42vw,190px)}.pro-stick{width:min(36vw,160px)}.controller-page:before{content:"横屏操作体验更好";color:var(--lime);text-align:center;font-size:12px}}