/* Illustrated command deck. Interactive text, geography and controls remain DOM/canvas. */
#campaign {
  --cp-bg: #040d13;
  --cp-surface: #081319;
  --cp-rule: #29434e;
  --cp-cyan: #9cc6d3;
  --cp-amber: #f7bf68;
  --cp-display: 'Barlow Condensed', var(--cjk), sans-serif;
  background: #040b10;
}
#campaign::after {
  content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: url('../img/campaign/operations/cockpit-frame.webp') center / 100% 100% no-repeat;
  mask-image: linear-gradient(to top, #000 0 7%, transparent 9%), linear-gradient(to right, #000, transparent 2%, transparent 98%, #000);
}
#campaign .cp-sheet { background: radial-gradient(ellipse at 50% 20%, #10242d55, transparent 70%), #040d13ef; }
/* Keep the cockpit trim behind the menu content, visible only in its gutters. */
#campaign .cp-top, #campaign .cp-body { position: relative; z-index: 9; }
#campaign .cp-scene { opacity: .06; }
#campaign .cp-top { background: linear-gradient(180deg, #0e1c23, #030b10); border-bottom: 1px solid #32515d; }
#campaign .cp-head h1 { font-family: var(--cp-display); font-weight: 700; text-transform: uppercase; letter-spacing: .025em; }
#campaign .cp-funds span { text-transform: uppercase; font: 500 13px var(--cp-display); color: #a6c6d3; letter-spacing: .13em; }
#campaign .cp-funds b { font-family: var(--cp-display); color: #f5d8ae; letter-spacing: .02em; }
#campaign .cp-support > div { display: flex; align-items: center; gap: 10px; }
#campaign .cp-support b { color: #9ee6f4; }
#campaign .cp-support meter { width: 80px; height: 10px; border: 1px solid #3c5a67; background: #08141b; border-radius: 0; }
#campaign .cp-support meter::-webkit-meter-bar { background: #08141b; border-radius: 0; border: 0; }
#campaign .cp-support meter::-webkit-meter-optimum-value { background: #9ee6f4; border-radius: 0; }
#campaign .cp-support meter::-moz-meter-bar { background: #9ee6f4; }
#campaign .go {
  background: linear-gradient(115deg, #ffce79, #c78b43);
  border: 1px solid #ffe0a7; box-shadow: inset 0 0 0 3px #e7ac5733, 0 0 24px #d18a3026;
}
#campaign[data-view="board"] .cp-top {
  display: grid; grid-template-columns: 28px minmax(180px, 1fr) minmax(320px, 1.5fr) auto auto;
  gap: 18px; padding: 12px 36px; min-height: 86px;
}
#campaign[data-view="board"] .cp-back {
  border: 0; background: transparent; width: 28px; min-width: 0; padding: 0;
  font: 500 38px/1 var(--cp-display); color: #91bbc8;
}
#campaign[data-view="board"] .cp-head { display: flex; gap: 14px; align-items: center; }
#campaign[data-view="board"] .cp-head h1 { order: 0; font-size: clamp(32px, 3vw, 54px); line-height: 1; margin: 0; }
#campaign[data-view="board"] .cp-head .cp-eyebrow { order: 1; font-size: 9px; letter-spacing: .16em; max-width: 78px; line-height: 1.6; }
#campaign[data-view="board"] .cp-head p { display: none; }
#campaign[data-view="board"] .cp-funds { padding-left: 18px; margin: 0; }
#campaign[data-view="board"] .cp-funds b { font-size: 27px; line-height: 1.2; }
#campaign[data-view="board"] .cp-tabs {
  justify-self: center; width: 100%; max-width: var(--w-l);
  align-self: stretch; align-items: stretch; margin: 0; border: 1px solid #253c46;
  background: linear-gradient(180deg, #0b1920aa, #02090ecc); clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 100%, 0 100%);
  padding-inline: 10px;
}
#campaign[data-view="board"] .cp-tabs button {
  flex: 1; font: 600 18px/1 var(--cp-display); text-transform: uppercase; color: #789cab;
  border: 0; padding: 10px 12px; letter-spacing: .05em; position: relative;
}
#campaign[data-view="board"] .cp-tabs button + button::before { content: ''; position: absolute; top: 22%; bottom: 22%; left: 0; width: 1px; background: #29424b; }
#campaign[data-view="board"] .cp-tabs button[aria-pressed="true"] { color: #ffd58e; background: radial-gradient(ellipse at bottom, #da922929, transparent 80%); box-shadow: inset 0 -2px #ffc766; text-shadow: 0 0 14px #ffc76655; }
#campaign[data-view="board"] .cp-body { padding: 12px 30px max(56px, 9vh); gap: 13px; }
/* (the list and the dossier keep their widths; the map takes the rest of the window) */
#campaign .cp-inc {
  display: grid; grid-template-columns: 90px minmax(0, 1fr); grid-template-rows: auto;
  gap: 11px; min-height: 94px; padding: 6px; position: relative; align-items: stretch;
  border: 1px solid #29424c; border-left-width: 3px;
  background: linear-gradient(110deg, #10232bbb, #030c11ee);
}
#campaign .cp-inc.sel { background: linear-gradient(110deg, #66401de3, #251c12df); border-color: #f7c472; box-shadow: inset 0 0 0 1px #ffda8b33, 0 0 16px #f7b55611; }
#campaign .cp-tag-kind { font-size: 9px; letter-spacing: .02em; }
/* (the missions flown in order: the one up now tagged in amber, the rest dimmed behind a padlock till it's won;
   today's alerts under their own heading, open beside them) */
