:root{
 --bg:#1b1f25;--panel:#262b33;--panel-2:#2e343d;--line:#3a424d;--txt:#e9ecf1;--muted:#a0a9b4;
 --acc:#2a7fff;--acc-hover:#1f6fe8;--danger:#ff8a80;--stage:#14171b;--ball:#e8792b;
 --r:6px;--control:34px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--txt);-webkit-text-size-adjust:100%}
a{color:#86b6ff}
a:hover{color:#a9ccff}
[hidden]{display:none!important}
h1,h2{line-height:1.25}

input[type=text],input[type=password],input[type=search],select,textarea{background:#14171b;color:var(--txt);border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;font:inherit;font-size:14px}
input[type=text],input[type=password],input[type=search],select{height:var(--control)}
textarea{display:block}
input::placeholder,textarea::placeholder{color:#7d8691}
input:hover,select:hover,textarea:hover{border-color:#4e5866}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--control);background:var(--panel-2);color:var(--txt);border:1px solid var(--line);border-radius:var(--r);padding:5px 12px;font:inherit;font-size:14px;line-height:1.2;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background-color .12s,border-color .12s}
button:hover,.btn:hover{background:#3a424d;border-color:#4e5866;color:var(--txt)}
button:active,.btn:active{background:#323943}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
button.on{background:var(--acc);border-color:var(--acc);color:#fff}
button.primary,.btn.primary,#dlgo{background:var(--acc);border-color:var(--acc);color:#fff}
button.primary:hover,.btn.primary:hover,#dlgo:hover{background:var(--acc-hover);border-color:var(--acc-hover);color:#fff}
button.danger{background:transparent;color:var(--danger)}
button.danger:hover{background:rgba(255,138,128,.13);border-color:rgba(255,138,128,.35);color:var(--danger)}
button:disabled{opacity:.4;cursor:default}
button:disabled:hover{background:var(--panel-2);border-color:var(--line)}

.spacer{flex:1}
.hint{color:var(--muted);font-size:13px}
.right{float:right}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;letter-spacing:.2px;color:var(--txt);text-decoration:none;white-space:nowrap}
.brand::before{content:"";width:16px;height:16px;background:url(/favicon.svg) center/contain no-repeat}
.brand:hover{color:var(--txt)}
.back{font-weight:600;color:var(--txt);text-decoration:none;white-space:nowrap;padding:6px 4px 6px 0}
.back:hover{color:#a9ccff}
.toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);background:#0d0f12;color:#fff;border:1px solid var(--line);padding:9px 15px;border-radius:8px;z-index:60;max-width:90vw;box-shadow:0 6px 20px rgba(0,0,0,.45)}
dialog{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:18px;min-width:300px;max-width:min(90vw,30rem);box-shadow:0 12px 40px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(0,0,0,.55)}
#dlgt{margin-bottom:12px;font-weight:600}
#dlgi{width:100%;display:block;margin-bottom:14px}
.dlgb{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.gone{max-width:30rem;margin:4rem auto;padding:0 1rem;text-align:center;font-size:16px}

.chip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:18px;white-space:nowrap;background:#39414c;color:#d5dae1}
.chip[data-cat="Offense"]{background:#1d3757;color:#94c2ff}
.chip[data-cat="Defense"]{background:#4b2522;color:#ffa79e}
.chip[data-cat="Inbound"]{background:#1b3f30;color:#7fdcae}
.chip[data-cat="Press Break"]{background:#46351a;color:#f4c766}
.chip[data-cat="Drill"]{background:#352950;color:#c8adff}

/* full-screen app layout: editor and play viewer */
body.app{display:flex;flex-direction:column}
body.app header,body.app footer{display:flex;gap:8px;align-items:center;padding:10px 12px;background:var(--panel);flex-wrap:wrap}
body.app header{border-bottom:1px solid var(--line)}
body.app footer{border-top:1px solid var(--line)}
body.app header input[type=text]{flex:0 1 340px;min-width:200px;font-weight:600}
body.app main{flex:1;display:flex;min-height:0}
.heading{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.vtitle{font-size:18px;font-weight:700;overflow-wrap:anywhere}
.status{color:var(--muted);font-size:13px;white-space:nowrap}
.status.failed,.status.conflict,.status.invalid{color:var(--danger);font-weight:600}
.credit{color:var(--muted);font-size:13px}
header>.credit{flex:0 0 100%;order:10;margin-top:-2px}
.banner{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:#5a2a26;border-bottom:1px solid var(--line)}
.sep{width:1px;align-self:stretch;margin:4px 2px;background:var(--line)}
body.app footer .sep{display:none}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.more{position:relative}
.more summary{display:inline-flex;align-items:center;gap:6px;min-height:var(--control);padding:5px 12px;font-size:14px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;list-style:none;user-select:none;white-space:nowrap}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";border:4px solid transparent;border-top-color:currentColor;border-bottom:0}
.more summary:hover{background:#3a424d}
.more .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;display:flex;flex-direction:column;gap:4px;min-width:190px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.more .menu button{justify-content:flex-start;background:none;border-color:transparent;width:100%}
.more .menu button.danger:hover{background:rgba(255,138,128,.13)}
.more .menu button:hover{background:#3a424d}
.more .menu .rule{height:1px;margin:3px 4px;background:var(--line)}

.tools{display:grid;grid-template-columns:repeat(2,76px);grid-auto-rows:min-content;gap:6px;padding:12px;background:var(--panel);border-right:1px solid var(--line);overflow:auto}
.tools button{justify-content:flex-start;padding:5px 9px}
.tools .sep{grid-column:1/-1;width:auto;height:1px;margin:4px 0;align-self:auto}
.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:12px;min-width:0;min-height:0;background:var(--stage)}
svg#board{max-width:100%;max-height:100%;width:100%;height:100%;touch-action:none;user-select:none;overflow:hidden;border-radius:4px}
.panel{width:280px;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.tree{border-top:1px solid var(--line);padding:12px;overflow:auto}
.tree.grow{flex:1;border-top:0;min-height:0}
.tree>.hint{margin-bottom:4px}
.tree .tr{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.tree .tr.off{color:var(--muted)}
.tree .tr.opt{margin-top:3px}
.tree .tr.on{color:#fff}
.rails{display:flex;align-self:stretch;flex:none;margin:-4px 0}
.rails:empty{display:none}
.rail{position:relative;width:13px;border-left:1px solid #4a535f}
.rail.lit{border-left:2px solid #6ea5f7}
.rail.start::after{content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--panel);border:1px solid #6b7582}
.rail.start.lit::after{left:-4.5px;background:#6ea5f7;border-color:#6ea5f7}
.tree .tr:hover{background:#343b45}.tree .tr.on{background:#2f4a73}
.tree .tr .nm{flex:1;overflow:hidden;text-overflow:ellipsis}.tree .tr .fork{color:#f5b400;font-size:11px}
.tree .tr button{min-height:0;padding:0 6px;line-height:18px;font-size:12px;visibility:hidden}.tree .tr:hover button{visibility:visible}
.notes{border-top:1px solid var(--line);padding:12px}
.notes .hint{display:block;margin-bottom:4px}
.notes textarea{width:100%;height:110px;resize:vertical}
.notes .text{white-space:pre-wrap;max-height:34vh;overflow:auto;font-size:14px}
.timing{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px;align-items:center;border-top:1px solid var(--line);padding:12px}
.timing .secs{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:13px}
.timing input{width:100%;min-width:0;height:var(--control);background:#14171b;color:var(--txt);border:1px solid var(--line);border-radius:var(--r);padding:4px 6px;font:inherit;font-size:14px}
.timing input:disabled{opacity:.45}
.transport{display:flex;gap:8px;align-items:center;flex:none;padding:8px 12px;background:var(--panel);border-top:1px solid var(--line)}
.scrub{position:relative;flex:1;min-width:0;display:flex;align-items:center;height:var(--control)}
#scrub{position:relative;width:100%;margin:0;accent-color:var(--acc);cursor:pointer}
#scrub:disabled{cursor:default;opacity:.5}
#ticks{position:absolute;inset:0;pointer-events:none}
.tick{position:absolute;top:50%;width:2px;height:14px;margin:-7px 0 0 -1px;border-radius:1px;background:#65707d}
.tick.on{background:#86b6ff}
.clock{flex:none;min-width:76px;text-align:right;font-variant-numeric:tabular-nums}
.frames{display:flex;gap:8px;flex:none;overflow-x:auto;padding:8px 12px;background:var(--panel);border-top:1px solid var(--line);-webkit-overflow-scrolling:touch}
.frames .thumb{position:relative;flex:none;display:flex;flex-direction:column;align-items:stretch;gap:4px;width:112px;padding:4px;white-space:normal}
.thumb svg{display:block;width:100%;height:68px;border-radius:3px;background:#fff}
.thumb .cap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;text-align:left}
.thumb[data-options]::after{content:attr(data-options);position:absolute;top:7px;right:7px;padding:0 5px;border-radius:999px;background:#5c4600;color:#ffd97a;font-size:10px;line-height:15px}
.thumb .court{fill:none;stroke:#9aa2ad;stroke-width:.5}
.th-line{fill:none;stroke:#111;stroke-linecap:round;stroke-linejoin:round}
.th-off{fill:#fff;stroke:#111}
.th-ball{fill:#e8792b}
.th-def{fill:none;stroke:#c0392b;stroke-linecap:round}
.th-cone{fill:#f5b400}
.framemenu{position:fixed;z-index:50;display:flex;flex-direction:column;gap:4px;min-width:130px;max-width:calc(100vw - 16px);overflow:auto;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.framemenu button{justify-content:flex-start;text-align:left;white-space:normal;border:0;background:none;padding:7px 10px}
.framemenu button:hover,.framemenu button:focus-visible{background:#1b3d70}
.framemenu button[aria-checked="true"]{font-weight:700;color:#86b6ff}
#play{min-width:68px;font-weight:600}

@media(max-width:800px){
 body.app{height:auto;min-height:100%}
 body.app main{display:contents}
 .tools{order:1;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch}
 .tools button{width:auto;flex:none}.tools .sep{display:none}
 .stage{order:2;padding:12px}
 svg#board{height:auto;max-height:62vh}
 .transport{order:3}
 .frames{order:4}
 body.app footer{order:5}
 body.app footer #hint,body.app footer .spacer{display:none}
 .clock{display:none}
 .panel{order:6;width:auto;border-left:0;border-top:1px solid var(--line)}
 .panel .notes{order:-1;border-top:0;border-bottom:1px solid var(--line)}
 .panel .notes .text{max-height:none;overflow:visible}
 .panel .tree{overflow:visible;border-top:0}
 body.app header input[type=text]{min-width:0;flex:1 1 140px}
 body.app header .actions{flex:1 1 100%}
}
@media(pointer:coarse){
 :root{--control:40px}
 .tree .tr{padding:7px 8px}
 .tree .tr button{visibility:visible}
}

/* scrolling pages: library, my plays, playlists */
body.page{min-height:100%}
#site{position:sticky;top:0;z-index:20;display:flex;gap:12px;align-items:center;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
#site a#myPlays{font-weight:600;color:var(--txt);text-decoration:none;white-space:nowrap}
#site a#myPlays:hover{color:#a9ccff}
.who{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.content{max-width:62rem;margin:0 auto;padding:20px 16px 48px}
.content h1{font-size:26px;margin:0 0 4px}
.content h2{font-size:18px;margin:0}
.content>.hint{margin:4px 0 10px;font-size:14px}
.content h2.section{margin-top:32px}
.section{margin-top:32px}
.section-head{margin-bottom:10px}
.page-head{margin-bottom:14px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 8px}
.filters input{flex:1 1 200px;min-width:0}
.count{margin:0 0 10px}
.cards{display:grid;gap:8px;list-style:none;padding:0;margin:0}
.cards.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,26rem),1fr))}
.card{position:relative;display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;transition:background-color .12s,border-color .12s}
.card:has(>.main a.title):hover{background:var(--panel-2);border-color:#4e5866}
.card .main{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.card a.title{font-weight:600;color:var(--txt);text-decoration:none}
.card a.title::after{content:"";position:absolute;inset:0;border-radius:8px}
.card a.title:focus-visible{outline:0}
.card a.title:focus-visible::after{outline:2px solid var(--acc);outline-offset:1px}
.card button,.card .credit a,.card input{position:relative;z-index:1}
.card small{color:var(--muted);display:block;margin-top:3px;font-size:13px}
.meta{display:flex!important;gap:8px;align-items:center;flex-wrap:wrap}
.empty{color:var(--muted);padding:18px;border:1px dashed var(--line);border-radius:8px;text-align:center}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.linkbox{flex:1 1 240px;min-width:0}
.error{color:var(--danger);min-height:1.4em;margin:8px 0 0}
.playlist .details{flex-basis:100%;display:flex;flex-direction:column;gap:10px;padding-top:10px;border-top:1px solid var(--line);min-width:0}
.entries{display:flex;flex-direction:column;gap:4px}
.entry{padding:3px 0}
.entry .spacer{min-width:120px;overflow-wrap:anywhere}
.lockstate{margin:0}
#password{flex:1 1 200px;min-width:0}
.gate{max-width:28rem;margin:6vh auto 0;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.content .gate h1{font-size:20px;margin-bottom:6px}
.gate .hint{margin:0 0 14px}
@media(max-width:600px){
 .who{display:none}
 .content h1{font-size:23px}
 .card .actions{flex:1 1 100%}
 .card .actions .add{flex:1}
}