:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#29362e;background:#f5f3ee;font-synthesis:none;--green:#287650;--red:#bc5852;--muted:#83877d;--line:#e5e5db;--shadow:0 8px 32px #384c3710}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.34}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #81ad95;outline-offset:3px}input:focus{outline:none}button{border:0;background:none}a{color:inherit;text-decoration:none}svg{width:18px;height:18px;flex-shrink:0}button svg{pointer-events:none}[hidden]{display:none!important}.site-header{height:88px;max-width:1600px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;letter-spacing:1px}.brand small{display:block;font-size:10px;font-weight:400;color:#899084;letter-spacing:1.5px;margin-top:4px}.header-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:#667064}.live-dot{height:6px;width:6px;border-radius:50%;background:#63856d}.sample-label{margin-left:12px;border-left:1px solid #d8ddcf;padding-left:18px;color:#9a9c90}.workspace{max-width:1600px;padding:32px 40px 28px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;margin:auto;align-items:start}.map-panel{min-width:0}.map-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px;min-height:64px}.eyebrow{font-size:11px;letter-spacing:2px;color:#989c8f;margin-bottom:7px}h1{font-size:27px;letter-spacing:2px;line-height:1.25;margin:0;font-weight:650;display:flex;align-items:center;gap:14px}.map-size{font:500 11px "Segoe UI",sans-serif;color:#8a907f;letter-spacing:1px;border:1px solid #dddfd4;border-radius:5px;padding:4px 6px}.team-counts{display:flex;gap:15px;align-items:center;font-size:12px}.team-counts>span{display:flex;align-items:center;gap:6px}.team-counts b{font-size:15px;font-weight:650;min-width:10px}i{display:inline-block;font-style:normal}.team-counts i,.side-tab i{width:6px;height:6px;border-radius:50%;background:currentColor}.first{color:var(--green)}.second{color:var(--red)}.board-card{background:#fffefa;border:1px solid #dce0d3;border-radius:12px;box-shadow:var(--shadow);overflow:hidden}.board-tools{min-height:57px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}.tool-group{display:flex;align-items:center;gap:5px}.tool-button,.icon-button{display:inline-flex;justify-content:center;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:6px;font-size:12px;white-space:nowrap}.tool-button.active{background:#edf2e9;color:#4d6d51}.tool-button:not(:disabled):hover,.icon-button:not(:disabled):hover{background:#edf0e6}.tool-button.quiet{color:#85897c}.icon-button{width:32px;padding:0;color:#85897c}.tool-divider{height:17px;width:1px;background:var(--line);margin:0 5px}.board-viewport{width:100%;overflow:auto;background:#344c36;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#96a17c #dce1ce;touch-action:pan-x pan-y}.board-stage{position:relative;width:100%;aspect-ratio:1293.43225/521.7915;overflow:hidden;isolation:isolate;flex-shrink:0}.map-image{position:absolute;pointer-events:none;user-select:none;max-width:none}.board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--grid-cols,18),minmax(0,1fr));grid-template-rows:repeat(var(--grid-rows,7),minmax(0,1fr));border:1px solid #fff9;touch-action:pan-x pan-y}.board-row{display:contents}.cell{position:relative;min-width:0;min-height:0;padding:0;display:grid;place-items:center;outline-offset:-3px!important;border-radius:0;touch-action:pan-x pan-y}.cell::after{content:"";position:absolute;inset:0;pointer-events:none;border-right:1px solid #fff0;border-bottom:1px solid #fff0;z-index:3}.show-grid .cell::after{border-color:#ffffffe0;opacity:.4}.cell:hover{background:#ffffff18}.cell:focus-visible{outline:2px solid #eadd97;z-index:4}.show-spawns .cell.spawn::before{content:"";position:absolute;inset:23%;border:2px solid var(--spawn-color);box-shadow:0 0 0 1px #fff6;background:color-mix(in srgb,var(--spawn-color) 9%,transparent);border-radius:50%;pointer-events:none;z-index:1}.cell.spawn.first{--spawn-color:#2cd87a}.cell.spawn.second{--spawn-color:#f07469}.show-spawns .cell.has-unit::before{display:none}.unit{position:relative;z-index:5;width:83%;height:83%;max-height:100%;aspect-ratio:1;border-radius:50%;border:3px solid var(--unit-color);box-shadow:0 2px 4px #0007,0 0 0 1px #ffffff9c;display:grid;place-items:center;background:#e4e4d9;cursor:grab;touch-action:none;user-select:none;overflow:hidden;transition:box-shadow .15s,filter .15s}.unit.first{--unit-color:#32b777}.unit.second{--unit-color:#e77470}.portrait{width:100%;height:100%;object-fit:cover;display:block;user-select:none;pointer-events:none;position:relative;z-index:1;background:#f0ede4}.portrait-fallback{position:absolute;inset:0;display:grid;place-items:center;color:#97a18f;background:#e3e6d9;z-index:0}.portrait-fallback svg{width:50%;height:50%}.portrait.failed{display:none}.unit.acted .portrait,.unit.acted .portrait-fallback{filter:grayscale(1) brightness(.48)}.unit.acted{border-color:color-mix(in srgb,var(--unit-color) 60%,#303931)}.unit.selected{box-shadow:0 0 0 2px #fff2a9,0 0 0 4px #fff6,0 3px 7px #0008}.unit.is-dragging{opacity:.22}.cell.is-target{background:#fff8be50;box-shadow:inset 0 0 0 2px #fff4a3}.cell.is-target.has-unit{background:#e9cc765c}.board.is-placing .cell{cursor:crosshair}.board-bottom{height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 15px;color:#8b9182;font-size:10px}.cell-position{min-width:76px;white-space:nowrap;letter-spacing:.4px}.zoom-tools{display:flex;align-items:center;gap:2px}.zoom-value{min-width:44px;font-size:11px;font-variant-numeric:tabular-nums;color:#737d6b;padding:5px 4px}.spawn-legend{display:flex;align-items:center;gap:5px;white-space:nowrap}.spawn-legend i{width:5px;height:5px;border:1px solid;border-radius:50%;margin-left:7px}.legend-first{color:var(--green)}.legend-second{color:var(--red)}.selection-bar{margin-top:16px;min-height:65px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 15px;border:1px solid #dde2d5;background:#eeefe7;border-radius:9px;font-size:12px}.selection-placeholder{display:flex;align-items:center;gap:9px;color:#8c9284}.selection-bar.has-selection{background:#fffefa;border-color:#d9dfd1}.selection-info{display:flex;align-items:center;gap:9px;min-width:0}.selection-avatar{width:35px;height:35px;flex-shrink:0;border-radius:50%;overflow:hidden;position:relative;border:2px solid var(--green)}.selection-avatar.second{border-color:var(--red)}.selection-title{font-size:12px;font-weight:600;white-space:nowrap}.selection-detail{margin-top:4px;color:#909582;font-size:10px;white-space:nowrap}.selection-actions{display:flex;align-items:center;gap:6px}.action-button{display:flex;align-items:center;gap:6px;border:1px solid #dee2d6;background:#f3f5ee;padding:8px 10px;border-radius:6px;font-size:11px;white-space:nowrap}.action-button:hover{background:#e4ebdd}.action-button.remove{border-color:transparent;background:transparent;color:#909584}.map-notes{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11px;color:#929686;margin-top:18px;padding:0 2px}.map-notes span:first-child{display:flex;align-items:center;gap:6px}.map-notes svg{width:14px;height:14px}.workspace-foot{font-size:10px;color:#a1a594;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:30px;padding-top:16px;border-top:1px solid #e1e4d8;letter-spacing:.25px}.hero-panel{background:#fffefa;border:1px solid #e1e4d8;border-radius:12px;box-shadow:var(--shadow);padding:20px 16px 0;overflow:hidden}.hero-panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.hero-panel-heading h2{font-size:15px;margin:0;letter-spacing:.5px;font-weight:650}.hero-panel-heading>span{font-size:10px;color:#9c9e90}.side-switch{display:flex;gap:4px;border:1px solid #e3e6da;background:#f0f2ea;border-radius:8px;padding:4px;margin-bottom:16px}.side-tab{width:50%;border-radius:5px;height:34px;display:flex;justify-content:center;align-items:center;gap:8px;font-size:12px;color:#969b8a}.side-tab.first.active{background:#fffefa;box-shadow:0 1px 4px #253e2214;color:var(--green)}.side-tab.second.active{background:#fffefa;box-shadow:0 1px 4px #253e2214;color:var(--red)}.search-wrap{display:flex;align-items:center;border:1px solid #e1e4d9;background:#f8f9f4;border-radius:7px;padding:0 10px;height:37px;gap:7px}.search-wrap:focus-within{border-color:#8cac89;box-shadow:0 0 0 2px #b9cbb536}.search-wrap>span{display:flex;color:#9ca68d}.search-wrap svg{width:15px;height:15px}.search-wrap input{min-width:0;width:100%;border:0;background:none;height:100%;font-size:12px;color:#394532}.search-wrap input::placeholder{color:#a2a792}.library-filter{display:flex;align-items:center;justify-content:space-between;margin:14px 0 11px;gap:5px;font-size:10px;color:#949c86}.library-filter select{border:0;background:transparent;font-size:10px;color:#7c896e;max-width:105px;padding:4px 0;cursor:pointer}.hero-library{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px 7px;align-content:start;overflow-y:auto;max-height:calc(100dvh - 440px);min-height:240px;padding:3px 3px 16px;scrollbar-width:thin;scrollbar-color:#d6deca transparent}.hero-card{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:0 0 3px;border-radius:7px;touch-action:pan-y;user-select:none}.hero-card .portrait-wrap{width:48px;height:48px;position:relative;border:2px solid #deded2;border-radius:50%;overflow:hidden;background:#e9ebdf;transition:border-color .15s,box-shadow .15s;pointer-events:none}.hero-card:hover .portrait-wrap{border-color:#90aa87;box-shadow:0 2px 7px #34562527}.hero-card.pending .portrait-wrap{border-color:var(--green);box-shadow:0 0 0 2px #28765033}.hero-library.side-second .hero-card.pending .portrait-wrap{border-color:var(--red);box-shadow:0 0 0 2px #bc585233}.hero-name{font-size:10px;line-height:1.5;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#777e6d;pointer-events:none}.library-footer{border-top:1px solid #edf0e4;font-size:10px;color:#a1a68f;display:flex;gap:4px;align-items:center;justify-content:center;padding:14px 0}.library-footer a{color:#77846a}.library-footer a:hover{text-decoration:underline}.external-dot{height:4px;width:4px;border-radius:50%;background:#bcc8ae;margin-right:3px}.library-empty{grid-column:1/-1;color:#969d88;line-height:1.8;text-align:center;padding:30px 10px;font-size:12px}.library-retry{display:block;margin:14px auto 0;padding:6px 14px;border:1px solid #cedac0;border-radius:6px}.drag-ghost{position:fixed;pointer-events:none!important;width:54px;height:54px;z-index:9999;border-radius:50%;border:3px solid var(--unit-color);box-shadow:0 7px 18px #0005;overflow:hidden;background:#eee;opacity:.95;transform:translate(-50%,-50%)}.drag-ghost.first{--unit-color:#32b777}.drag-ghost.second{--unit-color:#e77470}.drag-ghost.acted img{filter:grayscale(1) brightness(.48)}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#293d31f0;color:#f2f5ec;border-radius:9px;padding:12px 20px;box-shadow:0 5px 20px #1f361c26;font-size:12px;max-width:90vw;z-index:10000;text-align:center;pointer-events:none}.map-error{position:absolute;inset:0;display:grid;place-items:center;color:white;background:#344c36;z-index:6;font-size:14px}body.dragging{cursor:grabbing;user-select:none}body.dragging *{cursor:grabbing!important}
@media(min-width:1500px){.hero-library{grid-template-columns:repeat(4,minmax(0,1fr));min-height:340px}.workspace{grid-template-columns:minmax(0,1fr) 310px;gap:32px}.board-tools{height:63px}}
@media(max-width:1100px){.site-header{padding:0 24px}.workspace{padding:25px 24px;gap:20px;grid-template-columns:minmax(0,1fr) 260px}.hero-panel{padding:18px 12px 0}.hero-card .portrait-wrap{width:44px;height:44px}.spawn-legend{font-size:9px;gap:3px}.team-counts{gap:10px}.unit{border-width:2px}.selection-bar{padding:10px}.action-button{padding:8px}.map-notes{font-size:10px}}
@media(max-width:900px){.workspace{grid-template-columns:1fr;gap:22px}.hero-panel{padding:20px 18px 0}.hero-library{grid-template-columns:repeat(8,minmax(0,1fr));max-height:250px;min-height:160px;gap:13px}.hero-panel-heading{margin-bottom:14px}.side-switch{max-width:280px}.hero-card .portrait-wrap{width:48px;height:48px}.workspace-foot{margin-top:18px}.map-heading{margin-bottom:18px}.header-meta{font-size:11px}.map-notes{font-size:11px}.hero-panel-heading>span{font-size:11px}.hero-library{max-height:280px}.search-wrap input{font-size:16px}}
@media(max-width:540px){.site-header{height:72px;padding:0 16px}.brand{font-size:18px;gap:9px}.brand img{width:32px;height:32px}.brand small{font-size:9px}.sample-label{display:none}.workspace{padding:22px 12px;gap:18px}.map-heading{padding:0 3px;min-height:55px;margin-bottom:15px}h1{font-size:23px;gap:9px}.eyebrow{font-size:10px}.map-size{font-size:10px;padding:3px 4px}.team-counts{gap:9px;font-size:10px}.team-counts b{font-size:13px}.board-tools{padding:9px 8px;min-height:50px}.tool-button{font-size:11px;padding:0 8px;gap:5px}.tool-group{gap:2px}.tool-divider{margin:0 2px}.board-bottom{padding:0 8px;height:42px;gap:3px}.spawn-legend{display:none}.board-bottom .cell-position{flex:1}.zoom-tools .icon-button{width:32px;height:36px}.selection-bar{padding:10px;min-height:63px;gap:5px}.selection-actions{gap:1px}.selection-title{font-size:11px}.selection-avatar{width:30px;height:30px}.action-button{gap:4px;font-size:10px;padding:8px 6px}.action-button svg{width:15px;height:15px}.selection-placeholder{font-size:11px}.selection-detail{font-size:9px}.hero-panel{padding:16px 12px 0}.hero-library{grid-template-columns:repeat(5,minmax(0,1fr));gap:13px 6px;min-height:220px;max-height:280px}.hero-card .portrait-wrap{width:48px;height:48px}.hero-name{font-size:10px}.map-notes{padding:0 3px;font-size:10px;margin-top:13px;gap:7px}.workspace-foot{font-size:9px;padding:12px 3px 0;margin-top:16px}.unit{border-width:2px}.show-spawns .cell.spawn::before{border-width:1.5px}.header-meta{font-size:10px}.hero-panel-heading{margin-bottom:12px}.side-tab{height:37px}.search-wrap{height:40px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#app{min-height:100svh;display:flex;flex-direction:column}
.site-header{width:100%;flex-shrink:0}
.workspace{width:100%}
.site-footer{
  width:calc(100% - 80px);max-width:1520px;margin:auto auto 0;
  padding:14px 0 18px;border-top:1px solid #dfe3d7;flex-shrink:0;
  display:flex;justify-content:center;align-items:center;gap:16px;
  color:#7b8374;font-size:12px;line-height:20px;text-align:center;
}
.site-footer a{padding:4px 2px;white-space:nowrap;border-radius:3px}
.site-version{color:#8a9184;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.site-footer a:hover{color:#4d6d51;text-decoration:underline;text-underline-offset:3px}
.site-footer a:focus-visible{outline:2px solid #81ad95;outline-offset:2px}
.filing-divider{width:1px;height:12px;background:#d9ded1}
@media(max-width:1100px){.site-footer{width:calc(100% - 48px)}}
@media(max-width:540px){
  .site-footer{width:calc(100% - 24px);flex-direction:column;gap:0;padding:12px 0 calc(18px + env(safe-area-inset-bottom,0px));font-size:11px;line-height:20px}
  .site-footer a{padding:3px 6px}
  .filing-divider{display:none}
}