#campaign .cp-tag-kind.current { color: #ffc677; }
#campaign .cp-tag-kind.locked { display: inline-flex; align-items: center; gap: 4px; color: #8c9eaa; }
#campaign .cp-inc.locked { cursor: not-allowed; opacity: .55; border-color: #22363f; }
#campaign .cp-inc-detail {
  display: flex; flex-direction: column; gap: 13px; border: 1px solid #2c4956; padding: 12px;
  background: linear-gradient(130deg, #09141be8, #02090ded); overflow: hidden;
}
/* (a fixed column, so a fixed size: a long title takes two even lines) */
#campaign .cp-launch { margin-top: auto; flex-shrink: 0; min-height: 52px; font: 600 22px/1 var(--cp-display); text-transform: uppercase; gap: 8px; }
#campaign .cp-launch > span:last-child { font: 600 32px/1 var(--cp-display); }
.cp-saving:not(.fight) { bottom: calc(6px + var(--safe-b)); min-height: 28px; }
.cp-saving:not(.fight).fail { min-height: 44px; }
#campaign .cp-report-hero { background: linear-gradient(90deg, #04101999, #04101966), var(--report-mech) 92% 45% / auto 75% no-repeat, linear-gradient(#041019ee, #041019cc), var(--location-image) center / cover no-repeat; }
#campaign .cp-report-hero h2 { font-family: var(--cp-display); }
#campaign .cp-debrief > .cp-buttons { bottom: min(-56px, -9vh); margin-bottom: min(-56px, -9vh); padding-bottom: max(48px, 9vh); background: #040d13f5; }

@media (min-width: 1800px) {
  #campaign .cp-inc { grid-template-columns: 112px minmax(0, 1fr); min-height: 108px; }
}
@media (max-width: 1350px) {
  #campaign[data-view="board"] .cp-top { grid-template-columns: 24px minmax(140px, 1fr) minmax(290px, 1.4fr) auto auto; gap: 10px; padding-inline: 24px; }
  #campaign[data-view="board"] .cp-head .cp-eyebrow { display: none; }
  #campaign .cp-support meter { display: none; }
  #campaign .cp-inc { grid-template-columns: 68px minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 1050px) {
  #campaign::after { background-image: url('../img/campaign/operations/cockpit-frame-small.webp'); }
  #campaign[data-view="board"] .cp-top { grid-template-columns: 24px 1fr auto auto; min-height: 0; row-gap: 10px; }
  #campaign[data-view="board"] .cp-tabs { grid-column: 1 / -1; grid-row: 2; min-height: 46px; }
  #campaign[data-view="board"] .cp-head h1 { font-size: 35px; }
  #campaign[data-view="board"] .cp-body { padding: 12px 18px max(42px, 9vh); }
  #campaign .cp-inc-detail { grid-column: 2; grid-row: 2; overflow: visible; }
}
@media (max-height: 800px) and (min-width: 1051px) {
  #campaign[data-view="board"] .cp-top { padding-block: 8px; min-height: 70px; }
  #campaign[data-view="board"] .cp-body { padding-bottom: max(42px, 9vh); gap: 8px; }
  #campaign .cp-inc-detail { gap: 9px; padding: 10px; }
  #campaign .cp-launch { min-height: 46px; font-size: 20px; }
}
@media (max-width: 650px) {
  #campaign::after { background-image: url('../img/campaign/operations/cockpit-frame-small.webp'); opacity: .65; }
  #campaign[data-view="board"] .cp-top { grid-template-columns: 20px 1fr auto; gap: 8px; padding: 10px 16px 6px; }
  #campaign[data-view="board"] .cp-head h1 { font-size: 34px; }
  #campaign[data-view="board"] .cp-funds { padding-left: 9px; }
  #campaign[data-view="board"] .cp-funds span { font-size: 10px; }
  #campaign[data-view="board"] .cp-funds b { font-size: 22px; }
  #campaign[data-view="board"] .cp-tabs { min-height: 43px; }
  #campaign[data-view="board"] .cp-tabs { max-width: none; }
  #campaign[data-view="board"] .cp-tabs button { font-size: 15px; padding: 8px 4px; }
  #campaign[data-view="board"] .cp-body { padding: 8px 12px 9vh; gap: 8px; }
  #campaign .cp-inc { grid-template-columns: 90px minmax(0, 1fr); min-height: 94px; gap: 10px; padding: 6px; }
  #campaign .cp-inc-detail { order: 2; padding: 12px; }
  #campaign .cp-debrief > .cp-buttons { bottom: -9vh; margin-bottom: -9vh; padding-bottom: 9vh; }
}
@media (max-height: 560px) and (min-width: 651px) {
  #campaign[data-view="board"] .cp-top { min-height: 62px; grid-template-columns: 20px minmax(120px, .65fr) minmax(280px, 1.4fr) auto; gap: 10px; padding: 6px 18px; }
  #campaign[data-view="board"] .cp-head h1 { font-size: 27px; }
  #campaign[data-view="board"] .cp-tabs { grid-row: 1; grid-column: 3; min-height: 44px; }
  #campaign[data-view="board"] .cp-tabs button { font-size: 15px; padding-inline: 6px; }
  #campaign[data-view="board"] .cp-support{ display: none; }
  #campaign[data-view="board"] .cp-body { padding-bottom: max(24px, 9vh); }
}