/* 2026-10-19 alien/dark-alien occupation: five-stage reward preview. */
.fleet-occupation-rewards {
  display: grid;
  gap: 6px;
  margin: 8px 0 10px;
  border: 1px solid rgb(255 178 74 / .3);
  border-left: 3px solid #ffb24a;
  border-radius: 2px;
  padding: 8px 9px;
  background: linear-gradient(135deg, rgb(36 25 10 / .72), rgb(7 14 16 / .94));
  box-shadow: inset 0 0 18px rgb(255 178 74 / .05);
}
.fleet-occupation-rewards > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fleet-occupation-rewards > header span { display: block; color: #ffc46b; font: 800 10px var(--ref-font-data); letter-spacing: .12em; }
.fleet-occupation-rewards > header strong { display: block; margin-top: 2px; color: #fff3e0; font-size: 15px; }
.fleet-occupation-rewards > header em { flex: 0 0 auto; border: 1px solid rgb(255 178 74 / .35); padding: 3px 6px; color: #ffc46b; font: 800 10px var(--ref-font-data); font-style: normal; }
.fleet-occupation-rewards > p { margin: 0; color: rgb(238 218 188 / .82); font-size: 10px; line-height: 1.55; }
.fleet-occupation-stage-grid { display: grid; grid-template-columns: repeat(5, minmax(76px, 1fr)); gap: 5px; overflow-x: auto; padding-bottom: 3px; }
.fleet-occupation-stage-grid article { min-width: 0; border: 1px solid rgb(255 178 74 / .22); border-radius: 6px; padding: 7px 6px 6px; background: linear-gradient(180deg, rgb(255 196 107 / .06), rgb(6 14 16 / .82)); box-shadow: inset 0 1px rgb(255 255 255 / .08); }
.fleet-occupation-stage-grid article.claimed { border-color: rgb(96 230 140 / .45); background: rgb(12 44 25 / .55); }
.fleet-occupation-stage-grid article header { display: grid; gap: 1px; }
.fleet-occupation-stage-grid article header span { color: #cbb493; font-size: 9px; white-space: nowrap; }
.fleet-occupation-stage-grid article header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff1da; font-size: 11px; }
.fleet-occupation-stage-grid article header em { color: #ffd488; font: 800 9px var(--ref-font-data); font-style: normal; white-space: nowrap; }
.fleet-occupation-stage-grid article p { margin: 4px 0 0; color: rgb(226 241 244 / .78); font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .fleet-occupation-stage-grid { grid-template-columns: repeat(5, 72px); }
}