:root {
  --bg: #12130f;
  --panel: #1d1f18;
  --line: #3b3f30;
  --text: #ddd8c4;
  --dim: #9a967f;
  --accent: #e0b04a;
  --good: #8fd16a;
  --warn: #f0704f;
  --mono: "Consolas", "Courier New", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.35 "Segoe UI", system-ui, sans-serif; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { font-family: var(--mono); font-size: 11px; background: #33362a; border: 1px solid #4a4e3c; border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; color: #f1e7c4; }
.hidden { display: none !important; }

#app { display: flex; flex-direction: column; height: 100vh; }

/* ---------- top bar ---------- */
#top {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 6px 12px; min-height: 46px; flex: none;
  background: linear-gradient(#2a2d22, #1b1d16); border-bottom: 2px solid #0a0b08; box-shadow: inset 0 -1px 0 #3d4131;
}
.brand { font: 800 18px/1 var(--mono); letter-spacing: 3px; color: var(--accent); display: flex; flex-direction: column; }
.brand small { font-size: 8px; letter-spacing: 3.5px; color: var(--dim); margin-top: 2px; }
.stat { white-space: nowrap; display: flex; align-items: center; gap: 7px; background: #11120e; border: 1px solid var(--line); border-radius: 3px; padding: 4px 9px; }
.stat span { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dim); }
.stat b { font: 700 15px var(--mono); color: #f4e3a3; min-width: 54px; }
#credits { color: #9fe07a; min-width: 80px; }
.pbar { width: 90px; height: 8px; background: #2b2e23; border: 1px solid #000; }
#pfill { height: 100%; width: 0; background: linear-gradient(90deg, #6fbf4a, #c8d24a); transition: width .3s; }
#pfill.low { background: linear-gradient(90deg, #d04a2a, #f0704f); animation: blink 0.8s infinite; }
#ptext.low { color: var(--warn); }
#top button {
  background: linear-gradient(#3a3e2f, #2a2d22); border: 1px solid #4b503d; border-radius: 3px; padding: 6px 11px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;
}
#top button:hover { border-color: var(--accent); color: #fff3cf; }
#top button.danger, .sbtn.danger, .big.danger { background: linear-gradient(#7a2c1e, #521c12); border-color: #a2412b; }
@keyframes blink { 50% { opacity: .45; } }

/* ---------- main area ---------- */
main { flex: 1; display: flex; min-height: 0; position: relative; }
.btns { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
#view { position: relative; flex: 1; min-width: 0; background: #0b0c0a; }
#game { display: block; width: 100%; height: 100%; }
#msgs { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.msg {
  font: 600 13px var(--mono); color: #f4e3a3; background: rgba(10, 11, 8, .72); border-left: 3px solid var(--accent);
  padding: 3px 9px; animation: fade 7s forwards; text-transform: uppercase; letter-spacing: 1px;
}
.msg.warn { border-color: var(--warn); color: #ffb7a3; }
.msg.good { border-color: var(--good); color: #cff5b5; }
@keyframes fade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
#pause-banner {
  display: none; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font: 800 22px var(--mono); letter-spacing: 6px; color: var(--accent); background: rgba(0,0,0,.6); padding: 6px 22px; border: 1px solid var(--accent);
}

/* ---------- sidebar ---------- */
#side {
  width: 272px; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 8px;
  background: linear-gradient(90deg, #191b14, #22251c); border-left: 2px solid #0a0b08; overflow-y: auto;
}
#radar { position: relative; background: #0b0c0a; border: 2px solid #3b3f30; box-shadow: inset 0 0 0 1px #000; flex: none; }
#mini { display: block; width: 100%; height: auto; }
#radar-off {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: repeating-linear-gradient(0deg, #11120e 0 2px, #171913 2px 4px); color: #7d7a63; font: 700 13px var(--mono); letter-spacing: 2px;
}
#radar-off small { font-size: 10px; letter-spacing: 0.5px; color: #5f5d4b; }
#tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; flex: none; }
.tab {
  background: #2a2d22; border: 1px solid #3b3f30; border-radius: 3px 3px 0 0; padding: 6px 1px; font-size: 10px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--dim);
}
.tab.active { background: #3a3e2d; color: #f4e3a3; border-color: var(--accent); }
.tab.alert { color: #fff; animation: blink 0.8s infinite; border-color: var(--good); }
#bqueue { display: flex; gap: 3px; flex-wrap: wrap; min-height: 34px; align-items: center; background: #11120e; border: 1px solid #33372a; border-radius: 3px; padding: 2px; flex: none; }
.qempty { color: #5f5d4b; font-size: 11px; padding-left: 6px; }
.qitem { position: relative; width: 40px; height: 30px; padding: 0; background: #22251b; border: 1px solid #44483a; border-radius: 2px; overflow: hidden; }
.qitem img { width: 40px; height: 29px; display: block; }
.qitem i { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: rgba(0,0,0,.55); pointer-events: none; }
.qitem.head { border-color: var(--accent); }
.qitem:not(.head) i { height: 100%; }
.qitem.ready { border-color: var(--good); box-shadow: 0 0 6px rgba(143,209,106,.6); }
.qitem:hover { border-color: var(--warn); }
#grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-content: start; flex: none; }
.bbtn {
  position: relative; height: 84px; padding: 2px 4px 4px; overflow: hidden; text-align: center;
  background: linear-gradient(#2e3125, #22251b); border: 1px solid #44483a; border-radius: 3px;
}
.bbtn:hover { border-color: var(--accent); }
.bbtn img { display: block; width: 76px; height: 54px; margin: 0 auto; pointer-events: none; }
.bname { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e6dfc4; }
.bcost { font: 700 11px var(--mono); color: #9fe07a; position: absolute; top: 3px; right: 5px; }
.bprog { position: absolute; left: 0; bottom: 0; height: 100%; width: 0; background: rgba(224, 176, 74, .25); border-right: 2px solid var(--accent); pointer-events: none; }
.bprog[style*="width: 0%"] { border-right: 0; }
.bstate { position: absolute; left: 0; right: 0; top: 22px; font: 800 11px var(--mono); color: #f4e3a3; text-shadow: 0 1px 2px #000; pointer-events: none; padding: 0 4px; }
.bcount { position: absolute; top: 3px; left: 5px; font: 800 12px var(--mono); color: #fff; text-shadow: 0 1px 2px #000; }
.bbtn.locked { filter: grayscale(1) brightness(.55); }
.bbtn.locked .bstate { font-size: 10px; color: #f2b8a8; top: 18px; }
.bbtn.poor .bcost { color: var(--warn); }
.bbtn.done { border-color: #6b5a26; }
.bbtn.done img { filter: saturate(.4) brightness(.7); }
.bbtn.done .bstate { color: #d9c27a; font-size: 13px; }
.bbtn.done .bcost { visibility: hidden; }
.bbtn.ready { border-color: var(--good); box-shadow: 0 0 8px rgba(143, 209, 106, .5); }
.bbtn.ready .bstate { color: #c9ff9e; font-size: 14px; animation: blink 0.8s infinite; }
#strike-btn {
  background: #2a2d22; border: 1px solid #4b503d; border-radius: 3px; padding: 7px; font: 700 12px var(--mono); color: var(--dim); flex: none;
}
#strike-btn.ready { background: linear-gradient(#7a2c1e, #521c12); border-color: #f0704f; color: #fff; animation: blink 1s infinite; }
#selinfo { background: #15160f; border: 1px solid #33372a; border-radius: 3px; padding: 8px; min-height: 120px; flex: none; }
.hint { color: var(--dim); font-size: 12px; }
.hint b { color: var(--text); }
.selhead { display: flex; gap: 8px; align-items: center; }
.selhead img { width: 60px; height: 43px; background: #0e0f0b; border: 1px solid #33372a; }
.selname { font-weight: 800; font-size: 14px; }
.selsub { color: var(--dim); font-size: 11px; }
.hp { position: relative; height: 14px; background: #0b0c0a; border: 1px solid #000; margin: 7px 0 6px; }
.hpf { height: 100%; background: #5fe35f; }
.hpt { position: absolute; inset: 0; font: 700 10px/14px var(--mono); text-align: center; color: #fff; text-shadow: 0 1px 1px #000; }
.row { font-size: 12px; margin: 3px 0; }
.row.dim { color: var(--dim); font-size: 11px; }
.sbtns { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.sbtn { background: linear-gradient(#3a3e2f, #2a2d22); border: 1px solid #4b503d; border-radius: 3px; padding: 5px 8px; font-size: 11px; font-weight: 700; flex: 1; white-space: nowrap; }
.sbtn:disabled { opacity: .5; cursor: default; }
.sbtn:hover:not(:disabled) { border-color: var(--accent); }
.icons { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.selicon { position: relative; padding: 0; background: #0e0f0b; border: 1px solid #33372a; width: 56px; height: 42px; }
.selicon img { width: 54px; height: 39px; }
.selicon b { position: absolute; right: 3px; bottom: 1px; font: 800 12px var(--mono); text-shadow: 0 1px 2px #000; }
.selicon:hover { border-color: var(--accent); }

/* ---------- overlays ---------- */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 9, 6, .55); z-index: 10; }
#overlay { background: radial-gradient(circle at 50% 40%, rgba(8,9,6,.25), rgba(8,9,6,.8)); }
.panel {
  background: linear-gradient(#24271d, #191b14); border: 1px solid #4b503d; box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0,0,0,.6);
  padding: 22px 28px; border-radius: 4px; max-width: 640px; width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto;
}
.panel.small { max-width: 380px; text-align: center; }
.panel h1 { margin: 0; font: 900 44px/1 var(--mono); letter-spacing: 8px; color: var(--accent); text-shadow: 0 3px 0 #5a3f10; }
.panel h2 { margin: 0 0 10px; font: 800 20px var(--mono); letter-spacing: 3px; color: var(--accent); }
.panel h3 { margin: 6px 0; font-size: 13px; color: #f4e3a3; text-transform: uppercase; letter-spacing: 1.5px; }
.start { text-align: center; }
.tag { font: 700 12px var(--mono); letter-spacing: 8px; color: var(--dim); margin: 6px 0 14px; }
.brief { text-align: left; background: #12130e; border-left: 3px solid var(--accent); padding: 10px 12px; color: #cfc9b0; }
.field { margin: 12px 0; display: flex; align-items: center; gap: 12px; justify-content: center; }
.field label { width: 90px; text-align: right; color: var(--dim); text-transform: uppercase; font-size: 11px; letter-spacing: 1.5px; }
.seg { display: flex; }
.seg button { background: #2a2d22; border: 1px solid #4b503d; padding: 7px 16px; font-weight: 700; margin-left: -1px; }
.seg button.active { background: #4a4122; border-color: var(--accent); color: #fff3cf; position: relative; }
.seedrow { display: flex; gap: 6px; }
.seedrow input { width: 110px; background: #0e0f0b; border: 1px solid #4b503d; color: var(--text); padding: 7px; font: 700 14px var(--mono); }
.seedrow button, .big { background: linear-gradient(#3a3e2f, #2a2d22); border: 1px solid #4b503d; border-radius: 3px; padding: 7px 12px; font-weight: 700; }
.big { padding: 11px 26px; font: 800 15px var(--mono); letter-spacing: 3px; margin-top: 8px; }
#btn-deploy { background: linear-gradient(#5b7a2c, #3c5419); border-color: #8fd16a; color: #fff; width: 220px; }
#btn-deploy:hover, .big:hover { filter: brightness(1.15); }
.big.alt { background: linear-gradient(#34372a, #24271d); }
.keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 16px; color: var(--dim); font-size: 12px; }
.row-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#end-title.win { color: var(--good); text-shadow: 0 3px 0 #22400f; }
#end-title.lose { color: var(--warn); text-shadow: 0 3px 0 #4a160c; }
#endscreen .panel { text-align: center; }
#end-sub { color: var(--dim); }
#end-stats { margin: 12px auto; border-collapse: collapse; font-family: var(--mono); }
#end-stats td, #end-stats th { padding: 4px 14px; border-bottom: 1px solid #33372a; text-align: right; }
#end-stats td:first-child { text-align: left; color: var(--dim); }
#end-stats th { color: var(--accent); }
.help { max-width: 860px; text-align: left; }
.help .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.help ul { padding-left: 18px; margin: 0; }
.help li { margin: 5px 0; }
.help .big { display: block; margin: 16px auto 0; }
@media (max-width: 1100px) {
  .brand small { display: none; }
  .stat.power .pbar { display: none; }
  #top button { padding: 5px 8px; }
}
@media (max-width: 900px) {
  .help .cols { grid-template-columns: 1fr; }
  .brand { display: none; }
  #side { width: 232px; }
}

/* ---------- diplomacy ---------- */
#btn-diplo.diplo-calm { border-color: var(--good); color: #cff5b5; }
#btn-diplo.diplo-offer { border-color: var(--good); animation: blink 0.8s infinite; }
#diplo {
  position: absolute; top: 10px; right: 10px; width: 330px; z-index: 5; padding: 10px 12px;
  background: rgba(24, 26, 19, 0.96); border: 1px solid #4b503d; border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
.dhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dhead b { font: 800 14px var(--mono); letter-spacing: 3px; color: var(--accent); }
.dhead span { color: var(--dim); font-size: 11px; flex: 1; }
.dhead button { background: none; border: 0; color: var(--dim); font-size: 14px; }
.drow { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 12px; }
.drow > span { width: 62px; color: var(--dim); text-transform: uppercase; font-size: 10px; letter-spacing: 1px; }
.drow b.warn { color: var(--warn); } .drow b.good { color: var(--good); }
.drow em { font-style: normal; font-family: var(--mono); font-size: 11px; }
.dbar { flex: 1; height: 8px; background: #0e0f0b; border: 1px solid #000; }
#d-rel { height: 100%; width: 25%; }
#d-offer { background: #22351b; border: 1px solid var(--good); padding: 6px 8px; margin: 6px 0; font-size: 12px; }
#d-offer div { display: flex; gap: 6px; margin-top: 5px; }
#d-offer button, .dbtns button { background: linear-gradient(#3a3e2f, #2a2d22); border: 1px solid #4b503d; border-radius: 3px; padding: 6px 8px; font-size: 11px; font-weight: 700; }
.dbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 8px 0; }
.dbtns button:disabled { opacity: .4; cursor: default; }
.dbtns button:hover:not(:disabled), #d-offer button:hover { border-color: var(--accent); }
.dbtns button.danger { background: linear-gradient(#7a2c1e, #521c12); border-color: #a2412b; }
.dhint { color: var(--dim); font-size: 11px; line-height: 1.35; }
#d-log { margin-top: 6px; font-size: 11px; max-height: 110px; overflow-y: auto; }
#d-log div { padding: 2px 0; border-top: 1px solid #2e3126; }
#d-log span { color: var(--dim); font-family: var(--mono); }

/* Diplomacy faction tabs */
.dteams { display: flex; gap: 4px; margin: 6px 0 4px; flex-wrap: wrap; }
.dteams button { flex: 1; min-width: 60px; background: #1d1f18; border: 1px solid #3b3f30; border-bottom-width: 3px; border-radius: 3px; padding: 4px 2px; font: 700 11px var(--mono); }
.dteams button small { display: block; font-size: 9px; color: var(--dim); font-weight: 400; }
.dteams button.active { background: #2e3226; }