:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--font-xs:.65rem;--font-sm:.75rem;--font-md:.875rem;--border-control:#374151;--border-separator:#1f324b;--border-panel:#294666;--border-selection:#1f4162;--border-accent:#365b80;--radius-control:8px;--radius-panel:12px;--radius-pill:999px;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{color:#e5e7eb;background:#0b1220;margin:0;overflow:hidden}button,input{font:inherit}button{color:#e5e7eb;border:1px solid var(--border-control);border-radius:var(--radius-control);cursor:pointer;background:#1f2937;padding:.5rem .75rem}button:hover{background:#273447}button:disabled{opacity:.5;cursor:not-allowed}input[type=text],input[type=file],input:not([type]){color:#e5e7eb;border:1px solid var(--border-control);border-radius:var(--radius-control);background:#111827;padding:.45rem .6rem}.app-shell{flex-direction:column;height:100dvh;min-height:0;display:flex;overflow:hidden}.home{border:1px solid var(--border-control);border-radius:var(--radius-panel);background:#111827;flex-direction:column;gap:.9rem;max-width:460px;margin:5rem auto;padding:1.5rem;display:flex}.home h1{margin:0}.home label,.meta label{font-size:var(--font-md);flex-direction:column;gap:.35rem;display:flex}.open-existing{grid-template-columns:1fr auto;align-items:end;gap:.5rem;display:grid}.hint{color:#9ca3af;font-size:var(--font-md)}.error{color:#fca5a5}.planner-topbar{border-bottom:1px solid var(--border-separator);background:linear-gradient(90deg,#071528,#061426 70%);grid-template-columns:auto minmax(8rem,1fr) auto;align-items:center;gap:1rem;padding:.6rem .75rem;display:grid}.topbar-quick-item{min-height:2rem;font-size:var(--font-sm);flex:none;align-items:center;gap:.3rem;padding:.15rem .4rem;display:inline-flex;position:relative}.topbar-quick-item img{object-fit:contain;width:1.5rem;height:1.5rem}.topbar-quick-item b{color:#fbbf24}.brand{align-items:center;gap:.6rem;display:flex}.brand-logo{border-radius:var(--radius-control);background:#0f2745;place-items:center;width:2rem;height:2rem;display:grid}.brand p{color:#8ba1b9;font-size:var(--font-sm);margin:0}.title-field input{background:#0a1b31;border-color:#1e3652;width:100%}.top-actions{justify-content:flex-end;align-items:center;gap:.3rem;min-width:0;display:flex}.top-actions .save{background:#059669;border-color:#10b981}.icon-button{flex:none;place-items:center;width:2.45rem;height:2.45rem;padding:0;font-size:1.3rem;line-height:1;display:inline-grid}.file-action{cursor:pointer;position:relative}.file-action input{opacity:0;width:1px;height:1px;position:absolute;overflow:hidden}.toolbar-divider{border-left:1px solid var(--border-panel);flex:none;height:1.5rem;margin:0 .2rem}.zoom-level{text-align:center;color:#cbd5e1;min-width:3rem;font-size:var(--font-md)}.top-actions .share-url{min-width:0;max-width:min(19vw,15rem);font-size:var(--font-sm);padding:.4rem .5rem}.status-pill{display:none}.planner-body{flex:1;grid-template-columns:1fr 290px;min-height:0;display:grid;overflow:hidden}.canvas-tool.active{background:#0b2d4f;border-color:#60a5fa}.viewport{touch-action:none;background:#020a14;min-height:0;position:relative}.viewport.calibration-mode{background:linear-gradient(135deg,#60a5fa14,#0000 35%),#101c2a}.calibration-help{z-index:2;border-radius:var(--radius-pill);color:#d6e8f7;max-width:calc(100% - 2rem);font-size:var(--font-md);text-align:center;pointer-events:none;background:#031122e0;border:1px solid #365b80;padding:.45rem .75rem;position:absolute;top:.75rem;left:50%;transform:translate(-50%)}.scene{transform-origin:50%;-webkit-user-select:none;user-select:none;position:absolute;top:50%;left:50%}.base-image{pointer-events:none;object-fit:contain;width:100%;height:100%;display:block}.overlay{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.overlay-shape{cursor:pointer;pointer-events:auto}.overlay-shape line,.overlay-shape circle,.overlay-shape text,.overlay-shape polyline,.overlay-shape image{pointer-events:auto}.overlay-shape.selected line,.overlay-shape.selected circle{filter:drop-shadow(0 0 5px #ffffffb3)}.grid-overlay{pointer-events:none}.grid-border-fill{fill:#5f7d4d2e;stroke:#add385a6;stroke-width:3px}.grid-village-fill{fill:#1f682405}.grid-lines line{stroke:#d6efce59;stroke-width:1px}.grid-village-boundary{fill:none;stroke:#ffffffe6;stroke-width:2px}.grid-handle{pointer-events:auto;cursor:grab;fill:#f8fafc;stroke:#2563eb;stroke-width:4px}.grid-handle:active{cursor:grabbing}.handle{fill:#f8fafc;stroke:#111827;stroke-width:2px;cursor:grab}.panel-block{border-bottom:1px solid var(--border-separator);margin-bottom:.85rem;padding-bottom:.75rem}.panel-block h4{margin:0 0 .45rem}.catalog-group>summary{cursor:pointer;padding:.25rem 0;font-weight:700}.catalog-subgroup{margin-top:.55rem}.catalog-subgroup>summary{cursor:pointer;color:#a9bfd5;font-size:var(--font-sm);padding:.2rem 0}.chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;display:grid}.chips span{border:1px solid var(--border-separator);border-radius:var(--radius-control);text-align:center;background:#07213d;padding:.35rem .5rem}.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;display:grid}.palette-item{border-color:var(--border-selection);min-width:0;font-size:var(--font-xs);cursor:grab;background:#07213d;justify-items:center;gap:.15rem;padding:.25rem;line-height:1.1;display:grid}.palette-item:active{cursor:grabbing}.palette-item:hover{background:#0b2d4f;border-color:#60a5fa}.palette-item.touch-selected{background:#064e3b;border-color:#34d399;box-shadow:0 0 0 2px #34d39940}.palette-item img{object-fit:contain;width:42px;height:42px}.palette-item span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.placement-shape image{pointer-events:none}.projectile-pivot{pointer-events:auto;fill:#f8fafc;stroke:#f59e0b;stroke-width:3px;cursor:grab}.spell-center-point{pointer-events:none;fill:#111827;fill-opacity:.8;stroke:#520a02;stroke-width:1px}.spell-center-core{pointer-events:none;fill:#f5220b;stroke:#111827;stroke-width:1px}.overlay-options{gap:.35rem;display:grid}.overlay-options p{color:#c4d4e4;margin:0}.overlay-options label{align-items:center;gap:.45rem;display:flex}.path-colors{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.path-color-swatch{background:var(--swatch-color);border:2px solid #ffffff59;border-radius:50%;width:24px;height:24px;padding:0}.path-color-swatch.active{outline-offset:2px;outline:2px solid #fff}.selected-placement{border-radius:var(--radius-control);background:#07213d;border:1px solid #1f4162;gap:.35rem;padding:.45rem;display:grid}.selected-placement label{gap:.25rem;display:grid}.count-control{grid-template-columns:2rem 1fr 2rem;gap:.25rem;display:grid}.count-control button{padding:.2rem}.count-control input{text-align:center;min-width:0}.movement-path-controls{flex-wrap:wrap;gap:.35rem;display:flex}.movement-path-controls button{font-size:var(--font-sm);padding:.35rem .5rem}.movement-path-step{fill:#f8fafc;stroke:#111827;stroke-width:3px}.placement-count circle{fill:#f8fafc;stroke:#111827;stroke-width:2px}.placement-count text{fill:#111827;font-size:var(--font-md);pointer-events:none;font-weight:800}.replace-image{flex-direction:column;gap:.4rem;display:flex}.planner-footer{border-top:1px solid var(--border-separator);background:#051427;grid-template-columns:1fr auto auto;align-items:center;gap:.75rem;padding:.65rem .75rem;display:grid}.share-url{border:1px solid var(--border-separator);border-radius:var(--radius-control);white-space:nowrap;text-overflow:ellipsis;background:#07213d;padding:.45rem .6rem;overflow:hidden}.footer-controls{align-items:center;gap:.45rem;display:flex}.status-pill{border:1px solid var(--border-separator);border-radius:var(--radius-pill);font-size:var(--font-md);color:#9fb3c8;padding:.35rem .65rem}.message{text-align:center;margin:4rem auto}@media (width<=1200px){.planner-footer{grid-template-columns:1fr}}.planner-topbar{gap:.65rem;min-height:3.5rem;padding:.35rem .65rem;display:flex}.planner-topbar .brand{flex:none}.planner-topbar .brand strong{white-space:nowrap}.planner-topbar .brand p{text-overflow:ellipsis;white-space:nowrap;max-width:10rem;overflow:hidden}.planner-topbar .title-field{flex:10rem;min-width:6rem;max-width:24rem}.planner-topbar .top-actions{flex:none;gap:.2rem}.planner-topbar .icon-button{width:2.4rem;min-width:40px;height:2.4rem;min-height:40px}.toolbar-more{position:relative}.toolbar-more>summary{cursor:pointer;list-style:none}.toolbar-more>summary::-webkit-details-marker{display:none}.editor-toolbar .toolbar-more>summary{width:2.4rem;min-width:40px;height:2.4rem;min-height:40px}.toolbar-menu{z-index:10;border:1px solid var(--border-panel);border-radius:var(--radius-panel);background:#071528;gap:.35rem;min-width:12rem;padding:.5rem;display:grid;position:absolute;top:calc(100% + .35rem);right:0;box-shadow:0 10px 30px #00000073}.toolbar-menu button,.menu-file-action{border-radius:var(--radius-control);color:#e5e7eb;text-align:left;cursor:pointer;align-items:center;min-height:44px;padding:.55rem .7rem;display:flex}.menu-file-action input{display:none}.menu-actions{gap:.25rem;margin-left:auto;display:flex}.editor-toolbar{z-index:4;border-bottom:1px solid var(--border-separator);background:#071528;flex-direction:column;gap:.55rem;min-height:3.25rem;padding:.25rem .65rem;display:flex;position:relative}.editor-toolbar .canvas-tools{border:0;border-right:1px solid var(--border-panel);box-shadow:none;pointer-events:auto;background:0 0;border-radius:0;flex:none;gap:.25rem;padding:0;display:flex;position:static}.editor-toolbar .canvas-tool{justify-content:center;align-items:center;gap:.35rem;min-width:5rem;min-height:40px;padding:.3rem .55rem;display:flex}.editor-toolbar .canvas-tool span{font-size:1.2rem;line-height:1}.editor-toolbar .canvas-tool small{font-size:var(--font-sm)}.quick-picks-stack{flex:auto;gap:.2rem;min-width:0;display:grid;overflow:hidden}.quick-pick-row{align-items:center;gap:.45rem;min-width:0;display:flex}.quick-pick-row>strong{color:#9fb3c8;width:4.1rem;font-size:var(--font-sm);white-space:nowrap;flex:none;padding:0 .25rem}.quick-pick-items{scrollbar-width:thin;flex:auto;align-items:center;gap:.3rem;min-width:0;display:flex;overflow-x:auto}.topbar-quick-item{min-height:44px;font-size:var(--font-sm);padding:.2rem .4rem}.army-quick-item{background:#073d37;border-color:#247b67}.army-quick-item .army-count{color:#042f2e;width:1.35rem;height:1.35rem;font-size:var(--font-sm);background:#10b981;border-radius:50%;place-items:center;line-height:1;display:grid}.planner-body{flex:auto;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);min-width:0;min-height:0;display:grid;position:relative;overflow:hidden}.planner-body>.viewport{grid-area:1/1;width:100%;min-width:0;height:100%;min-height:0}.collection-drawer{z-index:5;border-left:1px solid var(--border-panel);visibility:hidden;background:#031122fa;flex-direction:column;width:min(340px,88vw);padding:.8rem;transition:transform .16s,visibility .16s;display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(105%);box-shadow:-12px 0 32px #00000059}.collection-drawer.open{visibility:visible;transform:translate(0)}.collection-heading{border-bottom:1px solid var(--border-separator);justify-content:space-between;align-items:center;gap:.5rem;padding-bottom:.65rem;display:flex}.collection-heading>div{gap:.15rem;display:grid}.collection-heading span{color:#9fb3c8;font-size:var(--font-sm)}.collection-search{padding:.65rem 0;display:block}@media (pointer:coarse){.collection-search{display:none}}.collection-search input{width:100%;min-height:44px}.collection-list{overscroll-behavior:contain;min-height:0;overflow-y:auto}.catalog-category{border-bottom:1px solid var(--border-separator);padding:.15rem 0}.catalog-category>summary{color:#e5e7eb;cursor:pointer;align-items:center;min-height:44px;padding:.35rem .2rem;font-weight:700;display:flex}.catalog-subgroup>summary{cursor:pointer;align-items:center;min-height:40px;padding:.25rem .35rem;display:flex}.collection-drawer .palette-grid{grid-template-columns:repeat(auto-fill,minmax(4.2rem,1fr));gap:.4rem;padding:.2rem 0 .55rem}.collection-drawer .palette-item{min-height:4.5rem;font-size:var(--font-xs);padding:.35rem .2rem}.collection-drawer .palette-item img{width:2.75rem;height:2.75rem}.palette-item[hidden],.catalog-category[hidden]{display:none!important}.canvas-grid-tools{z-index:3;right:max(.75rem, env(safe-area-inset-right));bottom:max(.75rem, env(safe-area-inset-bottom));background:0 0;border:0;width:auto;padding:0;position:absolute}.canvas-grid-tools button{border-color:var(--border-accent);background:#031122e6;align-content:center;justify-items:center;gap:.1rem;min-width:76px;min-height:56px;display:grid}.canvas-collection-toggle{z-index:3;right:max(.75rem, env(safe-area-inset-right));top:calc(max(.75rem, env(safe-area-inset-top)));border-color:var(--border-accent);background:#031122e6;align-content:center;justify-items:center;gap:.1rem;min-width:76px;min-height:56px;display:grid;position:absolute}.canvas-collection-toggle>span{font-size:1.2rem}.canvas-collection-toggle>small{font-size:var(--font-xs)}.canvas-grid-tools button span{font-size:1.2rem}.canvas-grid-tools button small{font-size:var(--font-xs)}.selection-inspector{z-index:4;left:max(.75rem, env(safe-area-inset-left));bottom:max(.75rem, env(safe-area-inset-bottom));border:1px solid var(--border-panel);border-radius:var(--radius-panel);background:#031122f0;gap:.55rem;width:min(300px,100% - 1.5rem);max-height:min(45%,280px);padding:.7rem;display:grid;position:absolute;overflow-y:auto;box-shadow:0 8px 24px #0000004d}.inspector-heading{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.inspector-heading>strong{min-width:0;font-size:var(--font-sm);text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.inspector-actions{align-items:center;gap:.2rem;display:flex}.inspector-action{min-width:36px;min-height:36px;padding:0}.selection-inspector.compact{align-items:center;width:auto;max-width:calc(100% - 1.5rem);max-height:none;padding:.2rem .35rem;display:flex;overflow:visible}.selection-inspector.compact .inspector-heading{gap:.5rem}.inspector-dismiss{min-width:44px;min-height:44px;padding:0;font-size:1.4rem}.selection-inspector .path-colors{align-items:center;gap:.65rem;display:flex}.selection-inspector .path-color-swatch{flex:0 0 28px;width:28px;min-width:28px;height:28px;min-height:28px;padding:0}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=1200px){.planner-topbar{grid-template-columns:none;display:flex}.top-actions{grid-column:auto;justify-content:flex-end}.planner-body{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}}@media (width<=760px){.planner-topbar{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:.35rem .5rem;padding:.35rem .5rem;display:grid}.planner-topbar .brand{min-width:0}.planner-topbar .brand p{max-width:42vw}.planner-topbar .title-field{grid-area:1/2;max-width:none}.planner-topbar .top-actions{scrollbar-width:none;grid-area:2/1/auto/-1;justify-content:flex-start;overflow-x:auto}.planner-topbar .top-actions::-webkit-scrollbar{display:none}.planner-topbar .top-actions .icon-button{width:40px;min-width:40px;height:40px;min-height:40px}.planner-topbar .toolbar-divider,.planner-topbar .brand-logo{display:none}.editor-toolbar{gap:.25rem;padding:.3rem .4rem;display:grid}.editor-toolbar .canvas-tools{border-right:0;border-bottom:1px solid var(--border-panel);justify-content:space-around;padding-bottom:.25rem}.editor-toolbar .canvas-tool{flex:1 1 0;min-width:0;min-height:40px}.quick-pick-row>strong{width:3.2rem;font-size:var(--font-xs)}.topbar-quick-item{justify-content:center;min-width:44px;padding:.2rem}.topbar-quick-item span{display:none}.topbar-quick-item img{width:1.8rem;height:1.8rem}.planner-body{grid-template-rows:minmax(0,1fr)}.collection-drawer{width:min(340px,92vw);padding:.65rem}.selection-inspector{width:min(280px,100% - 1rem);left:.5rem;bottom:max(.5rem, env(safe-area-inset-bottom))}}