:root{color:#eaf2ed;font-synthesis:none;text-rendering:optimizelegibility;--bg:#07130f;--panel:#0d1d17;--panel-2:#11251d;--line:#dfefe51f;--muted:#94a79e;--green:#c5f06c;--green-dark:#192d1d;--orange:#ee754f;--cream:#edf3ef;background:#07130f;font-family:Inter,Segoe UI,Microsoft YaHei UI,PingFang SC,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);min-width:320px}button,input,textarea,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed}.primary,.secondary,.text-button,.icon-button,.play-button{cursor:pointer;border:0;justify-content:center;align-items:center;gap:.5rem;display:inline-flex}.primary{background:var(--green);color:#102014;border-radius:8px;min-height:42px;padding:.65rem 1rem;font-weight:700}.primary:hover{background:#d4fa80}.primary.large{min-height:48px;padding-inline:1.3rem}.secondary{border:1px solid var(--line);color:#dfe9e3;background:#ffffff09;border-radius:7px;min-height:36px;padding:.5rem .75rem}.secondary:hover,.icon-button:hover{background:#ffffff14}.wide{width:100%}.icon-button{border:1px solid var(--line);background:0 0;border-radius:8px;width:38px;height:38px;padding:0}.icon-button.danger{color:#f39377}.text-button{color:#c8d7cf;background:0 0;padding:.5rem}.eyebrow{color:var(--green);letter-spacing:.17em;margin:0 0 .8rem;font-size:.72rem;font-weight:800}.brand-mark{color:#0b1912;background:var(--green);border-radius:50%;place-items:center;width:54px;height:54px;font-size:1.25rem;font-weight:900;display:grid;position:relative}.brand-mark:after{content:"";border:1px solid #47652b;border-radius:50%;position:absolute;inset:5px}.brand-mark span{z-index:1;position:relative}.brand-mark.small{width:40px;height:40px;font-size:1rem}.auth-page{grid-template-columns:minmax(360px,42%) 1fr;min-height:100vh;display:grid}.auth-panel{flex-direction:column;justify-content:center;width:100%;max-width:610px;margin:auto;padding:clamp(2rem,5vw,5.5rem);display:flex}.auth-panel .brand-mark{margin-bottom:2rem}.auth-panel h1{letter-spacing:-.06em;margin:0;font-size:clamp(2.6rem,5vw,5rem);line-height:.97}.auth-intro{color:var(--muted);margin:1.4rem 0 2rem}.role-tabs{border:1px solid var(--line);background:#ffffff0b;border-radius:10px;grid-template-columns:1fr 1fr;margin-bottom:1.3rem;padding:4px;display:grid}.role-tabs button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:7px;justify-content:center;align-items:center;gap:.5rem;padding:.7rem;display:flex}.role-tabs button.active{background:var(--panel-2);color:var(--cream);box-shadow:0 2px 8px #0005}.auth-panel form label,.step-panel label{color:#c6d4cc;gap:.5rem;font-size:.82rem;font-weight:600;display:grid}.auth-panel input,.step-panel input,.step-panel textarea,.editor-name input{width:100%;color:var(--cream);border:1px solid var(--line);background:#0d1e17;border-radius:8px;padding:.78rem .9rem}.auth-panel form .primary{margin-top:1rem}.form-error,.save-error{color:#ffab92;margin:.6rem 0 0;font-size:.86rem}.auth-footnote{color:#62766b;text-align:center;margin:1.4rem 0 0;font-size:.76rem}.auth-court{color:#102014;background:#a5d255;min-height:100vh;position:relative;overflow:hidden}.hero-court-lines{aspect-ratio:1;border:3px solid #29451c40;border-radius:50%;width:min(48vw,720px);position:absolute;top:-12%;right:-10%}.hero-court-lines:before{content:"";border:3px solid #29451c40;border-radius:50%;position:absolute;inset:22%}.hero-court-lines:after{content:"";border:3px solid #29451c40;width:28%;height:60%;position:absolute;top:-20%;left:36%}.hero-player{width:64px;height:64px;color:var(--green);background:#0a1812;border-radius:50%;place-items:center;font-size:1.25rem;font-weight:800;display:grid;position:absolute;box-shadow:0 10px 30px #12230f50}.hero-player.p1{top:25%;left:20%}.hero-player.p2{top:44%;right:20%}.hero-player.p3{top:56%;left:34%}.hero-arrow{fill:none;stroke:#e9653d;stroke-width:7px;stroke-linecap:round;stroke-dasharray:12 11;width:42%;position:absolute;top:24%;left:25%}.auth-court>p{letter-spacing:-.05em;margin:0;font-size:clamp(2rem,4vw,4.6rem);font-weight:500;line-height:.95;position:absolute;bottom:8%;left:8%}.auth-court>p strong{font-weight:900}.library-page{min-height:100vh;padding-bottom:4rem}.library-header,.editor-header,.viewer-header{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#07130feb;justify-content:space-between;align-items:center;gap:1rem;min-height:68px;padding:.7rem clamp(1rem,4vw,4rem);display:flex}.brand-lockup{align-items:center;gap:.7rem;display:flex}.brand-lockup>div:last-child{display:grid}.brand-lockup strong{font-size:1rem}.brand-lockup span{color:var(--muted);font-size:.72rem}.library-header-actions,.header-actions{align-items:center;gap:.55rem;display:flex}.role-badge{color:var(--green);background:#c5f06c17;border:1px solid #c5f06c30;border-radius:99px;padding:.35rem .65rem;font-size:.72rem;font-weight:700}.role-badge.viewer{color:#b8c6ff;background:#8599ef15;border-color:#8599ef30}.library-hero{justify-content:space-between;align-items:end;gap:2rem;max-width:1440px;margin:auto;padding:clamp(2.5rem,7vw,6rem) clamp(1rem,4vw,4rem) 2.6rem;display:flex}.library-hero h1{letter-spacing:-.06em;margin:0;font-size:clamp(2.6rem,6vw,5.5rem);line-height:.9}.library-hero p:last-child{color:var(--muted);margin:1rem 0 0}.library-toolbar{justify-content:space-between;align-items:center;gap:1rem;max-width:1440px;margin:auto;padding:0 clamp(1rem,4vw,4rem) 1.5rem;display:flex}.search-box{border:1px solid var(--line);min-width:min(100%,360px);color:var(--muted);background:#ffffff08;border-radius:8px;align-items:center;gap:.7rem;padding:0 .8rem;display:flex}.search-box input{min-width:0;color:var(--cream);background:0 0;border:0;outline:none;flex:1;padding:.72rem 0}.backup-actions{gap:.5rem;display:flex}.play-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;max-width:1440px;margin:auto;padding:0 clamp(1rem,4vw,4rem);display:grid}.play-card{border:1px solid var(--line);background:var(--panel);border-radius:12px;transition:transform .2s,border-color .2s;overflow:hidden}.play-card:hover{border-color:#c5f06c40;transform:translateY(-3px)}.play-thumbnail{aspect-ratio:16/10;cursor:pointer;color:#fff;background:#8daf4f;border:0;width:100%;padding:0;position:relative;overflow:hidden}.play-thumbnail .court-shell{height:100%}.play-thumbnail .court{object-fit:cover;width:100%;height:100%}.thumbnail-play{opacity:0;background:#07130f55;place-items:center;transition:opacity .2s;display:grid;position:absolute;inset:0}.play-thumbnail:hover .thumbnail-play{opacity:1}.court-badge{background:#07130fbd;border:1px solid #fff2;border-radius:99px;padding:.25rem .5rem;font-size:.7rem;position:absolute;top:.7rem;left:.7rem}.play-card-body{padding:1rem}.play-card-body h2{margin:0 0 .25rem;font-size:1.1rem}.play-card-body p{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.82rem;overflow:hidden}.play-meta{border-top:1px solid var(--line);color:#6f8177;justify-content:space-between;margin-top:1rem;padding-top:.8rem;font-size:.72rem;display:flex}.card-actions{gap:.45rem;margin-top:.8rem;display:flex}.card-actions .secondary{flex:1}.empty-state{text-align:center;justify-items:center;padding:8vh 1rem;display:grid}.empty-state h2{margin:1rem 0 .4rem}.empty-state p{color:var(--muted);margin:0 0 1.2rem}.empty-ball{color:#132015;background:var(--green);border-radius:50%;place-items:center;width:72px;height:72px;font-size:1.6rem;font-weight:900;display:grid;box-shadow:inset 0 0 0 7px #92b84a}.load-error,.save-error{background:#4d231d;border:1px solid #a44836;border-radius:8px;justify-content:space-between;align-items:center;gap:1rem;max-width:1310px;margin:0 auto 1rem;padding:.8rem 1rem;display:flex}.load-error button,.save-error button{color:#ffd0c3;cursor:pointer;background:0 0;border:0;text-decoration:underline}.loading-grid{grid-template-columns:repeat(3,1fr);gap:1rem;max-width:1440px;margin:auto;padding:0 clamp(1rem,4vw,4rem);display:grid}.loading-grid span{background:linear-gradient(100deg,#0d1d17 20%,#162b22 40%,#0d1d17 60%) 0 0/200%;border-radius:12px;height:320px;animation:1.2s infinite shimmer;display:block}.draft-section{background:#c5f06c08;border:1px solid #c5f06c2b;border-radius:10px;max-width:1312px;margin:0 auto 1.5rem;padding:1rem}.draft-heading{justify-content:space-between;align-items:end;gap:1rem;margin-bottom:.8rem;display:flex}.draft-heading .eyebrow{margin-bottom:.25rem}.draft-heading h2{margin:0;font-size:1rem}.draft-heading>span{color:var(--muted);font-size:.72rem}.draft-list{gap:.55rem;display:grid}.draft-card{background:#07130f99;border-radius:8px;align-items:center;gap:.55rem;padding:.65rem;display:flex}.draft-card>div{flex:1;gap:.15rem;min-width:0;display:grid}.draft-card strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.draft-card span{color:var(--muted);font-size:.72rem}@keyframes shimmer{to{background-position:-200% 0}}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#020806c9;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.modal{border:1px solid var(--line);background:#102119;border-radius:14px;width:min(100%,520px);padding:1.5rem;box-shadow:0 30px 90px #0009}.modal h2{margin:0 0 .5rem}.modal>p:not(.eyebrow){color:var(--muted)}.court-options{grid-template-columns:1fr 1fr;gap:.8rem;margin:1.4rem 0;display:grid}.court-options button{border:1px solid var(--line);color:var(--cream);cursor:pointer;background:#ffffff06;border-radius:9px;justify-items:start;gap:.3rem;padding:.8rem;display:grid}.court-options button:hover{border-color:var(--green)}.court-options small{color:var(--muted)}.court-option-graphic{background-color:#8daf4f;background-image:linear-gradient(#ffffff75 1px,#0000 1px),linear-gradient(90deg,#ffffff75 1px,#0000 1px);background-size:100% 100%,50% 100%;border-radius:5px;width:100%;height:90px}.court-option-graphic.full{height:110px}.court-shell{border-radius:8px;min-width:0;overflow:hidden;box-shadow:0 12px 34px #0005}.court{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;max-height:calc(100vh - 210px);display:block}.court-floor{fill:#719940}.court-lines{fill:none;stroke:#f5f9eeb3;stroke-width:.65px}.court-lines .rim{fill:none;stroke:#f2a149;stroke-width:1px}.player circle{fill:#10251a;stroke:var(--green);stroke-width:1.2px}.player.defense .defense-shield{fill:#0000;stroke:#f3eee7;stroke-width:1.25px;stroke-linejoin:round;pointer-events:all}.player text{fill:#eaffc2;pointer-events:none;font-size:4.2px;font-weight:800}.player.defense text{fill:#fff;font-size:3.8px}.player.owner circle{stroke:#ffd36f;stroke-width:1.7px}.player.draggable,.ball.draggable{cursor:grab}.player.draggable:active,.ball.draggable:active{cursor:grabbing}.ball circle{fill:#eb7848;stroke:#512012;stroke-width:.4px}.ball path{fill:none;stroke:#512012;stroke-width:.35px;pointer-events:none}.marker.selectable{cursor:pointer}.tool-run,.tool-pass,.tool-screen{cursor:crosshair}.tool-ball .player.offense{cursor:pointer}.editor-page{grid-template-rows:auto auto 1fr auto;height:100vh;display:grid;overflow:hidden}.editor-header{padding-inline:1rem}.editor-name{flex:1;justify-items:center;min-width:0;display:grid}.editor-name input{text-align:center;background:0 0;border-color:#0000;max-width:380px;padding:.35rem .7rem;font-size:1.05rem;font-weight:700}.editor-name input:hover,.editor-name input:focus{border-color:var(--line);background:#0d1e17}.editor-name span{color:var(--muted);font-size:.67rem}.editor-page>.save-error{border-radius:0;max-width:none;margin:0;padding:.45rem 1rem}.editor-workspace{grid-template-columns:190px minmax(360px,1fr) 260px;min-height:0;display:grid}.tool-panel,.step-panel{background:#0a1712;padding:1rem;overflow-y:auto}.tool-panel{border-right:1px solid var(--line)}.step-panel{border-left:1px solid var(--line);flex-direction:column;gap:1rem;display:flex}.panel-label{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:0 0 .8rem;font-size:.68rem;font-weight:700}.tool-panel>button{color:#adbbb3;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:7px;align-items:center;gap:.7rem;width:100%;padding:.65rem .7rem;display:flex}.tool-panel>button span{width:22px;color:var(--green);text-align:center;font-size:1.15rem}.tool-panel>button.active{color:var(--cream);background:#c5f06c13}.tool-panel>button.danger{color:#f39377}.tool-divider{border-top:1px solid var(--line);margin:.8rem 0}.switch-row{color:#adbbb3;justify-content:space-between;align-items:center;padding:.5rem .2rem;font-size:.82rem;display:flex}.switch-row input{accent-color:var(--green)}.editor-canvas{background:radial-gradient(circle at 50% 30%,#13281f 0,#07130f 65%);place-items:center;min-width:0;min-height:0;padding:2rem;display:grid;position:relative;overflow:auto}.editor-canvas .court-shell{width:min(100%,820px)}.canvas-hint{color:var(--muted);white-space:nowrap;font-size:.75rem;position:absolute;top:.7rem;left:50%;transform:translate(-50%)}.step-panel textarea{resize:vertical;min-height:80px}.duration-input{grid-template-columns:1fr auto;align-items:center;gap:.6rem;display:grid}.duration-input input{accent-color:var(--green);padding:0}.duration-input span{color:var(--green);min-width:3.2rem;font-size:.75rem}.step-nav{justify-content:center;gap:.5rem;margin-top:auto;display:flex}.timeline{border-top:1px solid var(--line);background:#091611;align-items:stretch;gap:1rem;min-height:96px;padding:.7rem 1rem;display:flex}.timeline-scroll{flex:1;gap:.55rem;min-width:0;display:flex;overflow-x:auto}.timeline-step,.add-step{border:1px solid var(--line);min-width:130px;color:var(--cream);cursor:pointer;text-align:left;background:#ffffff06;border-radius:8px;flex:none;grid-template-columns:auto 1fr auto;align-items:center;gap:.45rem;padding:.55rem;display:grid}.timeline-step>span{width:24px;height:24px;color:var(--green);background:#1b3428;border-radius:50%;place-items:center;font-size:.72rem;display:grid}.timeline-step strong{white-space:nowrap;text-overflow:ellipsis;max-width:110px;font-size:.78rem;overflow:hidden}.timeline-step small{color:var(--muted)}.timeline-step.active{border-color:var(--green);background:#c5f06c0c}.add-step{color:var(--muted);border-style:dashed;justify-content:center;display:flex}.delete-step{color:#df856d;cursor:pointer;background:0 0;border:0;align-self:center;align-items:center;gap:.4rem;padding:.6rem;font-size:.75rem;display:flex}.viewer-page{flex-direction:column;min-height:100vh;display:flex}.viewer-header{padding-inline:clamp(.5rem,3vw,2rem)}.viewer-title{text-align:center}.viewer-title span{color:var(--green);text-transform:uppercase;letter-spacing:.14em;font-size:.62rem}.viewer-title h1{margin:.15rem 0 0;font-size:1.05rem}.viewer-layout{flex:1;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);min-height:0;display:grid}.viewer-stage{background:radial-gradient(circle at 45% 30%,#142b21,#07130f 65%);flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-width:0;padding:clamp(1rem,3vw,2.5rem);display:flex}.viewer-stage .court-shell{width:min(100%,900px)}.viewer-notes{border-left:1px solid var(--line);flex-direction:column;justify-content:center;padding:clamp(1.3rem,3vw,2.6rem);display:flex}.viewer-notes h2{letter-spacing:-.04em;margin:0 0 .7rem;font-size:clamp(1.7rem,3vw,2.7rem)}.viewer-notes>p:not(.eyebrow){color:#b4c3bb;white-space:pre-line;line-height:1.7}.playback-controls{justify-content:center;align-items:center;gap:.55rem;display:flex}.play-button{color:#102014;background:var(--green);border-radius:50%;width:48px;height:48px}.step-counter{min-width:50px;color:var(--muted);text-align:center;font-size:.8rem}.playback-controls select{border:1px solid var(--line);color:var(--cream);background:var(--panel);border-radius:7px;padding:.45rem}.step-dots{flex-wrap:wrap;gap:.5rem;margin-top:1.4rem;display:flex}.step-dots button{border:1px solid var(--line);width:34px;height:34px;color:var(--muted);cursor:pointer;background:0 0;border-radius:50%}.step-dots button.active{border-color:var(--green);color:#102014;background:var(--green)}.play-description{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.2rem}.play-description strong{text-transform:uppercase;letter-spacing:.1em;font-size:.76rem}.play-description p{color:var(--muted);font-size:.85rem;line-height:1.6}.toast{z-index:50;color:#102014;background:var(--green);border-radius:8px;padding:.75rem 1rem;font-weight:700;animation:3.2s both toast;position:fixed;bottom:2rem;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #0009}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}10%,85%{opacity:1;transform:translate(-50%)}to{opacity:0}}.app-loading{min-height:100vh;color:var(--muted);place-content:center;justify-items:center;gap:1rem;display:grid}@media (width<=1050px){.play-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-workspace{grid-template-columns:64px minmax(320px,1fr) 230px}.tool-panel{padding:.7rem}.tool-panel .panel-label,.tool-panel>button:not(.danger){font-size:0}.tool-panel>button{justify-content:center}.tool-panel>button span{font-size:1.2rem}.switch-row{justify-items:center;gap:.4rem;font-size:.6rem;display:grid}.tool-panel>button.danger{padding:.5rem;font-size:0}.tool-panel>button.danger svg{width:18px}}@media (width<=760px){.auth-page{display:block}.auth-court{display:none}.auth-panel{min-height:100vh;padding:2rem 1.2rem}.library-hero{flex-direction:column;align-items:start}.library-toolbar{flex-direction:column;align-items:stretch}.search-box{width:100%}.backup-actions .secondary{flex:1}.play-grid,.loading-grid{grid-template-columns:1fr}.loading-grid span:not(:first-child){display:none}.draft-section{margin-inline:1rem}.draft-card .secondary{width:38px;padding:0;font-size:0}.draft-card .secondary svg{width:16px}.editor-page{grid-template-rows:auto auto auto auto;height:auto;min-height:100vh;overflow:visible}.editor-header{z-index:10;flex-wrap:wrap;position:sticky;top:0}.editor-header>.text-button{order:1}.editor-name{order:2;width:calc(100% - 90px)}.header-actions{order:3;justify-content:flex-end;width:100%}.header-actions .primary{flex:1}.editor-workspace{flex-direction:column;display:flex}.tool-panel{z-index:9;border-right:0;border-bottom:1px solid var(--line);order:1;gap:.35rem;padding:.45rem;display:flex;position:sticky;top:119px;overflow-x:auto}.tool-panel>.panel-label,.tool-panel .tool-divider,.tool-panel .switch-row,.tool-panel>button.danger{display:none}.tool-panel>button{flex:0 0 48px;height:42px;padding:0}.editor-canvas{order:2;min-height:55vh;padding:2.3rem .5rem 1rem}.canvas-hint{font-size:.67rem}.editor-canvas .court{max-height:none}.step-panel{border-left:0;border-top:1px solid var(--line);order:3;max-height:none}.timeline{flex-direction:column}.timeline-scroll{min-height:70px}.delete-step{justify-content:center}.viewer-header .text-button{font-size:0}.viewer-header .text-button svg{width:20px;height:20px}.viewer-layout{flex-direction:column;display:flex}.viewer-stage{padding:1rem .5rem}.viewer-stage .court{max-height:62vh}.viewer-notes{border:0;border-top:1px solid var(--line);min-height:260px}.playback-controls{width:100%}.playback-controls .icon-button{width:34px;height:34px}.court-options{grid-template-columns:1fr 1fr}.court-option-graphic{height:60px}.court-option-graphic.full{height:80px}}@media (width<=420px){.library-header{padding-inline:.7rem}.brand-lockup>div:last-child span,.role-badge{display:none}.backup-actions{grid-template-columns:1fr 1fr;display:grid}.viewer-title h1{white-space:nowrap;text-overflow:ellipsis;max-width:180px;overflow:hidden}}@media (orientation:landscape) and (height<=500px){.viewer-page{height:100vh;min-height:0;overflow:hidden}.viewer-header{min-height:56px;padding-block:.35rem}.viewer-layout{min-height:0;overflow:hidden}.viewer-stage{justify-content:flex-start;gap:.35rem;padding:.45rem .75rem;overflow:hidden}.viewer-stage .court{max-height:calc(100vh - 126px)}.viewer-notes{justify-content:flex-start;min-height:0;padding:1rem 1.5rem;overflow-y:auto}.viewer-notes h2{margin-bottom:.35rem;font-size:1.5rem}.viewer-notes>p:not(.eyebrow){margin-block:.25rem;line-height:1.5}.step-dots{margin-top:.6rem}.play-description{margin-top:1rem;padding-top:.8rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}