:root {
  --ink: #e9e3d2;
  --dim: #a9a593;
  --panel: rgba(21, 21, 24, .93);
  --panel-2: rgba(38, 37, 38, .95);
  --line: #4b463a;
  --accent: #d9a441;
  --good: #7be38a;
  --bad: #ff7a6b;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body[data-faction="swarm"] { --accent: #8fd14f; --line: #3f5a30; }
body[data-faction="collective"] { --accent: #5fe3ff; --line: #2d5068; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #070811; color: var(--ink); font: 13px/1.35 var(--sans); user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
#game { position: fixed; inset: 0; display: block; }
#overlay { position: fixed; inset: 0; display: block; pointer-events: none; z-index: 1; }

/* ---------------------------------------------------------------- Menu */
#menu {
  position: fixed; inset: 0; overflow: auto; z-index: 10; padding: 28px 16px;
  background:
    radial-gradient(1000px 500px at 18% 0%, rgba(217,164,65,.17), transparent 70%),
    radial-gradient(1000px 500px at 50% 110%, rgba(127,209,59,.12), transparent 70%),
    radial-gradient(1000px 500px at 85% 5%, rgba(95,227,255,.14), transparent 70%),
    /* Key art: darkened so the text stays readable. Without the file, only the colours above show. */
    linear-gradient(rgba(8,8,14,.58), rgba(8,8,14,.8)),
    url("assets/key-art.jpg") center / cover no-repeat,
    #0a0b12;
}
.menu-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
#menu header { text-align: center; }
#menu h1 { font: 700 54px/1 var(--serif); margin: 0; letter-spacing: .03em; color: #f3e8cb; text-shadow: 0 2px 26px rgba(217,164,65,.45); }
.tag { color: var(--dim); font: italic 16px var(--serif); margin: 8px 0 0; }
#menu h2 { font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: .2em; color: var(--dim); margin: 8px 0 0; }
#faction-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; width: 100%; }
.fcard {
  text-align: left; padding: 16px; border-radius: 6px; border: 1px solid #33322f; background: rgba(23,23,28,.92);
  display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .15s, background .15s;
}
.fcard canvas { align-self: center; width: 92px; height: 92px; }
.fcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.fcard.sel { border-color: var(--accent); background: rgba(35,34,38,.97); box-shadow: 0 0 0 1px var(--accent), 0 8px 34px rgba(0,0,0,.5); }
.fcard h3 { font: 700 23px var(--serif); margin: 0; color: var(--accent); text-align: center; }
.motto { margin: 0; font: italic 14px var(--serif); text-align: center; color: #d8d2bf; }
.theme { margin: 0; color: var(--dim); }
.mech { background: rgba(255,255,255,.04); border-left: 2px solid var(--accent); padding: 7px 9px; display: flex; flex-direction: column; gap: 3px; }
.mech b { color: var(--accent); }
.pros b, .cons b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.pros b { color: var(--good); }
.cons b { color: var(--bad); }
.opts { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.opt-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.opt-group span { color: var(--dim); margin-right: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.opt-group button { background: #1c1c20; border: 1px solid #3a3a3d; padding: 6px 12px; border-radius: 3px; }
.opt-group button:hover { border-color: #8d8a7d; }
.opt-group button.sel { background: #e9e3d2; color: #16161a; border-color: #e9e3d2; font-weight: 600; }
#start {
  margin-top: 6px; padding: 12px 58px; font: 700 20px var(--serif); letter-spacing: .08em; color: #1a1408;
  background: linear-gradient(#f0cb7a, #c8953a); border: 1px solid #f7deaa; border-radius: 4px; box-shadow: 0 6px 24px rgba(217,164,65,.34);
}
#start:hover { filter: brightness(1.1); }
.menu-hint { color: var(--dim); margin: 0; text-align: center; }

/* ----------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud button, #bottom, #top, #tech, #help, #log div { pointer-events: auto; }
#top {
  position: absolute; top: 0; left: 0; right: 0; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 10px; background: linear-gradient(rgba(16,16,19,.97), rgba(16,16,19,.87)); border-bottom: 1px solid var(--line);
}
#resources { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.res { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 5px; align-items: baseline; }
.res .glyph { font-size: 15px; grid-row: 1; }
.res span:not(.glyph) { font: 600 15px var(--sans); font-variant-numeric: tabular-nums; }
.res small { grid-column: 2; grid-row: 2; color: var(--dim); font-size: 10px; display: none; }
.res small:not(:empty) { display: block; }
.res em { display: none; }
.res .capped { color: var(--bad); }
#center-top { display: flex; align-items: center; gap: 10px; }
#btn-tech {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 3px 14px; display: flex; flex-direction: column; align-items: center; min-width: 190px;
}
#btn-tech:hover { border-color: var(--accent); }
#btn-tech b { color: var(--accent); }
#btn-tech small { color: var(--dim); font-size: 10px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#btn-tech.alert { border-color: var(--accent); box-shadow: 0 0 12px var(--accent); animation: glow 1.1s infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 3px var(--accent); } }
#clock { font: 600 15px var(--sans); font-variant-numeric: tabular-nums; color: var(--dim); }
#top-right { display: flex; gap: 4px; }
#top-right button { width: 32px; height: 30px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 0; }
#top-right button:hover { border-color: var(--accent); }
#btn-speed { width: 44px !important; }
#btn-music.off { opacity: .4; text-decoration: line-through; }

#wb-btn {
  position: absolute; top: 56px; right: 10px; padding: 7px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
#wb-btn small { color: var(--dim); }
#wb-btn.ready { border-color: var(--accent); box-shadow: 0 0 16px var(--accent); animation: glow 1s infinite alternate; }
#wb-btn.ready b { color: var(--accent); }
#idle-workers { position: absolute; top: 56px; left: 10px; background: rgba(90, 60, 15, .92); border: 1px solid #e0a34a; color: #ffe3b0; border-radius: 3px; padding: 4px 10px; }

#log { position: absolute; left: 50%; transform: translateX(-50%); top: 56px; display: flex; flex-direction: column; align-items: center; gap: 3px; width: min(560px, 80vw); pointer-events: none; }
.log { background: rgba(14,14,18,.8); padding: 3px 10px; border-radius: 2px; transition: opacity .8s; text-align: center; pointer-events: none !important; }
.log.good { color: var(--good); }
.log.bad { color: var(--bad); font-weight: 600; }
.log.warn { color: #ffd27a; }
.log.fade { opacity: 0; }

#bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 186px; display: grid; grid-template-columns: 232px minmax(120px, 1fr) 248px; gap: 6px; padding: 6px;
  background: linear-gradient(rgba(16,16,19,.88), rgba(14,14,16,.97)); border-top: 1px solid var(--line);
}
#mini-wrap { background: #050509; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#minimap { width: 172px; height: 172px; cursor: crosshair; }
#selection { background: var(--panel); border: 1px solid var(--line); padding: 8px 10px; overflow: hidden; min-width: 0; }
.sel-empty h4, .sel-info h4, .sel-one h4 { margin: 0 0 4px; font: 700 16px var(--serif); color: var(--accent); }
.sel-empty p { margin: 0; color: var(--dim); max-width: 560px; }
.sel-one { display: flex; gap: 12px; align-items: flex-start; }
.sel-info { flex: 1; min-width: 0; }
canvas.ic.big { width: 72px; height: 72px; background: rgba(255,255,255,.04); border: 1px solid var(--line); flex: none; }
.sel-one p { margin: 3px 0; }
.dim { color: var(--dim); }
.desc { font-size: 12px; }
.warn { color: #ffd27a; }
.enemy { color: var(--bad); font: 600 12px var(--sans); margin-left: 6px; }
.stat-bar { position: relative; height: 14px; background: #2a1a1a; margin: 3px 0; max-width: 340px; border: 1px solid #000; }
.stat-bar i { position: absolute; inset: 0 auto 0 0; background: #3ea450; }
.stat-bar.shield { background: #16283a; }
.stat-bar.shield i { background: #3f9bd1; }
.stat-bar span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 12px; text-shadow: 0 1px 1px #000; font-variant-numeric: tabular-nums; }
.progress { height: 12px; background: #222; max-width: 340px; border: 1px solid #000; }
.progress i { display: block; height: 100%; background: var(--accent); }
.queue { display: flex; gap: 4px; margin: 6px 0; }
.queue button { position: relative; width: 42px; height: 42px; background: #202024; border: 1px solid var(--line); padding: 0; overflow: hidden; }
.queue button:hover { border-color: var(--bad); }
.queue canvas { width: 100%; height: 100%; }
.queue i { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(120, 240, 150, .3); pointer-events: none; }
.sel-many { display: flex; flex-wrap: wrap; gap: 3px; max-height: 100%; overflow: hidden; }
.mini-unit { position: relative; width: 38px; height: 38px; padding: 0; background: #202024; border: 1px solid var(--line); }
.mini-unit:hover { border-color: var(--accent); }
.mini-unit canvas { width: 100%; height: 100%; display: block; }
.mini-unit i { position: absolute; bottom: 0; left: 0; height: 3px; }

#card { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; background: var(--panel); border: 1px solid var(--line); padding: 5px; }
#card button { position: relative; background: #24242a; border: 1px solid #47473f; padding: 0; display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; }
#card button:hover:not(:disabled) { border-color: var(--accent); background: #30303a; }
#card button.active { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; }
#card button:disabled { cursor: not-allowed; }
#card button:disabled canvas, #card button:disabled .glyph { opacity: .4; filter: grayscale(.5); }
#card button.locked canvas { opacity: .22; filter: grayscale(1); }
#card canvas { width: 40px; height: 40px; }
#card .glyph { font-size: 21px; }
#card .tname { font: 600 8.5px/1.15 var(--sans); padding: 9px 1px 1px; text-align: center; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; color: #e6dfc8; }
#card button:disabled .tname { opacity: .45; }
#card kbd { position: absolute; top: 1px; right: 2px; font: 700 9px var(--sans); color: var(--accent); }
#card .cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); font: 700 15px var(--sans); }

#tooltip {
  position: absolute; right: 8px; bottom: 198px; width: 290px; background: rgba(13,13,16,.97); border: 1px solid var(--accent); padding: 8px 10px; z-index: 8; pointer-events: none;
}
#tooltip p { margin: 4px 0 0; color: #cfcab9; }
#tooltip .stat { color: var(--dim); font-size: 11px; }
#tooltip .need { color: var(--bad); }
.cost { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* With the tech panel open, keep messages and tooltips beside it instead of beneath. */
#hud.tech-open #tooltip { right: min(600px, 96vw); }
#hud.tech-open #log { left: calc((100vw - min(590px, 94vw)) / 2); }

/* ---------------------------------------------------------- Tech panel */
#tech {
  position: absolute; top: 44px; right: 0; bottom: 186px; width: min(590px, 94vw); overflow-y: auto; background: rgba(15,15,18,.97); border-left: 1px solid var(--line); padding: 10px 14px 18px; z-index: 6;
}
.tech-head { display: flex; justify-content: space-between; align-items: flex-start; }
.tech-head h2 { margin: 0; font: 700 22px var(--serif); color: var(--accent); }
.tech-head span { color: var(--dim); }
#tech-close { background: none; border: 1px solid var(--line); width: 26px; height: 26px; border-radius: 3px; }
#tech h3 { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .12em; margin: 14px 0 6px; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
#tech h3.future { color: var(--dim); }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 5px; }
.tech { display: flex; flex-direction: column; gap: 2px; text-align: left; background: #1d1d21; border: 1px solid #3c3c3b; border-left-width: 3px; padding: 5px 8px; min-height: 44px; }
.tech b { font-size: 12px; font-weight: 600; }
.tech small { color: var(--dim); }
.tech.tag-tree { border-left-color: var(--accent); }
.tech.tag-doctrine { border-left-color: #d776ff; }
.tech.can { background: #2b2b2f; border-color: var(--accent); }
.tech.can:hover { background: #3a3a3d; }
.tech.done { background: #1b2a1e; border-color: #3f7a4b; }
.tech.done b { color: var(--good); }
.tech.active { background: #2b2717; border-color: #e8c35a; }
.tech.age, .tech.prereq, .tech.locked-out, .tech.nohost { opacity: .45; }
.tech.available:not(.can) { opacity: .75; }
.age-card { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.age-card.ready { border-color: var(--accent); }
.age-card ul { margin: 4px 0 0; padding-left: 16px; color: #ffd27a; }
.age-card p { margin: 4px 0 0; color: var(--good); }
.age-card button { background: #e9e3d2; color: #16161a; font-weight: 700; padding: 7px 14px; border: none; border-radius: 3px; flex: none; }
.age-card button:disabled { background: #36363a; color: #807d72; cursor: not-allowed; }
.research-list { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.research-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 34px 22px; gap: 6px; align-items: center; }
.research-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.research-row .bar { height: 8px; background: #222; border: 1px solid #000; }
.research-row .bar i { display: block; height: 100%; background: var(--accent); }
.research-row button { background: none; border: 1px solid var(--line); padding: 0; height: 20px; color: var(--dim); }

/* ------------------------------------------------------- Pause/help/end */
#paused { position: absolute; top: 34%; left: 50%; transform: translate(-50%,-50%); font: 700 46px var(--serif); color: #fff; text-shadow: 0 2px 12px #000; letter-spacing: .1em; }
#help { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); z-index: 20; pointer-events: auto; padding: 16px; }
.help-box { position: relative; width: min(860px, 100%); max-height: 90vh; overflow: auto; background: #151518; border: 1px solid var(--accent); padding: 18px 22px; }
.help-box h2 { font: 700 26px var(--serif); margin: 0; color: var(--accent); }
.help-box h3 { margin: 12px 0 4px; font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); }
.help-box ul, .help-box ol { margin: 0; padding-left: 18px; }
.help-box li { margin: 3px 0; }
.help-box p { margin: 0; }
.help-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
#help .sound-check { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 36px; margin-bottom: 12px; }
#sound-test { background: #e9e3d2; color: #16161a; border: none; border-radius: 3px; padding: 6px 12px; font-weight: 700; }
.meter { display: inline-block; width: 120px; height: 8px; background: #2a2a2d; border: 1px solid #000; }
.meter i { display: block; height: 100%; width: 0; background: var(--good); }
#sound-status { color: var(--dim); }
.link-btn { background: none; border: none; color: var(--dim); text-decoration: underline; padding: 2px 6px; }
.link-btn:hover { color: var(--ink); }
#help-close { position: absolute; top: 12px; right: 12px; background: none; border: 1px solid var(--line); width: 28px; height: 28px; }

#end { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(4,4,8,.74); padding: 16px; }
.end-box { background: #151518; border: 1px solid var(--line); padding: 26px 34px; text-align: center; width: min(720px, 100%); }
.end-box h1 { margin: 0; font: 700 56px var(--serif); }
.end-box h1.win { color: #f0cb7a; }
.end-box h1.lose { color: var(--bad); }
.end-box p { color: var(--dim); }
#end-stats { width: 100%; border-collapse: collapse; margin: 14px 0; font-variant-numeric: tabular-nums; }
#end-stats th { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: 3px 6px; }
#end-stats td { padding: 5px 6px; border-top: 1px solid #2c2c2c; }
.end-box button { background: #e9e3d2; color: #16161a; font-weight: 700; padding: 8px 20px; border: none; border-radius: 3px; margin: 0 4px; }
#watch { background: #2a2a2e; color: var(--ink); }

@media (max-width: 860px) {
  #bottom { grid-template-columns: 150px minmax(0, 1fr) 190px; height: 152px; }
  #minimap { width: 132px; height: 132px; }
  #mini-wrap { padding: 2px; }
  #tooltip { bottom: 160px; }
  #tech { bottom: 152px; }
  #btn-tech { min-width: 130px; }
  #card canvas { width: 30px; height: 30px; }
  #resources { gap: 8px; }
}

/* Research lives on buildings; the panel only reports progress. */
.tech-note { margin: 0 0 8px; color: var(--dim); font-size: 12px; }
#selection .research-row { display: grid; grid-template-columns: max-content 120px auto auto; justify-content: start; gap: 6px; align-items: center; font-size: 12px; margin-top: 4px; }
#selection .research-row .bar { height: 6px; background: #2c2c33; }
#selection .research-row .bar i { display: block; height: 100%; background: var(--accent); }
#selection .research-row button { background: none; border: 1px solid #47473f; color: inherit; padding: 0 5px; }
#tooltip ul.need { margin: 4px 0 0; padding-left: 16px; }