:root{
  --bg:#ffffff; --fg:#000000; --btn:#888888; --btn-fg:#000000; --border:#000000;
  --muted:#f3f3f3; --own:#00000022;
}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:12px 16px}
.brand{font-weight:700;letter-spacing:.5px}
.nav a{margin-right:12px;text-decoration:none;color:var(--fg)}
.btn{background:var(--btn);color:var(--btn-fg);border:1px solid var(--border);padding:8px 12px;border-radius:6px;cursor:pointer}
.layout{display:grid;grid-template-columns: 320px 1fr 360px; grid-template-rows: 52px 1fr 220px; height:calc(100vh - 52px)}
.sidebar{grid-row:1 / span 2;grid-column:1;border-right:1px solid var(--border);display:flex;flex-direction:column}
.sidebar h2{margin:12px 16px 8px 16px;font-size:16px}
.tools{padding:0 16px 12px 16px;border-bottom:1px solid var(--border)}
.tools .row{display:flex;gap:8px;flex-wrap:wrap}
.orders{flex:1;overflow:auto;padding:12px 16px}
.orders .item{border:1px solid var(--border);padding:8px;border-radius:6px;margin-bottom:8px;background:var(--muted)}
.canvas{grid-column:2;grid-row:1 / span 2;position:relative}
.map-toolbar{position:absolute;left:8px;top:8px;display:flex;gap:6px}
.legend{position:absolute;right:8px;top:8px;background:#fff;border:1px solid var(--border);padding:6px 8px;border-radius:6px}
.panel{grid-column:3;grid-row:1 / span 2;border-left:1px solid var(--border);display:flex;flex-direction:column}
.panel h2{margin:12px 16px 4px 16px;font-size:16px}
.panel .section{padding:8px 16px;border-bottom:1px solid var(--border)}
.bottom{grid-column:1 / span 3;grid-row:3;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr 1fr}
.bottom .cell{padding:12px 16px;border-right:1px solid var(--border)}
.badge{display:inline-block;border:1px solid var(--border);padding:2px 6px;border-radius:999px;font-size:12px;background:#fff}
svg{width:100%;height:100%}
.hex{cursor:pointer;transition:opacity .1s}
.hex:hover{opacity:.9}
.owner{stroke-width:3px}
.army{pointer-events:none}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:#fff;border:1px solid var(--border);padding:8px 12px;border-radius:8px}