/* Shared visual language from the approved campaign review. Scoped to campaign content. */
.cp-simple {
/* Pilot-first cards. Extra loadout details depend on the card's available width. */
.mech-roster {
  grid-template-columns: repeat(3, minmax(0, 440px));
  max-width: var(--w-page); gap: 10px; justify-content: start;
}
.mech-card {
  /* Stretch the inner layout to the row height, including unselected cards. */
  display:grid; align-items:stretch; clip-path:none;
  --role-color: #f1b784; container: pilot-card / inline-size;
  --skill-size: 48px; --skill-gap: 4px; --loadout-padding: 10px;
  --loadout-width: calc(3 * var(--skill-size) + 2 * var(--skill-gap) + 2 * var(--loadout-padding));
  height: auto; min-height: 0; padding: 0; border: 1px solid var(--line);
  background: #0c202a; text-align: left;
}
.mech-card[data-pilot="1"] { --role-color: #e7a4ba; }
.mech-card[data-pilot="2"] { --role-color: #94d4b9; }
.mech-card[data-pilot="3"] { --role-color: #c3b0e9; }
.mech-card[data-pilot="4"] { --role-color: #ead28b; }
.mech-card[data-pilot="5"] { --role-color: #8bcde8; }
.mech-card-content {
  position: relative; width:100%; min-height: 132px; display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 80px;
}
.mech-pick {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  padding: 0; border: 0; background: transparent;
}
.mech-pick:hover { background: #8ecfe608; }
.mech-pick:focus-visible { outline-offset: -3px; }
.pilot-visual { grid-column: 1; position: relative; min-width: 0; overflow: hidden; }
.pilot-skill-badges {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
  display: flex; justify-content: center; align-items: end; gap: 3px;
  padding: 22px 4px 6px; pointer-events: none;
  background: linear-gradient(transparent, #051219e6 40%);
}
.pilot-skill-badges:empty { display: none; }
.pilot-skill-badge {
  flex: 0 1 30px; min-width: 0; aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid #b49764; border-radius: 3px; color: var(--amber); background: #172831ed;
}
.pilot-skill-badge svg { width: 22px; height: 22px; max-width: 100%; }
.mech-card .pilot-portrait {
  left: 0; right: auto; top: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center top; opacity: 1; filter: none;
  /* Feather the cropped portrait edge into the shared card background. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}
.mech-card .pilot-info {
  grid-column: 2; min-width: 0; position: relative;
  padding: 17px 10px 14px; pointer-events: none;
}
.mech-card .pilot-info > b {
  display: block; margin: 0; max-width: none;
  color: var(--amber);
  font: 600 21px/1.15 var(--display); letter-spacing: .03em; overflow-wrap: anywhere;
}
.pilot-real-name { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; color: #a7c0cd; overflow-wrap: anywhere; }
.mech-meta {
  position: relative; width: 100%; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; pointer-events: none;
}
.mech-card .mech-name {
  font: 600 13px/1.2 var(--display); color: var(--text);
  text-shadow: 0 1px 4px #050f15; overflow-wrap: anywhere;
}
.mech-card .role-tag {
  display: inline-block; padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--role-color) 55%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--role-color) 12%, #07131b);
  color: var(--role-color); font-size: 10px; line-height: 1.3;
  letter-spacing: .06em; font-weight: 600;
}
.mech-visual {
  grid-column: 3; min-width: 0; position: relative; display: grid; place-items: center;
  grid-template-rows: auto 1fr; gap: 8px; padding: 10px 6px 6px;
}
/* Selection never changes the card's geometry. Labels stay above the model. */
.mech-card .mech-mini {
  position: static; width: 100%; height: 90px; max-width: 110px;
  object-fit: contain; opacity: 1;
}
.mech-card[data-selected="true"] {
  background: #29281f; border-color: var(--amber); box-shadow: inset 0 0 0 1px #f5c27345;
}
.mech-card .chosen { width: 6px; height: 6px; top: 10px; right: 10px; }
.mech-specs, .move-buttons { display: none; }
@container pilot-card (min-width: 350px) {
  .mech-card-content {
    min-height: 222px;
    grid-template-columns: 90px var(--loadout-width) minmax(0, 1fr);
  }
  .mech-card .pilot-info { padding: 15px var(--loadout-padding) 14px; }
  .mech-visual { padding: 14px 8px 8px; }
  .mech-meta { gap: 5px; }
  .mech-card .mech-name { font-size: 16px; }
  .mech-card .mech-mini { height: 148px; }
  .mech-specs { display: grid; gap: 8px; margin-top: 13px; }
  .spec > span { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; color: #a7c0cd; }
  .spec strong { font-size: 12px; font-weight: 600; color: #c6ebcd; font-variant-numeric: tabular-nums; }
  .spec i { display: block; height: 3px; background: #28404b; margin-top: 3px; }
  .spec em { display: block; height: 100%; background: #a5d8af; }
  .spec.boost strong { color: var(--cyan); }
  .spec.boost em { background: var(--cyan); }
  .move-buttons { display: flex; gap: var(--skill-gap); margin-top: 12px; }
}
@container pilot-card (min-width: 380px) {
  .mech-card-content { grid-template-columns: 32% var(--loadout-width) minmax(0, 1fr); }
}
.move-button {
  position: relative; z-index: 3; pointer-events: auto;
  width: var(--skill-size); flex: 0 0 var(--skill-size); height: 52px; min-width: 44px; padding: 0;
  border: 1px solid #54737e; border-radius: 3px; background: #08151e;
}
.mech-card .move-button img {
  position: static; width: 40px; height: 40px; max-width: none; opacity: 1;
  object-fit: contain; display: block; margin: -2px auto 0; filter: none;
}
.move-button span { display: block; font: 600 9px/1 var(--font); color: #b7d2df; }
.move-button.ultimate { border-color: #aa8553; background: #2a241a; }
.move-button.ultimate span { color: var(--amber); }
.move-button[aria-expanded="true"] { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Compact desktop cards keep abilities beside the portrait, inside its column. */
@container pilot-card (max-width:349px) {
  :root:not(.ph) &.simple-board .mech-card-content { min-height:126px; padding-bottom:6px; grid-template-columns:28% minmax(0,1fr) 42px; }
  :root:not(.ph) &.simple-board .mech-card .pilot-info { position:relative; display:flex; flex-direction:column; padding:8px 5px 0; }
  :root:not(.ph) &.simple-board .mech-visual { display:grid; padding:4px 3px; gap:4px; }
  :root:not(.ph) &.simple-board .mech-meta { display:flex; gap:2px; min-width:0; }
  :root:not(.ph) &.simple-board .mech-card .mech-name { font-size:12px; max-width:100%; }
  :root:not(.ph) &.simple-board .mech-card .role-tag { font-size:9px; max-width:100%; padding:2px 3px; white-space:normal; overflow-wrap:anywhere; letter-spacing:0; }
  :root:not(.ph) &.simple-board .mech-card .mech-mini { display:block; height:46px; }
  :root:not(.ph) &.simple-board .move-buttons { display:flex; position:static; justify-content:start; gap:3px; margin:auto 0 0; }
  :root:not(.ph) &.simple-board .move-button { width:100%; flex:1 1 0; min-width:0; max-width:36px; height:36px; min-height:36px; }
  :root:not(.ph) &.simple-board .move-button img { width:min(26px,100%); height:26px; margin:0 auto; }
  :root:not(.ph) &.simple-board .move-button span { font-size:8px; }
}
.ability-preview {
  max-width: var(--w-l); display: flex; align-items: center; gap: 14px;
  margin-top: 12px; padding: 12px 14px; border: 1px solid #54737e; background: #101f28;
  scroll-margin-bottom: 100px;
}
.ability-preview[hidden] { display: none; }
&.simple-board .ability-preview { position:absolute; inset:auto 12px 12px; z-index:5; margin:0; max-width:680px; box-shadow:0 8px 24px #0009; }
.ability-preview > img { width: 58px; height: 58px; object-fit: contain; }
.ability-preview small { color: var(--cyan); font-size: 10px; }
.ability-preview h4 { margin: 3px 0; font: 600 19px var(--display); }
.ability-preview p { color: #b9ced8; font-size: 12px; }
.close-ability { align-self: start; margin-left: auto; min-width: 44px; padding: 4px; font-size: 22px; }
.brief-copy .mini-enemies { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); }
.launch-bar { box-shadow: 0 -6px 16px #0005; }
/* Fit the full roster on shorter desktop windows. */
@media(max-height:1400px) and (min-width:1000px) {
  &.simple-board .mech-card .pilot-info { padding-block:8px; }
  &.simple-board .mech-card .pilot-info > b { font-size:19px; }
  &.simple-board .mech-specs { margin-top:6px; gap:4px; }
  &.simple-board .move-buttons { margin-top:6px; }
  &.simple-board .mech-visual { padding-top:8px; }
  &.simple-board .mech-meta { gap:3px; }
  @container pilot-card (min-width:350px) {
    &.simple-board .mech-card-content { min-height:168px; }
    &.simple-board .mech-card .mech-mini { height:100px; }
  }
  @container pilot-card (max-width:349px) {
    &.simple-board .mech-card .mech-mini { height:64px; }
    &.simple-board .mech-visual { padding-bottom:4px; }
  }
}
@media(max-width:980px) {
  .mech-roster { grid-template-columns: repeat(2, minmax(0, 440px)); }
  .mech-card .pilot-info > b { font-size: 17px; }
  .pilot-real-name { font-size: 10px; }
}
@media(max-height:850px) and (min-width:1000px) {
  @container pilot-card (max-width:240px) {
    .mech-card-content { grid-template-columns:42% minmax(0,1fr); grid-template-rows:1fr; min-height:132px; }
    .pilot-visual { grid-row:1 / -1; }
    .mech-card .pilot-info { padding:8px 5px; }
    &.simple-board .mech-card .pilot-info > b { font-size:16px; }
    .pilot-real-name { font-size:10px; }
    .mech-visual { display:contents; }
    .mech-meta,.mech-card .mech-mini { display:none; }
  }
}
/* Share the portrait's lower edge across all desktop briefing card widths. */
:root:not(.ph) &.simple-board .mech-card { --skill-size:36px; }
:root:not(.ph) &.simple-board .mech-card-content { padding-bottom:6px; }
:root:not(.ph) &.simple-board .mech-card .pilot-info { display:flex; flex-direction:column; padding-bottom:0; }
:root:not(.ph) &.simple-board .move-buttons { margin-top:auto; padding-top:6px; }
:root:not(.ph) &.simple-board .move-button { height:36px; min-height:36px; min-width:0; }
:root:not(.ph) &.simple-board .move-button img { width:min(26px,100%); height:26px; margin:0 auto; }
:root:not(.ph) &.simple-board .move-button span { font-size:8px; }
@media(max-height:760px) and (min-width:1000px) {
  @container pilot-card (max-width:349px) {
    :root:not(.ph) &.simple-board .mech-card-content { min-height:110px; }
  }
}
/* Mobile is landscape only. Keep the two-column selection and native scrolling. */
@media(orientation:landscape) and (max-height:500px) {
  .review-bar { min-height: 34px; }
  .base-header { min-height: 68px; }
  .brand h1 { font-size: 29px; }
  .mission-hero { height: 104px; }
  .workspace { margin-top: 12px; }
  .launch-bar { padding-block: 8px; }
  .launch-bar .primary { min-height: 44px; padding-block: 8px; font-size: 19px; }
}

}