body{margin:0;background:#0d1117;color:#d8dee9;font:13px system-ui,sans-serif;display:flex;flex-direction:column;height:100vh}
#top{display:flex;gap:8px;align-items:center;padding:6px 10px;background:#161b22;border-bottom:1px solid #30363d;flex-wrap:wrap}
.sp{flex:1}button{background:#21262d;color:#d8dee9;border:1px solid #30363d;border-radius:4px;padding:4px 8px;cursor:pointer}button:hover{background:#30363d}
button.hot{background:#6e40c9;border-color:#8957e5}button.end{background:#238636;border-color:#2ea043;font-weight:bold;padding:6px 14px}
button:disabled{opacity:.4;cursor:default}
#main{flex:1;display:flex;min-height:0}#mapwrap{flex:1;overflow:auto;background:#000}#map{display:block;image-rendering:pixelated}
#side{width:330px;background:#161b22;border-left:1px solid #30363d;padding:8px;overflow:auto;display:flex;flex-direction:column}
#sel{min-height:200px}#feed{flex:1;overflow:auto;font-size:12px;color:#9da7b3}#feed div{border-bottom:1px solid #21262d;padding:2px 0}
h3,h4{margin:6px 0}.y{display:inline-block;margin-right:8px}.n{color:#7ee787}.m{color:#d2a8ff}.e{color:#ffd33d}
.row{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}.small{font-size:11px;color:#8b949e}
#modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center}#mbox{background:#161b22;border:1px solid #30363d;padding:16px;max-width:720px;max-height:85vh;overflow:auto;border-radius:6px}
.tech{border:1px solid #30363d;padding:6px;margin:4px 0;border-radius:4px}.tech.known{opacity:.5}.tech.avail{border-color:#2ea043;cursor:pointer}.tech.cur{background:#1f3a24}
kbd{background:#30363d;border-radius:3px;padding:0 4px}
a{color:#58a6ff}
#modal[hidden]{display:none!important}
#top{position:relative;z-index:20}
#modal{z-index:10}
#liveInd{font-size:12px;color:#8b949e}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#238636;color:#fff;padding:10px 18px;border-radius:6px;z-index:30;font-weight:bold;box-shadow:0 4px 12px #0008}
#toast[hidden]{display:none}
#apbar{border:1px solid #30363d;border-radius:4px;padding:2px 6px;background:#0d1117}
#apbar button.on{background:#8957e5;border-color:#a371f7;color:#fff}
button.end.pulse{animation:pulse 1s infinite alternate}
@keyframes pulse{from{box-shadow:0 0 0 0 #3fb950}to{box-shadow:0 0 12px 4px #3fb950;background:#2ea043}}
#toast.bad{background:#b62324}
.ul{padding:1px 0}.ul.cur{background:#30363d}.ul.dim{opacity:.5}
table.st{border-collapse:collapse;margin:6px 0}table.st td,table.st th{border:1px solid #30363d;padding:2px 6px;text-align:right}table.st td:first-child{text-align:left}
.menu{display:flex;flex-direction:column;gap:8px;min-width:320px}.menu button{font-size:16px;padding:10px}
.rules label,.diff{display:block;margin:2px 0}
.pbar{height:14px;background:#21262d;border-radius:7px;overflow:hidden;margin:6px 0}#pbFill{height:100%;width:0;background:#8957e5}

#bView.ugon{background:#3d3226;color:#ffd9a0}
.ugtag{color:#d9a066}
.res .bad{color:#ff6060;font-weight:bold}.warn{color:#ff4040}

/* v0.5 diplomacy */
.rel-war{color:#ff7b72;font-weight:bold}.rel-ceasefire{color:#e3b341}.rel-peace{color:#7ee787}.rel-alliance{color:#79c0ff;font-weight:bold}
#dipTable td{vertical-align:top}#dipTable button{margin:1px;font-size:11px}#dipTable button:disabled{opacity:.4}.warbtn{background:#5a1d1d;color:#fff}
.ans-accepted{color:#7ee787}.ans-declined,.ans-expired,.ans-void{color:#ff7b72}.ans-pending{color:#e3b341}
#dipTrade input,#dipTrade select{font-size:12px}