/* 特別任務 (js/campaign/specials.js): its group on top of the board, the card and hero with its art,
   the briefing (Commander Shen's order, the reward, and two global leaderboards), and its
   report. The board's own tokens; the event's accent is the Taipei flag's green. */
.cp-simple {
  --special:#7fe07a;
  & .rail-group.special { color:var(--special); border-bottom-color:var(--special); }
  & .mission-card.special { border-color:#3d6b3f; }
  & .mission-card.special[aria-pressed=true] { border-color:var(--special); box-shadow:inset 3px 0 var(--special); }
  & .mission-card.special[aria-pressed=true] h3,& .mission-card.special .mission-tag { color:var(--special); }
  & .mission-card .special-art { position:absolute; top:4px; right:6px; height:98px; width:auto; pointer-events:none; filter:drop-shadow(0 2px 6px #000c); }
  & .mission-hero.special>.special-art { position:absolute; right:18px; top:auto; bottom:-30%; height:150%; width:auto; object-fit:contain; opacity:1; z-index:1; pointer-events:none; filter:drop-shadow(0 4px 10px #000c); }
  & .mission-hero.special small { color:var(--special); }
  & .mission-hero.special>.special-heading { right:260px; }
  & .mission-hero.special>.special-reward { position:absolute; z-index:2; right:12px; top:8px; bottom:8px; width:238px; padding:6px 10px; background:#071b20ed; display:flex; flex-direction:column; justify-content:center; }
  & .mission-hero .special-reward h3 { margin:0 0 4px; font-size:11px; }
  & .mission-hero .special-reward ul { display:flex; align-items:center; gap:12px; margin:0; }
  & .mission-hero .special-reward li { display:flex; flex-wrap:wrap; gap:4px; }
  & .mission-hero .special-reward li b { font-size:18px; white-space:nowrap; }
  & .mission-hero .special-reward li:has(.special-paint) { flex:1; min-width:0; justify-content:end; }
  & .mission-hero .special-reward li:has(.special-paint) b { font-size:11px; white-space:normal; overflow-wrap:anywhere; text-align:right; }
  & .mission-hero .special-paint { width:52px; height:14px; }
  & .special-brief { min-height:0; overflow:auto; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:14px; align-content:start; }
  & .special-order { display:grid; gap:12px; align-content:start; }
  & .special-say { display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; align-items:start; padding:12px; border:1px solid var(--line); background:#0b1b22; }
  & .special-say.shen { border-left:3px solid var(--cyan); }
  & .special-say.pilot { border-left:3px solid var(--amber); }
  & .special-say b { display:block; margin-bottom:4px; color:var(--amber); font-size:12px; }
  & .special-say p { font-size:12.5px; line-height:1.65; margin:0 0 6px; }
  & .special-say p:last-child { margin-bottom:0; }
  & .special-face { width:72px; aspect-ratio:300 / 360; background-repeat:no-repeat; border:1px solid #29444e; background-color:#0e2630; }
  & .special-side { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; min-width:0; }
  & .special-reward,& .special-board { padding:12px; border:1px solid var(--line); background:#0b1b22; }
  & .special-reward h3,& .special-board h3 { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
  & .special-reward h3 em { font-style:normal; color:var(--special); font-size:11px; }
  & .special-board h3 { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; }
  & .special-board-title { min-width:0; overflow-wrap:anywhere; }
  & .special-board .special-rank { justify-self:end; color:var(--amber); font-size:11px; white-space:nowrap; }
  & .special-board { min-width:0; }
  & .special-reward ul { list-style:none; margin:0 0 8px; padding:0; display:grid; gap:8px; }
  & .special-reward li { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px; align-items:center; }
  & .special-reward li b { font:600 20px/1.2 var(--display); color:var(--amber); }
  & .special-reward li small { grid-column:1 / -1; color:var(--muted); font-size:10px; }
  & .special-reward li:has(.special-paint) b { font-size:15px; color:var(--text); }
  & .special-paint { display:block; width:72px; height:20px; border:1px solid #0008; }
  & .special-reward p,& .special-mine,& .special-empty { font-size:11px; color:#b3c9d2; }
  & .special-reward.claimed ul { opacity:.6; }
  & .special-board table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:12px; margin-bottom:8px; }
  & .special-board th { text-align:left; font-weight:400; color:var(--muted); font-size:10px; padding:2px 6px; border-bottom:1px solid var(--line); }
  & .special-board td { padding:3px 6px; border-bottom:1px solid #18303a; }
  & .special-board td:first-child { color:var(--amber); width:2.5em; }
  & .special-board th:first-child { width:3.4em; white-space:nowrap; }
  & .special-board th:last-child { width:5em; text-align:right; }
  & .special-board[data-metric="city"] th:last-child { width:11em; }
  & .special-board td:nth-child(2) { overflow-wrap:anywhere; }
  & .special-board td:last-child { text-align:right; font-weight:700; color:var(--special); white-space:nowrap; }
  & .special-board tr:nth-child(-n+3) td:first-child { color:var(--special); font-weight:700; }
  & .special-error { color:#f59186; }
}
/* A tall, wide window: the order beside the two leaderboards. */
@media(min-width:1000px) and (min-height:1101px) {
  .cp-simple.special-board .special-brief { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
  .cp-simple.special-board .special-side { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:999px) {
  .cp-simple.special-board .special-brief { overflow:visible; }
  .cp-simple .special-say { grid-template-columns:52px minmax(0,1fr); }
  .cp-simple .special-face { width:52px; }
}
/* The phone board has no tactical map for this operation. Use that space for
   the banner and a natively scrollable briefing, keeping the crew and launch. */
:root.ph .simple-board.special-board .mission-hero { grid-column:1 / 3; }
:root.ph .simple-board.special-board .mission-hero>.special-heading { right:190px; }
:root.ph .simple-board.special-board .mission-hero .special-period { display:block; font-size:9px; line-height:1.3; letter-spacing:0; margin-bottom:3px; }
:root.ph .simple-board.special-board .mission-hero>.special-reward { width:176px; right:6px; top:5px; bottom:5px; padding:5px 7px; }
:root.ph .simple-board.special-board .mission-hero .special-reward ul { gap:6px; }
:root.ph .simple-board.special-board .mission-hero .special-reward li b { font-size:15px; }
:root.ph .simple-board.special-board .mission-hero .special-reward li:has(.special-paint) b { font-size:10px; }
:root.ph .simple-board.special-board .special-brief { grid-column:1 / 3; grid-row:3; min-height:0; overflow:auto; overscroll-behavior:contain; padding:6px; gap:8px; }
:root.ph .simple-board.special-board .special-order { gap:6px; }
:root.ph .simple-board.special-board .special-say { padding:8px; }
:root.ph .simple-board.special-board .special-side { gap:8px; }
/* the report */
#campaign .cp-debrief.special .special-result { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px 18px; align-items:center; padding:16px; }
#campaign .cp-debrief.special .special-result>.special-say { grid-column:1 / -1; }
#campaign .cp-debrief.special .special-count { display:flex; align-items:baseline; gap:6px; grid-row:span 2; }
#campaign .cp-debrief.special .special-count span { font-size:34px; }
#campaign .cp-debrief.special .special-count b { font:700 64px/1 var(--display); color:var(--special); }
#campaign .cp-debrief.special .special-count small { font-size:14px; color:var(--muted); }
#campaign .cp-debrief.special .special-saved { color:var(--amber); font-weight:700; }
#campaign .cp-debrief.special .special-paid { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--special); font-weight:700; font-size:16px; }
#campaign .cp-debrief.special .special-note,#campaign .cp-debrief.special .special-saving { color:var(--muted); font-size:12px; }
#campaign .cp-debrief.special .special-saving { padding:0 16px; }