:root{--navy: #002244;--green: #69be28;--grey: #a5acaf;--paper: #f7f4ec;--ink: #16283a;--line: rgba(0, 34, 68, .14);--card: #ffffff;--red: #d62828;--amber: #f2c230;--radius: 14px;--font-ui: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;--font-field: "Patrick Hand", "Comic Sans MS", cursive;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-ui);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}input,textarea{background:#fff;border:2px solid var(--line);border-radius:10px;padding:6px 10px}input:focus,textarea:focus{outline:none;border-color:var(--green)}h1,h2,h3{margin:0;font-weight:600}.app{height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;background:var(--navy);color:#fff;border-bottom:5px solid var(--green)}.topbar .brand{font-weight:700;font-size:18px;letter-spacing:.5px;display:flex;align-items:center;gap:8px}.topbar .brand .dot{width:14px;height:14px;border-radius:50%;background:var(--green);display:inline-block}.topbar .spacer{flex:1}.topbar input.playname{min-width:150px;max-width:260px;font-weight:600;font-size:16px;background:#ffffff1f;border-color:#ffffff40;color:#fff}.topbar input.playname::placeholder{color:#ffffff8c}.modetabs{display:flex;gap:4px;background:#ffffff1a;padding:3px;border-radius:999px}.modetabs button{border:0;background:transparent;color:#fff;padding:6px 14px;border-radius:999px;font-weight:600}.modetabs button.on{background:var(--green);color:var(--navy)}.iconbtn{border:2px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:10px;padding:5px 10px;font-weight:600;font-size:14px}.iconbtn:hover{background:#ffffff1f}.iconbtn:disabled{opacity:.35;cursor:default}.design{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;padding:12px;min-height:0}.panel{overflow:auto;display:flex;flex-direction:column;gap:12px;min-height:0}.stage{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}.stage .fieldwrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:8px;overflow:hidden}.stage .fieldwrap svg{max-height:100%;height:auto;width:auto;max-width:100%}.stage .fieldwrap svg[data-view=top]{height:100%}@media(max-width:900px){.app{height:auto;min-height:100%}.design{display:flex;flex-direction:column}.stage{order:-1}.stage .fieldwrap{flex:none;height:70vh}.stage .fieldwrap svg,.stage .fieldwrap svg[data-view=top]{height:100%;width:auto;max-width:100%}.panel{overflow:visible}}.card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:10px}.card h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:#0249}.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.row.between{justify-content:space-between}.seg{display:inline-flex;background:#00224412;border-radius:999px;padding:3px;gap:3px}.seg button{border:0;background:transparent;padding:6px 14px;border-radius:999px;font-weight:600;color:var(--navy)}.seg button.on{background:var(--navy);color:#fff}.chip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px 4px 4px;font-weight:600;color:var(--navy)}.chip.on{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy) inset}.chip .swatch,.badge{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:12px;border:2px solid #fff;box-shadow:0 0 0 1.5px #00224440}.chip.small{padding:2px 8px 2px 2px;font-size:13px}.chip.small .swatch{width:20px;height:20px;font-size:10px}.chip.warn{border-color:var(--red)}.chip .dot-red{width:8px;height:8px;border-radius:50%;background:var(--red)}.slots{display:grid;grid-template-columns:1fr;gap:6px}.slot{border:2px solid var(--line);border-radius:12px;padding:8px;background:#fff;display:flex;flex-direction:column;gap:6px;cursor:pointer}.slot.sel{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}.slot.off{opacity:.55}.slot .head{display:flex;align-items:center;gap:8px}.slot .badge{width:30px;height:30px;font-size:13px}.slot input.name{flex:1;min-width:0;padding:4px 8px;font-size:14px}.slot .toggle{border:2px solid var(--line);background:#fff;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:700;color:var(--navy)}.slot .toggle.on{background:var(--green);border-color:var(--green);color:var(--navy)}.palette{display:flex;gap:6px;flex-wrap:wrap}.palette button{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px #0022444d}.palette button.on{box-shadow:0 0 0 3px var(--navy)}.routegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.routegrid button{border:2px solid var(--line);background:#fff;border-radius:10px;padding:4px 2px 2px;display:flex;flex-direction:column;align-items:center;gap:0;font-size:11px;font-weight:600;color:var(--navy)}.routegrid button.on{border-color:var(--navy);background:#69be2826}.routegrid button:hover{border-color:var(--green)}.slider{width:100%;accent-color:var(--green)}.small{font-size:12px;color:#0249}.viewtabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.viewtabs button{border:2px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-weight:600;color:var(--navy)}.viewtabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)}.transport{display:flex;align-items:center;gap:8px}.transport .play{border:0;background:var(--green);color:var(--navy);border-radius:999px;padding:8px 18px;font-weight:700;font-size:15px}.transport .play.stop{background:var(--red);color:#fff}.transport input[type=range]{flex:1;accent-color:var(--navy)}.transport .time{font-variant-numeric:tabular-nums;min-width:44px;text-align:right;font-weight:600}.flags{display:flex;flex-direction:column;gap:6px}.flag{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;font-weight:600;font-size:14px}.flag.red{background:#d628281f;color:#9b1c1c}.flag.amber{background:#f2c23038;color:#7a5b00}.flag .lvl{width:10px;height:10px;border-radius:50%}.flag.red .lvl{background:var(--red)}.flag.amber .lvl{background:var(--amber)}.flag.ok{background:#69be2826;color:#2c6b0c}select.playselect{font-weight:600;font-size:15px;border-radius:10px;padding:6px 10px;max-width:240px;background:#ffffff1f;border:2px solid rgba(255,255,255,.25);color:#fff}select.playselect option{color:var(--ink)}select.playselect.wide{flex:1;min-width:0;max-width:none;background:#fff;color:var(--navy);border-color:var(--line)}input.playname-input{flex:1;font-weight:600;font-size:16px}.drawer-backdrop{position:fixed;inset:0;background:#00224473;z-index:20;display:flex;justify-content:flex-end}.drawer-backdrop.center{align-items:center;justify-content:center;padding:16px}.modal{width:min(380px,100%);background:var(--paper);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px #00000059}.modal h2{color:var(--navy)}.modal input{font-size:20px;padding:10px 12px;letter-spacing:2px}.drawer{width:min(420px,100%);height:100%;background:var(--paper);padding:16px;overflow:auto;display:flex;flex-direction:column;gap:12px}.drawer h2{color:var(--navy)}.playlist{display:flex;flex-direction:column;gap:6px}.playlist .item{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px 10px}.playlist .item.on{border-color:var(--navy)}.playlist .item .nm{flex:1;font-weight:600;cursor:pointer}.playlist .item .meta{font-size:12px;color:#0249}.btn{border:2px solid var(--navy);background:#fff;color:var(--navy);border-radius:999px;padding:6px 14px;font-weight:600}.btn.primary{background:var(--navy);color:#fff}.btn.green{background:var(--green);border-color:var(--green);color:var(--navy)}.btn.danger{border-color:var(--red);color:var(--red)}.btn:disabled{opacity:.4;cursor:default}.btn.big{padding:12px 22px;font-size:18px}textarea.notes{width:100%;min-height:60px;resize:vertical}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%);background:var(--navy);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600;z-index:30;box-shadow:0 6px 20px #00000040}.kid{flex:1;display:grid;grid-template-columns:1fr 360px;gap:12px;padding:12px;min-height:0}@media(max-width:900px){.kid{display:flex;flex-direction:column}.kid .stage .fieldwrap{flex:none;height:58vh}}.kid .stage{min-height:50vh}.kid .who{display:flex;gap:8px;flex-wrap:wrap}.kid .who button{display:flex;align-items:center;gap:8px;border:3px solid transparent;border-radius:14px;padding:8px 12px;background:#fff;font-weight:700;font-size:16px}.kid .who button.on{border-color:var(--navy)}.kid .who .badge{width:34px;height:34px;font-size:14px}.cues{display:flex;flex-direction:column;gap:8px;font-size:20px;line-height:1.3}.cues .intro{font-family:var(--font-field);font-size:24px;color:var(--navy)}.cues .line{padding:6px 10px;border-radius:10px;opacity:.55;transition:all .2s}.cues .line.now{opacity:1;font-weight:700;background:#69be2833}.cues .line.done{opacity:.8}.drillnav{display:flex;align-items:center;gap:10px}.drillnav .name{flex:1;text-align:center;font-family:var(--font-field);font-size:30px;color:var(--navy)}.drillnav .arrow{font-size:26px;padding:4px 16px}.routebar{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:8px 10px;display:flex;flex-direction:column;gap:8px}.routebar.hint{color:#002244b3;font-weight:600;text-align:center;padding:12px}.routebar-head{display:flex;align-items:center;gap:8px}.routebar-head .spacer{flex:1}.routestrip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.routestrip button{flex:0 0 auto;width:74px;border:2px solid var(--line);background:#fff;border-radius:10px;padding:3px 2px 2px;display:flex;flex-direction:column;align-items:center;font-size:11px;font-weight:600;color:var(--navy);line-height:1.1}.routestrip button.on{border-color:var(--navy);background:#69be2826}.routestrip button span{text-align:center}.routebar-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.routebar-tools .depth{display:flex;align-items:center;gap:8px;flex:1;min-width:200px}.routebar-tools .depth .slider{flex:1}.btn.small{padding:4px 10px;font-size:13px}.badge{border:0}.kids{display:flex;flex-direction:column;gap:6px}.kidrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:2px solid var(--line);border-radius:12px;padding:6px 8px;background:#fff}.kidrow input.name{flex:1 1 110px;min-width:90px;padding:4px 8px;font-size:14px;font-weight:600}.kidrow .positions{display:flex;gap:4px}.kidrow .positions .badge{width:26px;height:26px;font-size:11px;cursor:pointer}.kidrow .positions .badge.off{box-shadow:0 0 0 1.5px #0022441f}.kid .who .showall{border-color:var(--green)}.kid .who .showall.on{background:#69be282e;border-color:var(--navy)}.formations{display:grid;grid-template-columns:1fr 1fr;gap:6px}.formations button{border:2px solid var(--line);background:#fff;border-radius:12px;padding:6px 4px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--navy);font-size:13px}.formations button.on{border-color:var(--navy);background:#69be2826}.formations button .small{font-size:11px}.roster{display:flex;flex-direction:column;gap:6px}.roster .slot{cursor:default}.roster .slot .head .small{min-width:44px;text-align:right}.card.details{padding:8px 12px}.card.details summary{cursor:pointer;font-weight:600;color:#002244b3;font-size:13px;text-transform:uppercase;letter-spacing:1px}.card.details[open] summary{margin-bottom:8px}.viewtabs .short{display:none}@media(max-width:1100px){.hide-sm{display:none!important}}@media(max-width:600px){.topbar{padding:6px 8px;gap:6px}.topbar .brand{font-size:16px}.topbar input.playname{order:5;flex:1 1 60%;min-width:0;font-size:15px}.topbar .iconbtn[title^=Undo],.topbar .iconbtn[title^=Redo]{order:6}.modetabs{order:10;width:100%;justify-content:center}.modetabs button{flex:1;padding:6px 4px}.topbar .iconbtn{padding:4px 8px;font-size:13px}.design,.kid{padding:8px;gap:8px}.stage .fieldwrap{height:auto;padding:4px}.stage .fieldwrap svg,.stage .fieldwrap svg[data-view=top]{width:100%;height:auto}.viewtabs{gap:4px}.viewtabs button{padding:5px 9px;font-size:13px}.viewtabs .long{display:none}.viewtabs .short{display:inline}.transport .play{padding:8px 12px;font-size:14px}.routestrip button{width:66px}.formations{grid-template-columns:1fr 1fr 1fr}.formations button svg{width:60px}.kid .stage .fieldwrap{height:auto}}.printcard{display:none}@media print{@page{size:letter portrait;margin:.5in}body{background:#fff}.app>*:not(.printcard){display:none!important}.printcard{display:block!important;color:#000;font-family:var(--font-ui)}.printcard h1{font-size:26px;margin-bottom:4px}.printcard .sub{font-size:13px;color:#444;margin-bottom:8px}.printcard .fieldbox{width:100%;max-height:5.6in;display:flex;justify-content:center}.printcard .fieldbox svg{max-height:5.6in;width:auto}.printcard .cuecols{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:10px;font-size:12px}.printcard .cuecols .who{display:flex;align-items:center;gap:6px;font-weight:700}.printcard .cuecols ul{margin:2px 0 0 22px;padding:0}.printcard .notes{margin-top:8px;font-size:12px;border-top:1px solid #ccc;padding-top:6px}}