:root{--bg: #15171c;--bg2: #1e2129;--bg3: #272b35;--fg: #d6d9e0;--fg-dim: #8b909c;--accent: #c9a227;--danger: #c0392b;--ok: #27a05c;--border: #343945}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:Avenir Next,Segoe UI,system-ui,sans-serif;font-size:14px;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}.start-screen{margin:auto;text-align:center;max-width:640px;padding:24px}.start-screen h1{font-size:42px;letter-spacing:6px;color:var(--accent);margin-bottom:0}.start-screen .subtitle{color:var(--fg-dim);margin-bottom:32px}.start-screen h3{color:var(--fg-dim);letter-spacing:2px;text-transform:uppercase;font-size:12px}.choice-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.choice{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:14px 18px;cursor:pointer;color:var(--fg);min-width:140px}.choice:hover{border-color:var(--accent)}.choice.selected{border-color:var(--accent);background:var(--bg3)}.choice .name{font-weight:600}.choice .desc{color:var(--fg-dim);font-size:12px;margin-top:4px}button.primary{background:var(--accent);color:#1a1404;border:none;border-radius:8px;padding:12px 36px;font-size:16px;font-weight:700;cursor:pointer;margin-top:28px}button.primary:hover{filter:brightness(1.1)}.topbar{display:flex;align-items:center;gap:20px;padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--border)}.topbar .title{color:var(--accent);font-weight:700;letter-spacing:1px}.topbar .stat{color:var(--fg-dim)}.topbar .stat b{color:var(--fg)}.topbar .spacer{flex:1}.game-area{display:flex;flex:1;min-height:0}.map-wrap{flex:1;overflow:auto;background:#101218}canvas{display:block;cursor:pointer}.sidebar{width:300px;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;padding:12px;gap:12px;overflow-y:auto}.panel{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px}.panel h3{margin:0 0 8px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--fg-dim)}.panel .hint{color:var(--fg-dim);font-size:12px}.unit-row,.item-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:13px}.unit-row .dim,.item-row .dim{color:var(--fg-dim)}button.action{display:block;width:100%;text-align:left;background:var(--bg2);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:6px 10px;margin-top:6px;cursor:pointer;font-size:13px}button.action:hover:not(:disabled){border-color:var(--accent)}button.action:disabled{opacity:.45;cursor:default}button.endturn{background:var(--accent);color:#1a1404;font-weight:700;border:none;border-radius:8px;padding:12px;font-size:15px;cursor:pointer}button.endturn:hover:not(:disabled){filter:brightness(1.1)}button.endturn:disabled{opacity:.5;cursor:default}.event-log{font-size:12px;color:var(--fg-dim);max-height:180px;overflow-y:auto}.event-log div{padding:2px 0;border-bottom:1px solid var(--bg2)}.toast{position:fixed;top:56px;left:50%;transform:translate(-50%);background:#14161eeb;border:1px solid var(--accent);color:var(--fg);padding:8px 22px;border-radius:20px;font-size:14px;z-index:5;pointer-events:none;animation:toast-fade 2.2s ease forwards}@keyframes toast-fade{0%{opacity:0;transform:translate(-50%,-8px)}12%{opacity:1;transform:translate(-50%)}80%{opacity:1}to{opacity:0}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0b0ed9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;z-index:10}.overlay h2{font-size:36px;color:var(--accent);margin:0}