:root { --bg:#05070d; --panel:#0c1220cc; --line:#1d2a44; --text:#cfe3ff; --dim:#6f85a8; --acc:#67e8f9; --warn:#fb7185; --gold:#fbbf24; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; }
body { background: radial-gradient(ellipse at 30% 20%, #0d1a33 0%, #05070d 60%) fixed; color:var(--text); font: 14px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(1px 1px at 10% 20%, #fff8, transparent), radial-gradient(1px 1px at 70% 80%, #fff6, transparent), radial-gradient(1px 1px at 40% 60%, #fff5, transparent), radial-gradient(1px 1px at 85% 15%, #fff7, transparent), radial-gradient(1px 1px at 25% 85%, #fff5, transparent);
  background-size: 300px 300px, 410px 410px, 230px 230px, 370px 370px, 520px 520px; }
a { color:var(--acc); }
code { color:var(--gold); }
header { display:flex; align-items:center; gap:24px; padding:10px 18px; border-bottom:1px solid var(--line); background:#060a14e6; position:sticky; top:0; z-index:5; flex-wrap:wrap; }
.brand { font-weight:800; letter-spacing:.35em; font-size:18px; color:#fff; }
.brand small { color:var(--dim); letter-spacing:0; font-weight:400; font-size:11px; }
.logo { color:var(--acc); text-shadow:0 0 12px var(--acc); }
.tick { display:flex; align-items:center; gap:10px; color:var(--dim); }
.bar { width:140px; height:6px; background:#122038; border-radius:3px; overflow:hidden; }
#tickBar { height:100%; width:0; background:linear-gradient(90deg,#22d3ee,#a78bfa); transition:width .9s linear; }
.res { display:flex; gap:16px; margin-left:auto; }
.res b { color:#fff; } .res .ore { color:#fdba74; } .res .en { color:#93c5fd; } .res i { color:var(--dim); font-style:normal; font-size:12px; }
.who { display:flex; gap:10px; align-items:center; }
button { font:inherit; background:#132036; color:var(--text); border:1px solid #27406b; border-radius:6px; padding:5px 10px; cursor:pointer; }
button:hover { border-color:var(--acc); }
button.primary { background:linear-gradient(135deg,#0e7490,#6d28d9); border-color:transparent; color:#fff; }
button.danger { border-color:#7f1d1d; color:#fecaca; }
button:disabled { opacity:.4; cursor:default; }
input, select { font:inherit; background:#0a1426; color:var(--text); border:1px solid #27406b; border-radius:6px; padding:5px 8px; }
main { display:grid; grid-template-columns: minmax(0,1fr) 380px; grid-template-rows: minmax(420px, 64vh) auto; gap:12px; padding:12px; }
.mapwrap { position:relative; border:1px solid var(--line); border-radius:12px; background:#040811aa; overflow:hidden; }
#map { width:100%; height:100%; display:block; }
.legend { position:absolute; left:12px; bottom:8px; color:var(--dim); font-size:11px; }
.side { grid-row: span 2; border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:10px; overflow:auto; max-height: calc(100vh - 80px); position:relative; }
.tabs { display:flex; gap:4px; margin-bottom:10px; }
.tabs button { flex:1; padding:6px 0; font-size:12px; }
.tabs button.on { border-color:var(--acc); color:#fff; box-shadow:0 0 0 1px var(--acc) inset; }
.hidden { display:none; }
.tab h2 { margin:.2em 0; font-size:18px; color:#fff; }
.tab h4 { margin:14px 0 6px; color:var(--dim); text-transform:uppercase; letter-spacing:.15em; font-size:11px; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; }
.kv span:nth-child(odd) { color:var(--dim); }
.card { border:1px solid var(--line); border-radius:8px; padding:8px; margin:6px 0; background:#0a1222; }
.card.sel { border-color:var(--acc); box-shadow:0 0 12px #22d3ee33; }
.card .row, .row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.pill { display:inline-block; padding:0 6px; border-radius:10px; font-size:11px; border:1px solid currentColor; }
.m-attack { color:var(--warn); } .m-mine { color:#fdba74; } .m-move { color:var(--acc); } .m-idle { color:var(--dim); }
.feed, .board { border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:8px 12px; }
main > .feed { grid-column:1; }
.board { grid-column:1; }
@media (min-width: 1300px) { main { grid-template-columns:minmax(0,1fr) 380px; } }
.feedhead { display:flex; align-items:center; justify-content:space-between; }
.feed h3, .board h3 { margin:4px 0; font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.2em; }
.feedhead label { color:var(--dim); font-size:12px; }
#events { list-style:none; margin:0; padding:0; max-height:260px; overflow:auto; }
#events li { padding:4px 0; border-bottom:1px dashed #15233d; display:flex; gap:10px; }
#events li .t { color:var(--dim); min-width:44px; font-size:12px; }
#events li.news .x { color:var(--gold); }
#events li.report .x { color:#fda4af; font-style:italic; }
#events li.battle .x { color:var(--warn); }
#events li.chat .x { color:#a5f3fc; }
#events li.claim .x { color:#bbf7d0; }
#events li.raid .x { color:#f97316; }
#board { width:100%; border-collapse:collapse; }
#board td, #board th { padding:3px 6px; text-align:left; border-bottom:1px solid #15233d; }
#board th { color:var(--dim); font-weight:400; font-size:12px; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.agents { color:var(--dim); font-size:12px; }
dialog { background:#0b1324; color:var(--text); border:1px solid #27406b; border-radius:14px; width:min(420px, 92vw); }
dialog::backdrop { background:#000a; backdrop-filter: blur(3px); }
dialog input { width:100%; margin:6px 0; }
.err { color:var(--warn); min-height:1em; }
#toast { position:sticky; bottom:0; margin-top:10px; color:var(--acc); min-height:1.2em; font-size:12px; }
svg text { font-family: ui-monospace, Menlo, monospace; pointer-events:none; }
.sys { cursor:pointer; }
.sys:hover circle.body { stroke:#fff; }
@keyframes pulse { 0% { r:14; opacity:.9 } 100% { r:40; opacity:0 } }
.boom { fill:none; stroke:var(--warn); stroke-width:2; animation:pulse 1.6s ease-out infinite; }
@media (max-width: 900px) { main { grid-template-columns:1fr; } .side { grid-row:auto; max-height:none; } }