:root{
  --sci:#4aa3df; --cul:#a862c9; --gold:#e6b422; --faith:#f2f2f2;
  --food:#6fcf6f; --prod:#e08a3c; --panel:#12202e; --panel2:#1b3247;
  --ink:#e9f1f7; --line:#2e4a63; --accent:#d9b451;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{width:100%; height:100%; overflow:hidden; background:#05080c;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); user-select:none;}
#game{position:fixed; inset:0;}
canvas#map{position:absolute; inset:0; display:block; cursor:grab;}
canvas#map.dragging{cursor:grabbing;}
.hud{position:absolute; z-index:10;}
.hidden{display:none !important;}
.ic{font-style:normal; margin-right:3px;}
.sci{color:var(--sci);} .cul{color:var(--cul);} .gold{color:var(--gold);}
.faith{color:#dfe7ee;} .food{color:var(--food);} .prod{color:var(--prod);}

/* Top bar */
#topbar{top:0; left:0; right:0; height:42px; display:flex; align-items:center; gap:14px;
  padding:0 12px; background:linear-gradient(#0d1a26ee,#0a141dee);
  border-bottom:2px solid var(--accent); box-shadow:0 2px 10px #000a;}
.civ-emblem{width:28px; height:28px; border-radius:50%; background:var(--accent); color:#111;
  display:flex; align-items:center; justify-content:center; font-weight:800; border:2px solid #fff3;}
.yield{display:flex; align-items:center; font-size:14px; gap:2px;}
.yield small{opacity:.7; margin-left:3px; font-size:11px;}
.sep{flex:1;}
.era{font-variant:small-caps; letter-spacing:1px; color:var(--accent); font-weight:700;}
.turnbox{text-align:right; font-size:13px;} .turnbox small{display:block; opacity:.7; font-size:11px;}

/* Research trays */
#researchTray{top:52px; left:10px; display:flex; flex-direction:column; gap:8px; width:250px;}
.tray{display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer;
  background:linear-gradient(#14273a,#0e1c2b); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 3px 8px #0007; transition:transform .1s;}
.tray:hover{transform:translateX(3px); border-color:var(--accent);}
.tray-ic{font-size:20px;}
.tray-body{flex:1; min-width:0;}
.tray-name{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.progress{height:5px; background:#0006; border-radius:3px; margin:4px 0 2px;}
.bar{height:100%; border-radius:3px; width:0;}
.bar.sci{background:var(--sci);} .bar.cul{background:var(--cul);}
.tray-turns{font-size:11px; opacity:.75;}

/* Bottom-right */
#bottomright{right:10px; bottom:10px; display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
#minimap{border:2px solid var(--accent); border-radius:4px; background:#0a1520; box-shadow:0 3px 10px #000a;}
.next-turn{padding:12px 26px; font-size:16px; font-weight:700; letter-spacing:.5px;
  background:linear-gradient(#2f7d3a,#1f5a28); color:#fff; border:2px solid #7ee08a; border-radius:6px;
  cursor:pointer; box-shadow:0 3px 10px #000a; text-shadow:0 1px 2px #000;}
.next-turn:hover{background:linear-gradient(#39943f,#276b30);}
.next-turn.wait{background:linear-gradient(#8a6d1f,#5a4711); border-color:#e6c860;}
.next-turn:disabled{opacity:.6; cursor:default;}

/* Unit panel */
#unitPanel{left:10px; bottom:10px; width:290px; background:linear-gradient(#14273a,#0c1826);
  border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 14px #000a; overflow:hidden;}
.up-head{display:flex; align-items:center; padding:8px 10px; background:#0d1c2b; border-bottom:1px solid var(--line);}
.up-name{font-weight:700; flex:1;}
.up-close{cursor:pointer; opacity:.7; font-size:18px;} .up-close:hover{opacity:1;}
.up-stats{padding:6px 10px; font-size:12px; opacity:.9; display:flex; flex-wrap:wrap; gap:8px;}
.up-actions{display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px;}
.act-btn{padding:7px 9px; font-size:12px; background:#1c344a; color:var(--ink);
  border:1px solid var(--line); border-radius:5px; cursor:pointer; display:flex; align-items:center; gap:4px;}
.act-btn:hover{background:#265077; border-color:var(--accent);}
.act-btn:disabled{opacity:.4; cursor:default;}

/* Tile info */
#tileInfo{bottom:10px; left:50%; transform:translateX(-50%); background:#0c1826dd;
  border:1px solid var(--line); border-radius:6px; padding:6px 12px; font-size:12px; max-width:60%;
  text-align:center; pointer-events:none;}

/* Log */
#log{top:52px; right:10px; width:270px; display:flex; flex-direction:column; gap:5px; pointer-events:none;}
.log-item{background:#0c1826dd; border-left:3px solid var(--accent); padding:6px 9px; font-size:12px;
  border-radius:3px; animation:fade 6s forwards;}
@keyframes fade{0%{opacity:0; transform:translateX(20px);} 8%{opacity:1; transform:none;} 85%{opacity:1;} 100%{opacity:0;}}

/* Overlays */
.overlay{position:absolute; inset:0; z-index:50; background:#04070ad9; display:flex;
  align-items:center; justify-content:center;}
.cw-close{cursor:pointer; font-size:24px; opacity:.7; padding:0 6px;} .cw-close:hover{opacity:1;}

/* City window */
.city-window{width:min(880px,94%); height:min(600px,90%); background:linear-gradient(#122334,#0c1826);
  border:2px solid var(--accent); border-radius:10px; display:flex; flex-direction:column; box-shadow:0 10px 40px #000c;}
.cw-header{display:flex; align-items:center; gap:16px; padding:12px 16px; background:#0d1c2b;
  border-bottom:2px solid var(--accent); border-radius:8px 8px 0 0;}
.cw-title{font-size:20px; font-weight:800; color:var(--accent); flex:1;}
.cw-body{flex:1; display:flex; overflow:hidden;}
.cw-left{width:44%; padding:14px; overflow-y:auto; border-right:1px solid var(--line);}
.cw-right{flex:1; padding:14px; overflow-y:auto;}
.cw-section-title{font-variant:small-caps; letter-spacing:1px; color:var(--accent); font-weight:700;
  margin:10px 0 6px; border-bottom:1px solid var(--line); padding-bottom:3px;}
.cw-yields{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.cw-yields div{background:#0e1e2d; padding:6px 8px; border-radius:4px; font-size:13px; display:flex; justify-content:space-between;}
.cw-districts .dist{background:#0e1e2d; padding:8px; border-radius:5px; margin-bottom:6px; font-size:13px;}
.dist b{color:var(--accent);}
.dist .bld{font-size:12px; opacity:.85; margin-left:12px;}
.prod-item{display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:5px;
  background:#0e1e2d; border:1px solid var(--line); border-radius:5px; cursor:pointer;}
.prod-item:hover{border-color:var(--accent); background:#16324a;}
.prod-item.active{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);}
.prod-item .pi-name{flex:1;} .prod-item .pi-cost{font-size:12px; opacity:.8;}
.prod-item .pi-turns{font-size:11px; opacity:.7; min-width:52px; text-align:right;}
.prod-cat{font-size:11px; text-transform:uppercase; letter-spacing:1px; opacity:.6; margin:10px 0 4px;}

/* Tree window */
.tree-window{width:96%; height:92%; background:linear-gradient(#0f1f2e,#0a141d);
  border:2px solid var(--accent); border-radius:10px; display:flex; flex-direction:column; overflow:hidden;}
.tree-header{display:flex; align-items:center; padding:8px 14px; background:#0d1c2b; border-bottom:2px solid var(--accent);}
.tree-tabs{flex:1; display:flex; gap:8px;}
.tab{padding:8px 16px; background:#14273a; color:var(--ink); border:1px solid var(--line);
  border-radius:6px 6px 0 0; cursor:pointer; font-size:14px;}
.tab.active{background:#265077; border-color:var(--accent); font-weight:700;}
.tree-scroll{flex:1; overflow:auto; position:relative;}
.tree-canvas{position:relative;}
.node{position:absolute; width:150px; background:linear-gradient(#16293c,#0e1c2b);
  border:2px solid var(--line); border-radius:7px; padding:7px 8px; cursor:pointer; font-size:12px;}
.node:hover{border-color:var(--accent);}
.node.done{border-color:#3fae5a; background:linear-gradient(#173a24,#0f2417);}
.node.active{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent);}
.node.avail{border-color:#4a7fae;}
.node.locked{opacity:.55;}
.node .n-name{font-weight:700; margin-bottom:3px;}
.node .n-cost{font-size:11px; opacity:.8;}
.node .n-boost{font-size:10px; margin-top:4px; padding:3px 4px; border-radius:3px; background:#0006; opacity:.85;}
.node .n-boost.got{background:#2b5; color:#04140a; opacity:1; font-weight:600;}
.node .n-unlocks{font-size:14px; margin-top:4px; opacity:.9; letter-spacing:2px;}
svg.tree-lines{position:absolute; top:0; left:0; pointer-events:none;}

/* Start screen */
.start-window{width:min(560px,92%); background:linear-gradient(#12293f,#0a1621);
  border:2px solid var(--accent); border-radius:12px; padding:26px 28px; box-shadow:0 12px 50px #000d; text-align:center;}
.start-window h1{font-size:26px; line-height:1.1; letter-spacing:2px; font-weight:800;}
.start-window h1 span{color:var(--accent); font-size:34px;}
.start-window .tag{color:var(--accent); font-variant:small-caps; letter-spacing:3px; margin:4px 0 18px;}
.setup{text-align:left; margin-bottom:18px;}
.setup label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:1px; opacity:.75; margin:12px 0 6px;}
.setup select{width:100%; padding:8px; background:#0e1e2d; color:var(--ink); border:1px solid var(--line); border-radius:5px;}
.leader-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.leader-card{background:#0e1e2d; border:2px solid var(--line); border-radius:7px; padding:8px; cursor:pointer; text-align:center;}
.leader-card:hover{border-color:#4a7fae;}
.leader-card.sel{border-color:var(--accent); background:#16324a;}
.leader-card .lc-emb{width:36px; height:36px; border-radius:50%; margin:0 auto 5px; display:flex;
  align-items:center; justify-content:center; font-weight:800; color:#111;}
.leader-card .lc-leader{font-weight:700; font-size:13px;}
.leader-card .lc-civ{font-size:11px; opacity:.7;}
.leader-card .lc-uniq{font-size:10px; opacity:.6; margin-top:3px;}
.start-btn{margin-top:6px; padding:13px 30px; font-size:17px; font-weight:800; letter-spacing:.5px;
  background:linear-gradient(#c99a2e,#a87a1c); color:#1a1205; border:2px solid #f0d67a; border-radius:8px; cursor:pointer;}
.start-btn:hover{background:linear-gradient(#e0b13c,#c2921f);}
.hint{margin-top:14px; font-size:11px; opacity:.6;}

/* Combat preview */
#combatPreview{position:absolute; z-index:40; background:#0c1826f0; border:1px solid #a33;
  border-radius:6px; padding:8px 12px; font-size:12px; pointer-events:none; min-width:150px;}
#combatPreview .cp-row{display:flex; justify-content:space-between; gap:12px;}
#combatPreview .atk{color:#ff8a5c;} #combatPreview .def{color:#7ec8ff;}