:root{--ink:#092d33;--muted:#648286;--paper:#f7f4ed;--line:#c9d8d4;--court:#2f8b72;--court-dark:#22745f;--coral:#fb765f;--blue:#3b7dea;--gold:#ffd866;--panel:#fffefa}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#e2eee9 0,transparent 32%),#edf1ed;color:var(--ink);font-family:"Noto Sans TC",system-ui,sans-serif}.app-shell{max-width:1540px;min-height:100vh;margin:auto;padding:22px 28px 28px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--ink);color:#f8d369;font-weight:800;font-size:21px;box-shadow:0 7px 18px #0c3d3b33}.brand p,.eyebrow{font-family:Oswald,sans-serif;letter-spacing:.15em;font-size:10px;line-height:1;margin:0;color:#5f8784}.brand h1{margin:5px 0 0;font-size:21px;letter-spacing:.04em}.top-actions{display:flex;gap:9px}.icon-button,.preset,.save-button{font:inherit;cursor:pointer}.icon-button{border:1px solid #cbd9d5;background:#fffefa;border-radius:10px;padding:9px 12px;color:#315e61;font-size:13px;font-weight:700}.icon-button:hover{border-color:#75a7a0;background:#f7fcfa}.workspace{display:grid;grid-template-columns:250px minmax(480px,1fr) 270px;gap:21px;align-items:stretch}.panel{background:#fffefa;border:1px solid #dce5df;border-radius:17px;padding:22px;box-shadow:0 10px 30px #315d5330}.panel-heading h2{font-size:17px;margin:8px 0 17px}.panel-heading.compact h2{margin-bottom:10px}.preset-list{display:grid;gap:7px}.preset{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid transparent;border-radius:10px;padding:10px;background:transparent;color:var(--ink)}.preset:hover{background:#f2f7f4}.preset.active{background:#e5f2ed;border-color:#bfdbd1}.preset b,.preset small{display:block}.preset b{font-size:13px}.preset small{font-size:11px;color:#688085;margin-top:2px}.preset-dot{width:9px;height:9px;border-radius:100%;flex:none}.preset-dot.attack{background:#ef795e}.preset-dot.defense{background:#477ce0}.preset-dot.receive{background:#e1ad3d}.preset-dot.neutral{background:#67a98f}.panel-divider{height:1px;background:#e5ece8;margin:21px 0}.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:12px 0;cursor:pointer}.toggle-row input{display:none}.toggle-row i{width:34px;height:19px;background:#cbd8d5;border-radius:20px;position:relative;transition:.2s}.toggle-row i:after{content:"";position:absolute;width:13px;height:13px;left:3px;top:3px;border-radius:100%;background:#fff;transition:.2s}.toggle-row input:checked+i{background:#2c9076}.toggle-row input:checked+i:after{transform:translateX(15px)}.tip{margin-top:28px;border-radius:10px;background:#eef6f2;padding:11px;display:flex;gap:8px;color:#47706b}.tip span{color:#e7a841}.tip p{font-size:11px;line-height:1.6;margin:0}.court-area{min-width:0;display:flex;flex-direction:column;align-items:center}.court-meta{align-self:stretch;font-size:12px;color:#517579;font-weight:600;letter-spacing:.04em;display:flex;align-items:center;gap:7px;margin:3px 0 9px 3px}.live-dot{width:7px;height:7px;background:#e66b55;border-radius:50%;box-shadow:0 0 0 3px #f9d8d2}.court-hint{margin-left:auto;color:#8ba29e;font-size:11px;font-weight:500}.court-frame{width:min(100%,596px);padding:11px;background:#174e4b;border-radius:6px;box-shadow:0 16px 35px #0d343945}.court{position:relative;width:100%;aspect-ratio:1 / 1.95;overflow:hidden;background:linear-gradient(90deg,#2f8f74,#29846b);touch-action:none;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 38px,#1e765f22 39px),linear-gradient(90deg,#318e73,#287e68)}.court-lines{position:absolute;inset:4.6%;border:2px solid #f9f4dc;pointer-events:none}.line{position:absolute;background:#f9f4dc}.tramline-left,.tramline-right{top:0;bottom:0;width:1.5px}.tramline-left{left:6.6%}.tramline-right{right:6.6%}.inner-top,.inner-bottom{left:0;right:0;height:1.5px}.inner-top{top:16%}.inner-bottom{bottom:16%}.center{left:0;right:0;top:50%;height:2px}.mid-top,.mid-bottom{width:1.5px;left:50%;transform:translateX(-50%)}.mid-top{top:0;height:16%}.mid-bottom{bottom:0;height:16%}.net{position:absolute;left:0;right:0;top:50%;height:10px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,#e4e0cb 0 2px,transparent 2px 6px);border-top:2px solid #faf6e3;border-bottom:2px solid #d5d1c1;z-index:3;opacity:.95;pointer-events:none}.net span{position:absolute;right:5px;top:-23px;font:10px Oswald,sans-serif;letter-spacing:.12em;color:#e6eedb}.side-label{position:absolute;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.12em;color:#e5f1d8cc;z-index:2;pointer-events:none}.side-label.top{top:7px}.side-label.bottom{bottom:7px}.zone{display:block;position:absolute;width:32%;height:18%;border:1px dashed #f4e4a766;border-radius:50%;transform:translate(-50%,-50%);background:#ffffff0d;pointer-events:none}.top-zone{left:50%;top:26%}.bottom-zone{left:50%;top:77%}.player{position:absolute;z-index:5;width:40px;height:40px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:800;font-size:15px;cursor:grab;user-select:none;touch-action:none;box-shadow:0 3px 0 #00000024,0 8px 14px #143d3c40;transition:box-shadow .15s}.player:active,.player.dragging{cursor:grabbing;box-shadow:0 3px 0 #00000024,0 12px 18px #143d3c70}.player.team{background:var(--blue);border:3px solid #b9d2ff}.player.opponent{background:var(--coral);border:3px solid #ffc1b7}.player-label{position:absolute;left:50%;top:45px;transform:translateX(-50%);white-space:nowrap;padding:2px 6px;border-radius:4px;background:#0b3e3db8;color:#eff8ed;font-size:10px;font-weight:500;pointer-events:none}.shuttle{position:absolute;width:25px;height:25px;transform:translate(-50%,-50%) rotate(35deg);z-index:7;cursor:grab;filter:drop-shadow(0 3px 3px #173e4180)}.shuttle:before{content:"";position:absolute;left:7px;top:8px;width:11px;height:11px;background:#f7c54d;border-radius:50%;border:1px solid #fff5c6}.shuttle:after{content:"";position:absolute;left:3px;top:0;width:18px;height:13px;border:2px solid #f8f1d3;border-bottom:0;border-radius:12px 12px 2px 2px}.shuttle span{display:none}.legend{display:flex;gap:18px;align-self:stretch;justify-content:center;margin-top:11px;color:#5a7578;font-size:11px}.legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:8px;height:8px;border-radius:50%}.opponent-dot{background:var(--coral)}.team-dot{background:var(--blue)}.shuttle-mini{color:#dcad38;font-style:normal;font-size:14px}.note-field{display:block;font-size:11px;font-weight:700;color:#517278;margin:0 0 14px}.note-field input,.note-field textarea{display:block;width:100%;font:500 13px "Noto Sans TC",sans-serif;color:var(--ink);margin-top:6px;border:1px solid #d5e1dc;border-radius:8px;background:#fcfdfb;padding:9px;outline:none;resize:vertical}.note-field input:focus,.note-field textarea:focus{border-color:#6eaa9d;box-shadow:0 0 0 3px #bbe2d533}.save-button{width:100%;border:0;border-radius:9px;padding:11px;background:var(--ink);color:#f6f0dc;font-weight:700}.save-button:hover{background:#15554f}.save-status{min-height:17px;text-align:center;color:#40806e;font-size:11px;margin:8px 0 3px}.position-readout{border-top:1px solid #e5ece8;margin-top:16px;padding-top:15px}.position-readout .eyebrow{display:block;margin-bottom:7px}.position-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #edf1ee;font-size:11px;color:#638083}.position-row b{font-weight:600;color:#294f52}.mini-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.mini-dot.team{background:var(--blue)}.mini-dot.opponent{background:var(--coral)}
@media(max-width:1050px){.workspace{grid-template-columns:210px minmax(420px,1fr)}.right-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.right-panel .panel-heading,.right-panel .save-button,.right-panel .save-status,.right-panel .position-readout{grid-column:auto}.right-panel .panel-heading h2{margin-bottom:0}.note-field{margin:0}.position-readout{margin-top:0;border-top:0;padding-top:0}}@media(max-width:720px){.app-shell{padding:15px}.workspace{display:flex;flex-direction:column;gap:14px}.left-panel{order:2}.court-area{order:1}.right-panel{order:3;display:block}.right-panel .panel-heading h2{margin-bottom:17px}.right-panel .note-field{margin-bottom:14px}.right-panel .position-readout{margin-top:16px;border-top:1px solid #e5ece8;padding-top:15px}.court-frame{max-width:480px}.top-actions span{display:none}.icon-button{padding:9px 11px}.brand h1{font-size:18px}.panel{padding:18px}.preset-list{grid-template-columns:1fr 1fr}.court-hint{display:none}}@media(max-width:420px){.preset-list{grid-template-columns:1fr}.court-frame{padding:7px}.player{width:36px;height:36px}.player-label{top:40px}.legend{gap:9px;font-size:10px}}

/* Official badminton-court geometry: 6.10 m × 13.40 m (doubles). */
.court{aspect-ratio:6.1 / 13.4}
.tramline-left,.tramline-right{top:0;bottom:0;width:1.5px}
.tramline-left{left:7.49%}.tramline-right{right:7.49%}
/* Doubles long-service lines are 0.76 m in from each back boundary. */
.inner-top,.inner-bottom,.short-top,.short-bottom{left:0;right:0;height:1.5px}
.inner-top{top:5.67%}.inner-bottom{bottom:5.67%}
/* Short-service lines are 1.98 m from the net: 35.22% / 64.78% of court length. */
.short-top{top:35.22%}.short-bottom{bottom:35.22%}
/* The centre line divides the two service courts from baseline to short-service line. */
.mid-top{top:0;height:35.22%}.mid-bottom{bottom:0;height:35.22%}

/* Each defensive coverage area is positioned from its player's live location. */
.zone{z-index:1;width:29%;height:13%;border:1.5px dashed;border-radius:50%;background:transparent;transition:left .08s linear,top .08s linear}
.team-zone{border-color:#a9c8ff8c;background:#a9c8ff12}.opponent-zone{border-color:#ffc0b58c;background:#ffc0b512}