:root{color-scheme:light;--ink:#202323;--muted:#68706e;--orange:#f28a11;--orange-dark:#dc7300;--paper:#f7f6f2;--line:#e7e8e3}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;min-width:320px}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}[hidden]{display:none!important}
.site-header{background:#202323;min-height:86px;display:flex;align-items:center}.header-inner{max-width:1220px;width:100%;margin:auto;padding:18px 34px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:inline-flex;align-items:center}.brand img{display:block;width:191px;height:auto}.header-label{color:#e7e7e4;font-family:Outfit,Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:.02em;display:flex;align-items:center;gap:10px;white-space:nowrap}.header-dot,.footer-dot{width:7px;height:7px;background:var(--orange);border-radius:50%;display:inline-block;flex:none}
.page-shell{max-width:1220px;margin:auto;padding:48px 34px 72px}.intro{display:flex;justify-content:space-between;align-items:center;min-height:260px;position:relative;overflow:hidden;margin-bottom:35px}.intro-copy{position:relative;z-index:1;max-width:650px;padding-bottom:4px}.eyebrow,.section-kicker,.result-header{font-family:Outfit,Arial,sans-serif;font-size:11px;letter-spacing:.17em;font-weight:700}.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--orange-dark)}.eyebrow-line{width:24px;height:2px;background:var(--orange)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Outfit,Arial,sans-serif}h1{font-size:clamp(39px,5vw,66px);line-height:1.03;letter-spacing:-.045em;font-weight:700;margin:20px 0 17px}h1 span{color:var(--orange-dark)}.intro p{max-width:510px;color:#626b68;font-size:16px;line-height:1.6}
.court-art{width:338px;height:232px;position:relative;flex:none;margin-right:24px;opacity:.95}.court{position:absolute;width:244px;height:150px;left:43px;top:39px;background:#e6e9df;border:8px solid #dfe4d5;border-radius:8px;transform:rotate(-18deg) skew(-5deg);box-shadow:0 22px 30px #25331c18}.court:before{content:"";position:absolute;inset:10px;border:2px solid white;border-radius:2px}.court-net{position:absolute;z-index:2;left:50%;top:9px;bottom:9px;width:2px;background:#fbfcf7;box-shadow:2px 0 0 #bac4b4}.court-midline{position:absolute;top:50%;left:10px;right:10px;height:2px;background:white}.court-service{position:absolute;top:10px;bottom:10px;width:2px;background:white}.court-service-top{left:28%}.court-service-bottom{right:28%}.ball{position:absolute;border-radius:50%;background:var(--orange);box-shadow:0 10px 20px #e4821733}.ball-one{width:21px;height:21px;right:10px;top:27px}.ball-two{width:10px;height:10px;left:16px;bottom:18px;opacity:.5}
.workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:stretch;gap:22px}.panel{background:#fff;border:1px solid #e9eae5;border-radius:18px;padding:30px;box-shadow:0 14px 34px #222c2110}.panel-heading{display:flex;align-items:center;gap:15px}.heading-icon{width:43px;height:43px;border-radius:12px;background:#fff2e1;color:#dc7300;display:grid;place-items:center;font-family:Outfit,Arial,sans-serif;font-size:14px;font-weight:700;flex:none}.section-kicker{color:var(--orange-dark);font-size:10px}h2{font-size:26px;line-height:1.15;letter-spacing:-.025em;margin-top:2px}.panel-description{color:var(--muted);font-size:14px;line-height:1.55;margin:18px 0 26px;max-width:440px}
.player-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(135px,.63fr) auto;gap:10px;align-items:end}.field{min-width:0}.field label{display:block;font-size:12px;font-weight:700;color:#46504d;margin-bottom:8px}.field input,.field select{width:100%;height:48px;border:1px solid #dfe3dc;background:#fafbf8;border-radius:9px;padding:0 13px;color:var(--ink);outline:0;transition:border-color .2s,box-shadow .2s}.field input::placeholder{color:#9ba29e}.field input:focus,.field select:focus{border-color:var(--orange);box-shadow:0 0 0 3px #f28a1126}.button{border:0;border-radius:9px;font-family:Outfit,Arial,sans-serif;font-weight:600;transition:transform .2s,background .2s,box-shadow .2s}.button:not(:disabled):hover{transform:translateY(-2px)}.button:focus-visible,.text-button:focus-visible,.remove-button:focus-visible{outline:3px solid #f8ac54;outline-offset:3px}.button-add{height:48px;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--ink);color:#fff;font-size:14px;white-space:nowrap}.button-add:hover{background:#3b4140}.button-plus{font-family:Arial,sans-serif;font-size:24px;line-height:1;font-weight:400}.message{min-height:18px;margin:9px 0 0;color:#b44c22;font-size:12px;line-height:1.4}.message.success{color:#477354}
.roster-heading{margin:25px 0 13px;display:flex;justify-content:space-between;align-items:center;gap:10px}.roster-title{display:flex;align-items:center;gap:9px}.roster-title h3{font-size:17px}.count-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:#fff0dd;color:#b96000;font-size:11px;font-weight:700}.text-button{border:0;background:transparent;color:#747c78;font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:5px}.text-button:hover{color:var(--orange-dark)}.player-list{min-height:160px;max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fcfcfa;padding:8px}.empty-state{height:142px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#8b9590;text-align:center;font-size:13px}.empty-state strong{color:#4b5550;font-family:Outfit,Arial,sans-serif;font-size:15px}.empty-icon{font-size:26px;color:#e6a053;line-height:1;margin-bottom:5px}.player-entry{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:8px}.player-entry+.player-entry{border-top:1px solid #eff0ec}.player-number{width:26px;height:26px;border-radius:50%;background:#f2f3ef;color:#717b75;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}.player-name{min-width:0;flex:1;font-size:14px;font-weight:700;overflow-wrap:anywhere}.position-tag{font-size:11px;font-weight:700;border-radius:5px;padding:5px 7px;background:#eaf3ea;color:#4f7750;white-space:nowrap}.position-tag.reves{background:#e9eff5;color:#55758b}.position-tag.undefined{background:#f0f1ee;color:#848c86}.remove-button{width:28px;height:28px;border:0;background:transparent;color:#939c96;font-size:20px;line-height:1;display:grid;place-items:center;border-radius:6px}.remove-button:hover{background:#fff0ed;color:#c45038}.roster-footer{font-size:12px;color:#848c86;display:flex;align-items:center;gap:7px;margin-top:15px}
.draw-panel{display:flex;flex-direction:column}.button-generate{width:100%;height:51px;background:var(--orange);color:#1e2522;padding:0 18px;display:flex;justify-content:center;align-items:center;gap:10px;font-size:16px;box-shadow:0 8px 16px #e287142c}.button-generate:hover:not(:disabled){background:#ffa12d;box-shadow:0 10px 20px #e2871440}.button-generate:disabled{background:#ebd5b9;color:#817666;box-shadow:none}.button-arrow{font-size:20px;font-weight:400}.result-area{margin-top:26px;flex:1;display:flex;flex-direction:column}.result-header{display:flex;align-items:center;justify-content:space-between;color:#8b938e;border-bottom:1px solid var(--line);padding-bottom:12px}.sort-count{color:var(--orange-dark)}.teams{flex:1;min-height:162px}.result-empty{height:100%;min-height:162px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;color:#8a948e;font-size:13px;line-height:1.45;padding:20px}.result-empty strong{color:#4c5550;font-family:Outfit,Arial,sans-serif;font-size:16px}.result-ball{width:37px;height:37px;border:3px solid #efd5aa;border-radius:50%;margin-bottom:8px;position:relative}.result-ball:after{content:"";position:absolute;inset:6px;border:2px solid #efd5aa;border-radius:50%}.team-card{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid #edf0e9}.team-number{width:34px;height:34px;border-radius:9px;background:#fff1dd;color:#c96a00;font-family:Outfit,Arial,sans-serif;font-size:14px;font-weight:700;display:grid;place-items:center;flex:none}.team-players{min-width:0;display:flex;flex-direction:column;gap:3px}.team-players strong{font-family:Outfit,Arial,sans-serif;font-size:15px;overflow-wrap:anywhere}.team-players span{font-size:11px;color:#848e88}.button-copy{width:100%;margin-top:20px;height:43px;border:1px solid #d8ddd4;background:#fff;color:#3d4943;font-size:13px}.button-copy:hover{background:#f7f8f4}.button-copy span{font-size:20px;vertical-align:-2px;margin-right:4px}.site-footer{background:#202323;color:#aeb5b1;min-height:82px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px}.site-footer img{width:126px;height:auto}
@media(max-width:900px){.court-art{width:240px;margin-right:0;transform:scale(.8);transform-origin:center right}.workspace{grid-template-columns:1fr}.intro{min-height:240px}}
@media(max-width:600px){.site-header{min-height:72px}.header-inner{padding:16px 20px}.brand img{width:150px}.header-label{font-size:11px}.page-shell{padding:38px 16px 52px}.intro{min-height:0;margin-bottom:32px}.intro-copy{max-width:none}.intro p{font-size:14px}.court-art{display:none}.panel{padding:22px 18px;border-radius:14px}.workspace{gap:16px}.player-form{grid-template-columns:1fr 1fr}.field-name{grid-column:1/-1}.button-add{grid-column:1/-1}.panel-description{margin:15px 0 23px}.roster-heading{margin-top:21px}.site-footer{min-height:72px}}
@media(max-width:380px){.header-label{display:none}.player-form{grid-template-columns:1fr}.field-name,.button-add{grid-column:auto}}

.import-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-12px 0 24px}.import-row>span{font-size:12px;color:#909993}.button-import{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;background:#fff2e1;border:1px solid #f2c88f;color:#af5d00;font-size:13px}.button-import:hover{background:#ffe8c9}.button-import span{font-size:19px;line-height:12px}
.player-name-input{min-width:0;flex:1;height:32px;padding:5px 6px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);font-size:14px;font-weight:700;outline:none}.player-name-input:hover{border-color:#e3e7df;background:#fff}.player-name-input:focus{border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px #f28a1126}.position-select{width:116px;max-width:100%;height:30px;padding:0 7px;border:1px solid transparent;border-radius:6px;background:#eaf3ea;color:#4f7750;font-size:11px;font-weight:700;outline:none}.position-select.reves{background:#e9eff5;color:#55758b}.position-select.undefined{background:#fff0dd;color:#ab650e}.position-select:focus{border-color:var(--orange);box-shadow:0 0 0 3px #f28a1126}
.modal-open{overflow:hidden}.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:#17201c9c;backdrop-filter:blur(3px)}.import-modal{width:min(540px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:#fff;border-radius:18px;padding:29px;box-shadow:0 24px 70px #10171450}.modal-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.modal-heading h2{font-size:26px;margin-top:5px}.modal-close{width:32px;height:32px;flex:none;border:0;border-radius:8px;background:#f3f4f0;color:#656c68;font-size:25px;line-height:1}.modal-close:hover{background:#ffe7df;color:#a74431}.import-modal>p{color:var(--muted);font-size:14px;line-height:1.55;margin:14px 0 22px}.import-modal label{display:block;font-size:12px;font-weight:700;color:#46504d;margin-bottom:8px}.import-modal textarea{display:block;width:100%;min-height:210px;resize:vertical;padding:13px 14px;border:1px solid #dfe3dc;border-radius:10px;background:#fafbf8;color:var(--ink);font-size:14px;line-height:1.6;outline:none}.import-modal textarea::placeholder{color:#9ba39d}.import-modal textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px #f28a1126}.import-error{min-height:19px;color:#b44c22;font-size:12px;line-height:1.4;margin:9px 0 0}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:17px}.button-cancel,.button-confirm{height:44px;padding:0 17px;font-size:14px}.button-cancel{background:#f0f2ee;color:#53605a}.button-cancel:hover{background:#e7ebe5}.button-confirm{background:var(--orange);color:#202323}.button-confirm:hover{background:#ffa12d}
@media(max-width:480px){.player-entry{display:grid;grid-template-columns:26px minmax(0,1fr) 28px;gap:2px 8px}.player-number{grid-column:1;grid-row:1}.player-name-input{grid-column:2;grid-row:1}.position-select{grid-column:2;grid-row:2;justify-self:start}.remove-button{grid-column:3;grid-row:1/span 2}.import-modal{padding:22px 18px}.modal-heading h2{font-size:23px}.modal-actions{display:grid;grid-template-columns:1fr 1fr}.button-cancel,.button-confirm{padding:0 8px}.import-row{margin-top:-10px}}