:root{color-scheme:dark;--bg:#07111b;--panel:#111e29;--border:#263d4d;--text:#e8f7fb;--muted:#9cb9c5;--cyan:#30e9e3;--pink:#f629b9;--purple:#9a9bff;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0;min-width:300px}button{font:inherit;cursor:pointer}button:focus-visible,.board:focus-visible{outline:2px solid #5df5ef;outline-offset:2px}.demo-shell{padding:0;background:#07111b;border-radius:16px;overflow:hidden;border:1px solid #294858}.demo-head{background:#0b1723;border-bottom:1px solid #294555;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;gap:14px}.demo-brand{display:flex;align-items:center;gap:11px}.demo-symbol{border:1px solid #389aa3;background:linear-gradient(120deg,#103746,#193548);display:grid;place-items:center;width:35px;height:35px;border-radius:10px;font-weight:900;font-size:20px;color:#59fff2}.demo-brand strong{font-size:12px;letter-spacing:.12em;display:block}.demo-brand small{font-size:8px;color:#8fb5c1;letter-spacing:.17em}.demo-badge{font-size:9px;letter-spacing:.12em;color:#9aece2;border:1px solid #235656;background:#10302f;padding:8px 12px;border-radius:20px;font-weight:800}.demo-badge span{color:#3dd7a4}.playground{padding:20px}.work-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 15px}.work-header strong{font-size:19px;display:block;margin-top:5px;letter-spacing:-.02em}.micro{font-size:9px;font-weight:900;color:#92cbce;letter-spacing:.16em}.game-status{font-size:9px;font-weight:800;letter-spacing:.06em;color:#819da8}.game-status span{margin-left:9px;color:#66eadb}.mode-selector{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}.mode-btn{border:1px solid #315264;background:#111f2c;color:#aac6d0;border-radius:8px;padding:11px 15px;font-size:12px;font-weight:750;transition:background .13s,border-color .13s}.mode-btn:hover{border-color:#38b8bc}.mode-btn.is-active{color:#07121a;background:#51e8e5;border-color:#51e8e5}.toolbar{display:flex;gap:13px;align-items:center;flex-wrap:wrap;background:#0d1b27;border:1px solid #284456;border-radius:10px;padding:9px 11px;margin-bottom:10px}.tool-set{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.tool-btn{border:1px solid #355063;background:#192d3a;color:#cfebf3;min-height:36px;padding:8px 11px;font-size:11px;border-radius:7px;font-weight:800;white-space:nowrap}.tool-btn:hover:not(:disabled){background:#214252}.tool-btn.is-active{background:#194b52;color:#a5fffa;border-color:#4bdedb}.tool-btn.add-enemy.is-active{background:#512047;border-color:#ee47bf;color:#ffd7f5}.tool-dot{display:inline-block;width:9px;height:9px;border-radius:2px;transform:rotate(45deg);margin-right:7px}.tool-dot.cyan{background:#54ede6}.tool-dot.pink{background:#f737bd}.tool-btn:disabled{cursor:not-allowed;opacity:.34}.tool-divider{height:24px;width:1px;background:#345063}.tool-btn.mini{padding:8px 10px}.tool-btn.reset{margin-left:auto;background:#132331;color:#aac5d0}.point-toolbar{min-height:42px;border:1px solid #2d4857;background:#101e29;border-radius:9px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 11px;margin-bottom:10px;flex-wrap:wrap}.point-toolbar>span{font-size:9px;letter-spacing:.07em;color:#9abac7;font-weight:800}.point-controls{display:flex;gap:5px}.point-btn{padding:7px 12px;font-size:10px;border:1px solid #2d505d;border-radius:6px;background:#172c38;color:#b1cdd5;font-weight:900}.point-btn.is-active{background:#e637b1;color:white;border-color:#e637b1}.objective-lock{color:#5be1cd!important}.board{position:relative;aspect-ratio:1000/650;max-height:510px;min-height:265px;width:100%;background:#213640;overflow:hidden;cursor:crosshair;touch-action:none;border:1px solid #3f6070;border-radius:10px;user-select:none;-webkit-user-select:none}.board.is-placing{cursor:cell;box-shadow:0 0 0 2px #51eae7}.map-art{position:absolute;inset:0;width:100%;height:100%}.objective-layer,.marker-layer{position:absolute;inset:0;pointer-events:none}.objective{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border-radius:8px;padding:8px 11px;font-size:12px;font-weight:1000;text-align:center;pointer-events:none;min-width:39px;box-shadow:0 5px 18px #05121aa6}.objective.hp{color:#fff;background:#c319a0a8;border:2px dashed #ff75d8}.objective.snd{background:#205846c9;color:#c1ffe8;border:2px solid #4ff4a2}.objective.overload.blue{color:#d1f6ff;background:#1c5085c9;border:2px solid #4bb9fc}.objective.overload.yellow{color:#fff3bd;background:#71602cc9;border:2px solid #f6dd54}.objective small{display:block;font-size:7px;letter-spacing:.1em;margin-bottom:2px}.player{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--angle));width:43px;height:43px;display:flex;align-items:center;justify-content:center;cursor:grab;border:0;background:transparent;touch-action:none;pointer-events:auto;padding:0;color:#00141c;filter:drop-shadow(0 4px 5px #00131bcc)}.player svg{width:100%;height:100%;overflow:visible}.player polygon{stroke:#eaffff;stroke-width:2.3;stroke-linejoin:round}.player.friendly polygon{fill:#31e0db}.player.enemy polygon{fill:#ff3dbb}.player .marker-number{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle)));font-weight:1000;font-size:11px;pointer-events:none;color:#07141e}.player.selected{filter:drop-shadow(0 0 10px #e7ffff)}.player.selected:after{content:'';position:absolute;inset:-7px;border:2px dashed #f9ffffa8;border-radius:50%;pointer-events:none}.player.dragging{cursor:grabbing;z-index:10}.map-stamp{position:absolute;left:13px;bottom:10px;font-size:9px;letter-spacing:.13em;color:#e4f7f4ae;font-weight:900;pointer-events:none;text-shadow:0 1px 2px #001}.map-legend{position:absolute;right:11px;top:10px;background:#101e29d9;border:1px solid #537887a3;padding:8px 10px;border-radius:7px;font-size:9px;letter-spacing:.045em;color:#bed9e2;font-weight:800;pointer-events:none}.map-legend span{margin-left:9px}.map-legend .legend-cyan{color:#50e8e1}.map-legend .legend-pink{color:#ff61c9}.board-foot{margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:15px}.status-line{font-size:11px;line-height:1.5;color:#a8c9d0}.board-count{font-size:9px;color:#86c9ca;white-space:nowrap;letter-spacing:.03em;font-weight:900}.demo-disclaimer{background:#0b1621;color:#84a0ad;padding:14px 22px;border-top:1px solid #23394b;text-align:center;font-size:9px;letter-spacing:.09em;font-weight:850;line-height:1.6}
@media(max-width:760px){.playground{padding:12px}.work-header{flex-wrap:wrap}.game-status{font-size:8px}.toolbar{gap:7px}.tool-divider{display:none}.tool-btn.reset{margin-left:0}.mode-selector{gap:5px}.mode-btn{flex:1;min-width:125px;padding:10px 8px}.board{min-height:290px;max-height:390px;aspect-ratio:1.3}.map-art{object-fit:cover}.board-foot{align-items:flex-start;flex-direction:column;gap:5px}.map-legend{font-size:8px}.objective{padding:6px;min-width:30px}.player{width:39px;height:39px}}
@media(max-width:470px){.demo-head{padding:10px}.demo-brand strong{font-size:9px}.demo-brand small{font-size:7px}.demo-badge{font-size:8px;padding:7px}.point-toolbar>span{display:none}.point-toolbar .objective-lock{display:block}.tool-btn{font-size:10px;padding:8px}.tool-btn.mini span{display:none}.tool-set{gap:5px}.map-stamp{font-size:7px}.map-legend{font-size:7px;right:4px;top:4px;padding:5px}.board{min-height:330px}.player{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.point-toolbar[hidden]{display:none}

/* Compact showcase variant: all tools visible without an internal scrollbar. */
html,body{margin:0;overflow:hidden}
.demo-shell{border-radius:12px}
.demo-head{padding:7px 13px}
.demo-brand strong{font-size:10px}
.demo-brand small{font-size:7px}
.demo-symbol{height:29px;width:29px;font-size:17px}
.demo-badge{font-size:8px;padding:6px 9px}
.playground{padding:9px 11px}
.work-header{margin:0 0 7px}
.work-header strong{font-size:14px;margin-top:3px}
.micro,.game-status{font-size:8px}
.mode-selector{gap:5px;margin:0 0 6px}
.mode-btn{padding:7px 9px;font-size:10px;min-height:30px;border-radius:6px}
.toolbar{gap:6px;padding:6px 8px;margin-bottom:7px}
.tool-set{gap:4px}
.tool-btn{padding:6px 8px;min-height:28px;font-size:9px;border-radius:6px}
.tool-btn.mini{padding:6px 8px}
.tool-btn.reset{margin-left:0}
.tool-btn.drawing-tool.is-active{background:#135a61;color:#affff8;border-color:#38e5e1}
.tool-btn[data-tool="clip"].is-active{background:#592649;border-color:#fa55c8}
.tool-btn[data-tool="pan"].is-active{background:#324464;border-color:#99a9ff}
.point-toolbar{padding:4px 8px;min-height:30px;margin-bottom:6px}
.point-btn{padding:5px 9px;font-size:9px}
.point-toolbar>span{font-size:8px}
.board{height:247px;min-height:0;max-height:none;aspect-ratio:auto;border-radius:7px}
.camera{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.drawing-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.board[data-tool="pan"]{cursor:grab}
.board[data-tool="draw"],.board[data-tool="route"]{cursor:crosshair}
.board[data-tool="clip"]{cursor:cell}
.board-foot{margin-top:6px}
.status-line{font-size:9px;line-height:1.3}
.board-count{font-size:8px}
.map-stamp{font-size:7px;bottom:6px;left:7px}
.map-legend{font-size:8px;padding:5px 6px}
.demo-disclaimer{padding:7px 10px;font-size:8px;line-height:1.3}
@media(max-width:760px){
 .playground{padding:8px}
 .mode-selector{gap:4px}
 .mode-btn{min-width:98px;padding:6px 5px}
 .toolbar{gap:5px;padding:5px}
 .board{height:220px;min-height:0;max-height:none;aspect-ratio:auto}
 .tool-btn.mini span{display:none}
 .board-foot{flex-direction:column;gap:3px}
 .map-stamp{font-size:6px}
}
@media(max-width:470px){
 .demo-head{padding:6px 9px}
 .game-status{display:none}
 .point-toolbar>span{display:none}
 .mode-btn{font-size:9px}
 .toolbar{gap:4px}
 .tool-btn{font-size:9px}
 .board{height:230px;min-height:0}
}