:root{--panel:#14100cb8;--ink:#efe6d2;--muted:#b7aa90;--accent:#d8b040;--red:#e0524a;--blue:#5b8ae0;--bar:46px}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);background:#000;margin:0;font-family:Hiragino Sans,Noto Sans JP,system-ui,sans-serif;overflow:hidden}#app{position:fixed;inset:0}#app canvas{width:100%;height:100%;display:block}#hud{pointer-events:none;position:fixed;inset:0}.panel{pointer-events:auto;background:var(--panel);border:1px solid #d8b04059;border-radius:4px;padding:8px 10px}#top{flex-wrap:wrap;align-items:flex-start;gap:8px;padding:8px;display:flex}.title{letter-spacing:.08em;color:var(--accent);font-weight:700}.armies{gap:14px;margin:4px 0;font-size:14px;display:flex}.red{color:var(--red)}.blue{color:var(--blue)}.small{color:var(--muted);font-size:12px}#controls{min-height:var(--bar);border-width:1px 0 0;border-radius:0;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-size:13px;display:flex;position:absolute;bottom:0;left:0;right:0}button,select{font:inherit;color:var(--ink);cursor:pointer;background:#2e261c;border:1px solid #6a5838;border-radius:3px;padding:4px 8px;font-size:13px}button:hover{border-color:var(--accent)}button.primary{background:#7a2a1e;border-color:#c05040}button:disabled{opacity:.45;cursor:default}#selPanel{left:8px;bottom:calc(var(--bar) + 8px);min-width:280px;position:absolute}#selName{margin-bottom:2px;font-weight:700}.orders{flex-wrap:wrap;gap:4px;margin-top:6px;display:flex}#help{right:8px;bottom:calc(var(--bar) + 8px);max-width:420px;line-height:1.6;position:absolute}#helpToggle{cursor:pointer;color:var(--accent)}#help.min{max-width:none}#banner{text-align:center;letter-spacing:.2em;color:#f4e2b0;text-shadow:0 2px 12px #000;opacity:0;width:100%;font-size:42px;font-weight:800;transition:opacity .6s;position:absolute;top:30%}#dragBox{background:#78ff7814;border:1px solid #8f8;position:absolute}@media (width<=700px){#help{display:none}}#tree{width:290px;max-height:calc(100% - 330px - var(--bar));padding:6px 8px;font-size:12px;position:absolute;top:96px;left:8px;overflow-y:auto}#tree .army{cursor:pointer;margin:4px 0 2px;font-weight:700}#tree .wing{cursor:pointer;color:var(--accent);margin:4px 0 1px 4px}#tree .wing.dead{color:#886;text-decoration:line-through}#tree .reg{cursor:pointer;align-items:center;gap:6px;margin-left:14px;line-height:1.5;display:flex}#tree .reg:hover,#tree .wing:hover,#tree .army:hover{background:#ffffff12}#tree .reg.sel{background:#78ff7824}#tree .reg .n{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}#tree .reg.rout .n{color:#c88}#tree .reg.dead{opacity:.35}.bar{vertical-align:middle;background:#3a3024;width:44px;height:5px;display:inline-block;position:relative}.bar i{background:#8c6;position:absolute;top:0;bottom:0;left:0}.bar.m i{background:#d8b040}#tree .tabs{gap:4px;margin-bottom:4px;display:flex}#tree .tabs button{padding:2px 6px;font-size:11px}#soldier{right:8px;bottom:calc(var(--bar) + 210px);width:250px;font-size:12px;position:absolute}#soldier .nm{color:var(--accent);font-weight:700}#soldier .row{align-items:center;gap:6px;display:flex}#soldier .row span:first-child{width:58px;color:var(--muted)}#soldier .bar{width:120px}#log{left:50%;bottom:calc(var(--bar) + 16px);text-align:center;color:#f4e6c0;text-shadow:0 1px 6px #000,0 0 2px #000;pointer-events:none;font-size:15px;line-height:1.5;position:absolute;transform:translate(-50%)}#log div{transition:opacity 1s}[hidden]{display:none!important}#ghLink{pointer-events:auto;color:#f4e6c0;opacity:.7;filter:drop-shadow(0 1px 3px #000);display:flex;position:absolute;top:8px;right:8px}#ghLink:hover{opacity:1;color:var(--accent)}