/* FIELD / 6.48.0. Static material layers: no backdrop blur or animated texture filters. */
:root {
  --surface: #172120;
  --raised: #29332e;
  --line: #596153;
  --ink: #e7e8d7;
  --muted: #b0b7a5;
  --dim: #85917f;
  --accent: #c3c99d;
  --gold: #d5b06b;
  --good: #9cb58c;
  --bad: #cf8269;
  --field-surface:
    url('../assets/ui/field-wear.svg'), linear-gradient(115deg, #38403544, transparent 43%),
    linear-gradient(#222d2afc, #121c1bfa);
}
.panel,
#classicTop,
#classicHint,
.settingsShell,
.upgradeBox,
.difficultyShell,
.classicOverlayPanel {
  border-radius: 0;
  border: 1px solid #69705e;
  border-image: url('../assets/ui/field-frame.svg') 18 / 13px / 2px stretch;
  background: var(--field-surface);
  background-size:
    320px 180px,
    100% 100%,
    100% 100%;
  box-shadow:
    0 5px 14px #0007,
    inset 0 0 0 5px #0a1313,
    inset 0 0 0 6px #535b4655;
  backdrop-filter: none;
}
#topLeft h1,
#classicTop h1 {
  color: #e4e6d4;
  padding: 0 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #72816b55;
  position: relative;
  text-shadow: 0 2px 0 #080e0e;
}
#topLeft h1::after,
#classicTop h1::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 32px;
  height: 2px;
  background: #b7a66b;
  box-shadow:
    36px 0 #a6996233,
    42px 0 #a699621a;
}
#topLeft h1 small,
#classicTop h1 small,
#selectionIdle small {
  color: #afb895;
  font: 10px var(--mono);
  letter-spacing: 1.35px;
}
#performanceHud{position:fixed;right:16px;top:2px;padding:2px 7px;background:#12201de8;color:#c3d9c4;font:11px/1.3 monospace;letter-spacing:0;z-index:110;pointer-events:none;border-radius:3px}
#performanceHud[data-level="low"] b{color:#ec9a80}
#performanceHud[data-level="medium"] b{color:#e0cd87}
.mobile #performanceHud{right:8px;top:3px;font-size:10px}
.mobile #performanceHud .perfDetail{display:none}
#waveInfo {
  border-image-width: 11px;
  background-image:
    url('../assets/ui/field-wear.svg'),
    linear-gradient(90deg, #6e754e33, transparent 24%, transparent 76%, #6e754e33),
    linear-gradient(#26312d, #17201e);
  text-shadow: 0 2px #101814;
  letter-spacing: 2px;
}
#waveInfo::before,
#waveInfo::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 22px;
  height: 10px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(120deg, #bca265 0 3px, transparent 3px 7px);
  opacity: 0.62;
}
#waveInfo::before {
  left: 15px;
}
#waveInfo::after {
  right: 15px;
}
#enemyLeft {
  padding: 0 20px;
}
#waveProgressBar,
#wavePressureBar,
#baseBarWrap,
#hpBarWrap,
.spBar {
  height: 5px;
  background: #070f0f;
  box-shadow:
    0 1px #7e88613d,
    inset 0 1px 3px #000;
}
#waveProgressFg,
#wavePressureFg,
#baseBar,
#hpBar,
.spBarFg {
  background-image: repeating-linear-gradient(90deg, transparent 0 15px, #111b1966 15px 17px) !important;
  box-shadow: inset 0 1px #f4ffd544;
}
#resDock {
  border: 0;
  background: none;
  box-shadow: none;
  text-shadow:
    0 2px 2px #060b09,
    0 0 6px #060b09;
}
#resDock .resourceLabel {
  color: #e3e7d9;
}
.resourceGold {
  color: #efcf86;
}
.resourcePopulation {
  color: #d5e7be;
}
.resourceValue b {
  text-shadow:
    0 2px 2px #060b09,
    0 0 8px #060b09;
}
.resourcePopulation.isFull,
.resourcePopulation.isFull .resourceLabel {
  color: #ecac88;
}
#dockPopStatus {
  color: #acbc95;
}
.resourcePopulation.isFull #dockPopStatus {
  color: #edb394;
}
#mmDock {
  padding: 8px;
  background: #18221c;
  border-image-width: 10px;
}
#mmDock canvas {
  width: 100%;
  height: 100%;
  opacity: 0.92;
}
#mmDock::before {
  bottom: calc(100% + 8px);
  padding: 5px 9px 5px 13px;
  background: linear-gradient(90deg, #29342df2, #1a2422e6);
  border-left: 3px solid #b49d63;
  color: #c8cfaf;
  font-size: 9px;
}
#mmDock::after {
  content: '';
  position: absolute;
  inset: 8px;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #07100e1a 3px 4px);
  box-shadow:
    inset 0 0 14px #08130e99,
    inset 0 0 0 1px #a6b38655;
}
#cmdcard {
  position: relative;
}
#selPanel::after,
#selectionIdle::after {
  content: '';
  position: absolute;
  bottom: 11px;
  right: 15px;
  width: 84px;
  height: 4px;
  opacity: 0.35;
  background: repeating-linear-gradient(90deg, #a8b08d 0 1px, transparent 1px 5px);
  pointer-events: none;
}
#spPortraitFrame {
  border: 1px solid #7f8969;
  border-radius: 0;
  background: #14231d;
  box-shadow:
    0 0 0 2px #101916,
    0 0 0 3px #58624866;
}
#spIcon {
  color: #c7d3a7;
  background:
    linear-gradient(0deg, #172a1e88, #34453444),
    repeating-linear-gradient(0deg, transparent 0 3px, #8caa7614 3px 4px),
    repeating-linear-gradient(90deg, #122016 0 15px, #75866522 15px 16px);
}
#spPortraitFrame::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid #a8ba8144;
  clip-path: polygon(
    0 0,
    20% 0,
    20% 2%,
    80% 2%,
    80% 0,
    100% 0,
    100% 20%,
    98% 20%,
    98% 80%,
    100% 80%,
    100% 100%,
    80% 100%,
    80% 98%,
    20% 98%,
    20% 100%,
    0 100%
  );
  pointer-events: none;
}
.spName {
  border-bottom: 1px solid #6e7a5b44;
  padding-bottom: 6px;
}
#cmdcard {
  padding: 7px;
  border-image-width: 8px;
  background-color: #111b18;
}
.cmdBtn,
.cmdSlot {
  border-radius: 0;
  border-color: #59654b;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
  background: linear-gradient(135deg, #a1ad7733, transparent 36%), linear-gradient(#374335, #202b24);
  box-shadow:
    inset 0 1px #c8cf9d44,
    inset 1px 0 #aebc8933,
    inset 0 -2px #080e0caa;
}
.cmdBtn::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  height: 2px;
  width: 7px;
  background: #9cac7f66;
  pointer-events: none;
}
.cmdBtn .ci {
  color: #d3dac0;
}
.cmdBtn .cn {
  color: #d2d8c1;
  text-shadow: 0 1px #0a140d;
}
.cmdBtn .ck {
  color: #e0d0a0;
  font-size: 9px;
}
.cmdBtn .cp {
  color: #cbb789;
}
.cmdBtn:hover,
.cmdBtn:focus-visible {
  background: linear-gradient(#566047, #303e2b);
  border-color: #c4ce9b;
  box-shadow:
    inset 0 1px #e2e8b76b,
    inset 0 -2px #121b0e;
}
.cmdBtn.active {
  background: linear-gradient(#626d43, #3b4a2b);
  border-color: #cad49b;
}
.cmdSlot {
  background: repeating-linear-gradient(135deg, #67735409 0 1px, transparent 1px 6px), #111c17;
  border-color: #404d3980;
  box-shadow: inset 0 1px 4px #0006;
}
kbd {
  border-color: #6a735b;
  color: #c9d0b6;
  background: linear-gradient(#3c4534, #222d22);
  box-shadow:
    inset 0 1px #b8c48b22,
    0 1px #080f0c;
}
.cmdBtn:active,
button:active {
  box-shadow: inset 0 2px 6px #0008;
}
.spBtn,
button,
.btn.ghost,
.settingsNav button,
.previewBtn {
  border-radius: 0;
  border-color: #657056;
  background: linear-gradient(115deg, #8594651a, transparent 60%), linear-gradient(#344132, #222d24);
  box-shadow:
    inset 0 1px #bdc59f22,
    inset 0 -1px #0e170c;
}
.btn,
.primary {
  background: linear-gradient(#c5c89a, #a1ad7d);
  color: #1d261a;
  border-color: #c6cba3;
  box-shadow:
    inset 0 1px #f4f4ce66,
    0 3px 8px #0004;
}
.card,
.classicCard,
.difficultyCard,
.modeCard {
  border-radius: 0;
  background-image: var(--field-surface);
  box-shadow:
    inset 0 0 0 3px #111a1766,
    0 5px 16px #0005;
}
.difficultyCard {
  border-top: 3px solid var(--severity, #9aab7d);
}
.settingsNav {
  background: #17231ee0;
}
.settingsNav button.active {
  border-left: 3px solid #c1ba7f;
  background: #3a4830;
  color: #e6e8ce;
}
#classicTop {
  border-image-width: 12px;
}
@media (max-width: 760px) {
  #mmDock canvas {
    width: 100%;
    height: 100%;
  }
  #waveInfo::before,
  #waveInfo::after {
    display: none;
  }
}

/* v8.2.0 — construction gold, research cyan; labels also carry state. */
#cmdcard .category-build{border-color:#a47d43;background:linear-gradient(145deg,#343023,#1e2525)}
#cmdcard .category-build .ci{color:#e4b86e}
#cmdcard .category-tech{border-color:#458b9a;background:linear-gradient(145deg,#203740,#17272d)}
#cmdcard .category-tech .ci{color:#8de1ed}
#cmdcard .researchProgress{background:#63d4e4!important;height:5px;opacity:1}
.researchStatus{position:absolute;bottom:6px;left:3px;right:3px;font-size:10px;text-align:center;color:#aff4ff;background:#10252ee8;pointer-events:none}
#upgradeQueueDock{position:fixed;right:16px;top:115px;width:205px;max-height:34vh;overflow:auto;pointer-events:auto;background:#101c24eb;border:1px solid #397689;border-radius:5px;padding:7px;color:#d5edf2;font-size:12px;z-index:22}
#upgradeQueueDock[hidden]{display:none}
.researchRow{padding:5px;border-bottom:1px solid #344650}.researchRow small{display:block;color:#87c8d2;margin:3px 0}.researchRow .globalQueueBar{height:5px;background:#102329}.researchRow .globalQueueBar i{display:block;height:100%;background:#63d4e4}
.mobile #upgradeQueueDock{right:8px;top:75px;width:145px;max-height:22vh;font-size:10px}

/* Advanced research keeps every breakthrough reachable in the fixed command dock. */
#cmdcard{overflow-y:auto;align-content:start;scrollbar-width:thin}
#cmdcard .cmdBtn,#cmdcard .cmdSlot{min-height:58px}