body{margin:0}img{max-width:100%}[hidden]{display:none!important}
:root{--bg:#0b1433;--panel:#001850;--panel-2:#0f2766;--line:#2a4180;--fg:#eef2fa;--muted:#a3b6cf;--accent:#f9b934;--goalie:#d3d7dc;--red:#d8392b;--blue:#2563d9;--chalk:#fff;--font-display:"Saira Condensed","Arial Narrow","Roboto Condensed",sans-serif;--font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}html,body{height:100%}body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:14px;display:flex;flex-direction:column;overflow:hidden}.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:10px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));background:var(--panel);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px}.brand img{height:46px;width:auto;display:block}.tool-name{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.12em;text-transform:uppercase;line-height:1;color:var(--accent)}.group{display:flex;align-items:center;gap:6px}.label{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:2px}button{font:inherit;font-weight:500;color:var(--fg);background:var(--panel-2);border:1px solid var(--line);border-radius:6px;height:32px;padding:0 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}button:hover{border-color:var(--muted)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}button:disabled{opacity:.4;cursor:default}.seg{display:flex}.seg button{border-radius:0;margin-left:-1px}.seg button:first-child{border-radius:6px 0 0 6px;margin-left:0}.seg button:last-child{border-radius:0 6px 6px 0}.team-red[aria-pressed=true]{background:var(--red);border-color:var(--red);color:var(--chalk)}.team-blue[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:var(--chalk)}.add{width:34px;padding:0;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--chalk);background:var(--team);border-color:var(--team);border-radius:50%}.add:hover{filter:brightness(1.15);border-color:var(--chalk)}.swatch{width:24px;height:24px;padding:0;border-radius:50%;background:var(--c);border:2px solid var(--line)}.swatch[aria-pressed=true]{background:var(--c);border-color:var(--accent);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}.danger:hover{border-color:var(--red);color:#ff8a7e}kbd{font-family:var(--font-body);font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:0 4px;line-height:15px}button[aria-pressed=true] kbd{color:inherit;border-color:currentColor;opacity:.6}.sep{width:1px;align-self:stretch;background:var(--line)}.stage{flex:1;min-height:0;display:grid;place-items:center;padding-block:12px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}#field{position:relative;border-radius:4px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5);touch-action:none;user-select:none;-webkit-user-select:none}#field #bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}#ink{position:absolute;inset:0;width:100%;height:100%}#pieces{position:absolute;inset:0}#field.mode-move #ink{pointer-events:none}#field.mode-draw #pieces{pointer-events:none}#field.mode-draw{cursor:crosshair}#field.mode-draw .ball{pointer-events:auto}.player{position:absolute;width:var(--size);height:var(--size);margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:calc(var(--size) * 0.5);line-height:1;z-index:2;color:var(--chalk);border:calc(var(--size) * 0.07) solid var(--chalk);box-shadow:0 2px 6px rgba(0,0,0,.45);cursor:grab;touch-action:none}.player .tag{display:flex;align-items:baseline;transform:translateY(4%)}.player .n{font-size:.62em;margin-left:.04em;transform:translateY(12%);opacity:.95}.player.red{background:var(--red)}.player.blue{background:var(--blue)}.player.goalie{background:var(--goalie);border-style:double;border-width:calc(var(--size) * 0.12)}.player.goalie.red{color:var(--red);border-color:var(--red)}.player.goalie.blue{color:var(--blue);border-color:var(--blue)}.player.selected{box-shadow:0 0 0 calc(var(--size) * 0.09) var(--accent), 0 2px 6px rgba(0,0,0,0.45)}.player.dragging,.ball.dragging{cursor:grabbing;z-index:5}.ball{position:absolute;width:calc(var(--size) * 1.25);height:calc(var(--size) * 1.25);cursor:grab;touch-action:none;z-index:3;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}.ball svg{width:100%;height:100%;display:block;overflow:visible}.ball.held{width:calc(var(--size) * 2);height:calc(var(--size) * 2);margin:calc(var(--size) * -1.59) 0 0 calc(var(--size) * 0.29);z-index:3}.ball.held.dragging{z-index:5}.ball.loose{width:calc(var(--size) * 0.5);height:calc(var(--size) * 0.5);margin:calc(var(--size) * -0.25) 0 0 calc(var(--size) * -0.25)}.hint{position:absolute;left:10px;bottom:8px;font-size:12px;color:rgba(255,255,255,.75);text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}@media (max-width:700px){.brand{width:100%}.brand img{height:38px}kbd,.hint{display:none}.sep{display:none}}@media (prefers-reduced-motion:no-preference){button{transition:background-color .12s,border-color .12s}}.stage{padding:6px}.rail{display:flex;flex-direction:column;gap:14px;padding:12px 10px;background:color-mix(in srgb,var(--panel) 86%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:auto;scrollbar-width:thin;z-index:10}#field .rail{position:absolute;top:0;bottom:0;width:clamp(104px, 14%, 150px)}#field #railL{left:0;border-right:1px solid var(--line)}#field #railR{right:0;border-left:1px solid var(--line)}.rail .brand img{width:100%;height:auto}.rail .group{flex-direction:column;align-items:stretch;gap:6px}.rail .group.push{margin-top:auto}.rail .label{text-align:center;margin:0}.rail button{justify-content:center;padding:0 6px;font-size:13px;height:30px}.rail .seg{flex-direction:column}.rail .seg button{border-radius:0;margin:-1px 0 0}.rail .seg button:first-child{border-radius:6px 6px 0 0;margin-top:0}.rail .seg button:last-child{border-radius:0 0 6px 6px}.rail .adds{display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-items:center}.rail .add{width:36px;height:36px;padding:0;font-size:19px}.rail .swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;justify-items:center}.rail .swatch{height:24px}.hint{left:50%;transform:translateX(-50%);white-space:nowrap}body.compact{overflow:auto}body.compact .rail{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;padding-block:10px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));background:var(--panel)}body.compact #railL{border-bottom:1px solid var(--line)}body.compact #railR{border-top:1px solid var(--line)}body.compact .stage{flex:0 0 auto}body.compact .rail .brand{width:100%}body.compact .rail .brand img{width:auto;height:34px}body.compact .rail .group{flex-direction:row;align-items:center}body.compact .rail .group.push{margin-top:0}body.compact .rail .seg{flex-direction:row}body.compact .rail .seg button{margin:0 0 0 -1px;border-radius:0}body.compact .rail .seg button:first-child{border-radius:6px 0 0 6px;margin-left:0}body.compact .rail .seg button:last-child{border-radius:0 6px 6px 0}body.compact .rail .adds,body.compact .rail .swatches{display:flex}body.compact .hint{display:none}