/* Mission page (pages/mission.html, mission.js), layout round 3: a back link to the kind, the kind and the title, then
   the banner with its meta line beside the "Extra rewards" box (Ninja Pearls in all and where they come from), then
   the missions as a grid of cards in the game's order: rank, name, stamina; boss; Ryo / EXP / Ninja Pearls; drops;
   special rewards; the detail tabs under "More". Loaded after site.css; game art is shown as it is (no filters,
   blends or overlays on it). */

/* ---------- Naruto theme "mission-desk": the Mission Assignment Desk (docs/design-system.md "Naruto theme layer").
   The same block sits at the top of missions.css, mission.css and mode-pages.css (Boss Raid, Giant Boss Rush, Infinite,
   Ninja Race, six-player co-op); keep the three copies equal. ---------- */
body[data-theme="mission-desk"] {
  --theme-accent: #e8a33d; --theme-accent-2: #ffd27a; --theme-chakra: #ff8a3d;
  --theme-cloth: #5a2418; --theme-cloth-hi: #74321f; --theme-cloth-lo: #3d170f;
  --theme-glow: rgba(232, 163, 61, 0.11); --theme-glow-2: rgba(168, 35, 27, 0.06);
  --theme-texture: var(--nk-shuriken-url); --theme-texture-size: 150px; --theme-texture-opacity: 0.03;
  --theme-hero-frame: radial-gradient(55% 130% at 12% 0%, rgba(255, 196, 110, 0.13), transparent 70%);
  --theme-mark: var(--nk-shuriken-url);
  /* paper on the desk: ink text */
  --md-ink: var(--nk-ink); --md-ink-2: var(--nk-ink-2); --md-red: var(--nk-red-ink); --md-green: #1d5e33;
  --md-paper-shadow: inset 0 0 26px rgba(120, 70, 20, 0.24), inset 0 0 0 1px rgba(90, 53, 25, 0.38), 0 14px 24px -14px rgba(0, 0, 0, 0.9);
}


/* the desk on a mission page: the banner pinned in a wooden frame, the Extra rewards box a wooden board, every mission a
   scroll whose head is parchment (rod on top, the rank letter in a red seal ring, ink name, the stamina). */
body[data-theme="mission-desk"] .mh-main .mh-banner img { border-radius: 2px;
  box-shadow: 0 0 0 3px #8a5528, 0 0 0 5px #2e1a0b, 0 0 0 6px rgba(255, 210, 160, 0.16), 0 18px 30px -12px rgba(0, 0, 0, 0.85); }
body[data-theme="mission-desk"] .mh-main .mh-banner { padding: 6px; box-sizing: border-box; }
body[data-theme="mission-desk"] .mh-main .mh-banner .sk-banner { border-radius: 2px; }
/* story and Gaiden chapter pictures are 168 x 126 / 224 x 126: shown at their natural size at most (+ the 6 px frame), never blown up */
html[data-mban="story"] body[data-theme="mission-desk"] .mh-main .mh-banner { width: min(100%, 180px); }
html[data-mban="gaiden"] body[data-theme="mission-desk"] .mh-main .mh-banner { width: min(100%, 236px); }
body[data-theme="mission-desk"] .mh-extra { border-radius: 4px; color: #ead9c3; background: var(--nk-wood-planks);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 4px #2a1708, inset 0 0 0 5px rgba(255, 210, 160, 0.12), var(--shadow-card); }
body[data-theme="mission-desk"] .mh-extra .mx-h { font: 400 0.875rem/1.2 var(--nk-brush); letter-spacing: 0.03em; text-transform: none; color: var(--theme-accent-2); }
body[data-theme="mission-desk"] .mh-extra .mx-total span, body[data-theme="mission-desk"] .mh-extra small { color: #e0c9a6; }
body[data-theme="mission-desk"] .mh-extra .mx-list { border-top-color: rgba(255, 210, 160, 0.14); }

body[data-theme="mission-desk"] .ms-card { border: 0; border-radius: 3px; box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(255, 210, 160, 0.08); }
body[data-theme="mission-desk"] .ms-card > .ms-head { padding: 18px 14px 12px; color: var(--md-ink);
  background: var(--nk-rod) 0 0 / 100% 9px no-repeat, var(--nk-parchment); box-shadow: inset 0 -1px 0 rgba(90, 53, 25, 0.4); }
body[data-theme="mission-desk"] .ms-card[open] > .ms-head { background: var(--nk-rod) 0 0 / 100% 9px no-repeat, var(--nk-parchment); }
body[data-theme="mission-desk"] .ms-card > .ms-head:hover { box-shadow: inset 0 -1px 0 rgba(90, 53, 25, 0.4), inset 0 0 0 2px rgba(200, 120, 30, 0.55); }
body[data-theme="mission-desk"] .ms-card .m-name { color: var(--md-ink); }
body[data-theme="mission-desk"] .ms-card .m-name small { color: var(--md-ink-2); }
body[data-theme="mission-desk"] .ms-card .m-no { width: 40px; height: 40px; border-radius: 50%; color: var(--md-red); font: 400 1.05rem/1 var(--nk-brush); transform: rotate(-8deg);
  background: radial-gradient(circle, rgba(255, 245, 220, 0.95) 0 54%, transparent 55%),
    radial-gradient(circle, transparent 0 60%, var(--nk-red) 61% 68%, transparent 69% 74%, var(--nk-red) 75% 79%, transparent 80%); }
body[data-theme="mission-desk"] .ms-stam { color: var(--md-ink); background: rgba(90, 53, 25, 0.1); box-shadow: inset 0 0 0 1px rgba(168, 35, 27, 0.5); }
body[data-theme="mission-desk"] .ms-stam b { color: var(--md-red); }
body[data-theme="mission-desk"] .ms-was, body[data-theme="mission-desk"] .ms-arr { color: var(--md-ink-2); }
/* the rank: the game's letter inside a red seal ring, like a desk stamp */
body[data-theme="mission-desk"] .ms-rank.ms-rank-art { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; transform: rotate(-10deg);
  background: radial-gradient(circle, rgba(255, 245, 220, 0.95) 0 52%, transparent 53%),
    radial-gradient(circle, transparent 0 58%, var(--nk-red) 59% 66%, transparent 67% 72%, var(--nk-red) 73% 76%, transparent 77%); }
body[data-theme="mission-desk"] .ms-rank-art img { height: 30px; max-width: 34px; }
body[data-theme="mission-desk"] .ms-rank:not(.ms-rank-art) { border-radius: 50%; background: rgba(255, 245, 220, 0.9); border: 2px solid var(--nk-red); color: var(--md-red); }


/* ---------- hero ---------- */
.mission-hero { padding-bottom: 8px; }
.mh-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: 16px; }
.mission-hero h1 { margin-bottom: 12px; }
.mission-hero .mh-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 0; }
.mh-main { min-width: 0; display: grid; gap: 10px; align-content: start; }
/* the banner at its game size (event banners 512 x 130); story / Gaiden chapter pictures smaller (html data-mban, set
   before the first paint) */
.mh-main .mh-banner { width: min(100%, 512px); }
html[data-mban="story"] .mh-main .mh-banner { width: min(100%, 240px); }
html[data-mban="gaiden"] .mh-main .mh-banner { width: min(100%, 320px); }
.mh-main .mh-banner img { width: 100%; height: auto; display: block; }
.mh-main .meta-row { margin: 0; }
.mh-main #m-lead { margin: 0; font-size: var(--fs-base); }
.mh-main #m-lead:empty { display: none; }
.mchip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-2);
  box-shadow: var(--ring); font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.mchip b { color: var(--text); font-weight: 700; }
.mchip .lbl-ico { width: 16px; height: 16px; }
@media (min-width: 1000px) {
  .mission-hero .mh-grid { grid-template-columns: minmax(0, 640px) minmax(320px, 1fr); gap: 24px; }
  .mission-hero .mh-grid:not(:has(.mh-extra)) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Extra rewards: Ninja Pearls in all, a bar split by source, one row per source ---------- */
.mh-extra { background: var(--surface); box-shadow: var(--shadow-card); border-radius: var(--r-xl); padding: 14px 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.mh-extra[aria-hidden="true"] .sk { margin: 2px 0; }
.mx-h { font: 700 var(--fs-label)/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin: 0; padding: 0; border: 0; }
.mx-total { display: flex; align-items: center; gap: 12px; }
.mx-total img, .mx-total .cur { width: 48px; height: 48px; flex: none; }
.mx-total b { display: block; font: 700 var(--fs-xl)/1 var(--head); color: var(--gold); }
.mx-total span { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.mx-bar { display: flex; gap: 4px; height: 8px; }
.mx-bar span { flex-basis: 0; min-width: 8px; border-radius: var(--r-pill); }
.px-c { --px: var(--gold); } .px-f { --px: var(--ok); } .px-d { --px: var(--orange-2); }
.mx-bar span { background: var(--px); }
.mx-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mx-parts li { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.mx-parts li::before { content: ""; align-self: stretch; border-radius: var(--r-xs); background: var(--px); }
.mx-parts b { display: block; font-weight: 700; }
.mx-parts small { display: block; color: var(--faint); font-size: var(--fs-xs); }
.mx-parts em { font: 700 var(--fs-md)/1 var(--head); font-style: normal; color: var(--px); }
.mx-list { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.mx-list:first-child { padding-top: 0; border-top: 0; }
.mx-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; font-size: var(--fs-sm); }
.mx-list img, .mx-list .cur { width: 32px; height: 32px; border-radius: var(--r-xs); }
.mx-list b { display: block; font-weight: 700; }
.mx-list small { display: block; color: var(--faint); font-size: var(--fs-xs); }

/* ---------- the missions: a grid of cards ---------- */
#m-body > #sec-missions { padding-top: 10px; }
#sec-missions .sec-head:not(:has(.tablist)) { display: none; }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; align-items: start; }
.ms-grid.ms-one { grid-template-columns: minmax(0, 1fr); }
.ms-grid > .mission { margin: 0; }
/* a card whose "More" is open takes the whole row (enemy tables, Lucky Drop chart) */
.ms-grid > .ms-card:has(> .m-inner > .ms-more[open]) { grid-column: 1 / -1; }
.ms-card { border-radius: var(--r-xl); }
.ms-card > .ms-head { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 12px 14px; }
.ms-card[open] > .ms-head { border-bottom: 0; background: none; }
.ms-closed > .ms-head { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
.ms-rank { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; font: 700 var(--fs-md)/1 var(--head); background: var(--surface-2);
  border: 1px solid var(--line-2); color: var(--muted); }
.ms-rank.ms-rank-art { width: 40px; height: 44px; background: none; border: 0; border-radius: 0; }
.ms-rank-art img { width: auto; height: 44px; max-width: 44px; object-fit: contain; display: block; }
.ms-rank.r-s { color: var(--gold); border-color: rgba(255, 201, 74, 0.45); }
.ms-rank.r-a { color: var(--orange-2); border-color: rgba(255, 154, 61, 0.4); }
.ms-rank.r-b { color: #7cc0ff; border-color: rgba(124, 192, 255, 0.35); }
.ms-rank.r-c { color: #7fe0a8; border-color: rgba(127, 224, 168, 0.3); }
.ms-card .m-name { font: 700 var(--fs-md)/1.2 var(--head); letter-spacing: 0.01em; min-width: 0; overflow-wrap: anywhere; }
.ms-card .m-name small { font: 500 var(--fs-xs)/1.3 var(--sans); letter-spacing: 0; }
.ms-stam { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(255, 154, 61, 0.45);
  background: rgba(255, 154, 61, 0.08); font-size: var(--fs-sm); }
.ms-stam .lbl-ico { margin: 0; }
.ms-stam b { color: var(--orange-2); font: 700 var(--fs-md)/1 var(--head); }
.ms-was { color: var(--faint); font-weight: 600; }
.ms-arr { color: var(--faint); font-size: var(--fs-xs); }

.ms-peek { display: inline-flex; align-items: center; gap: 4px; }
.ms-pb img, .ms-pb .ms-noimg { width: 32px; height: 32px; border-radius: var(--r-sm); }
.ms-pd { position: relative; display: inline-block; }
.ms-pd img, .ms-pd .cur { width: 28px; height: 28px; border-radius: var(--r-xs); display: block; }
.ms-pd .ds-lk { top: -4px; left: -4px; width: 13px; height: 13px; font-size: var(--fs-label); }
@media (max-width: 520px) {
  .ms-closed > .ms-head { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .ms-closed .ms-peek { grid-column: 2 / -1; grid-row: 2; }
}

.ms-card .m-inner { padding: 0 14px 14px; }
.ms-sum { display: grid; gap: 12px; padding: 2px 0 6px; }
.ms-sum > .m-status { margin: 0; }
.ms-sum > .ph-note, .ms-sum > .note-s { margin: 0; }
.ms-lbl { display: block; color: var(--faint); font: 700 var(--fs-label)/1.2 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.ms-lbl .faint { text-transform: none; letter-spacing: 0; font-weight: 500; }

.ms-bl { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.ms-boss .ms-lbl { display: none; }
.ms-b { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font-weight: 700; min-width: 0; }
.ms-b img:not(.el-mini), .ms-noimg { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--surface-2); flex: none; }
.ms-noimg { display: grid; place-items: center; color: var(--faint); font: 700 var(--fs-base) var(--head); }
.ms-bn { overflow-wrap: anywhere; }
.ms-b .el-mini { margin-left: -2px; }
a.ms-b:hover { color: var(--gold); }

/* Ryo / Rank EXP / Character EXP (/ Ninja Pearls): one strip */
.ms-vals { padding: 8px 4px; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--well); box-shadow: var(--ring); border-radius: var(--r-md); }
.ms-vals.ms-v4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ms-vals > div { padding: 2px 8px; background: none; border: 0; border-radius: 0; min-width: 0; }
.ms-vals small { font-size: var(--fs-label); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-vals small .lbl-ico { display: none; }
.ms-vals b { font-size: var(--fs-md); }
.ms-vals .ms-vp b { color: var(--gold); }

.ds-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.ds { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; width: 54px; min-height: 44px; color: var(--text); text-decoration: none; }
.ds-ic { position: relative; display: block; width: 48px; height: 48px; padding: 2px; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: var(--ring); box-sizing: border-box; }
a.ds:hover .ds-ic { box-shadow: 0 0 0 1px var(--gold); }
.ds-ic img, .ds-ic .cur { width: 42px; height: 42px; border-radius: var(--r-xs); display: block; }
.ds-q { position: absolute; right: -4px; bottom: -4px; font: 700 var(--fs-label)/1 var(--sans); color: var(--gold); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-xs); padding: 2px 4px; }
.ds-lk { position: absolute; top: -5px; left: -5px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 700 var(--fs-label)/1 var(--sans);
  color: #1a0d00; background: var(--gold); box-shadow: 0 0 0 2px var(--bg); }
.ds-lk-inline { position: static; display: inline-grid; vertical-align: -3px; margin-right: 4px; box-shadow: none; }
.ds-p { font: 700 var(--fs-xs)/1.1 var(--sans); color: var(--ok); }
.ds-p-lk { color: var(--gold); }
.ds-more { min-height: 48px; padding: 0 12px; border-radius: var(--r-sm); background: var(--surface-3); border: 0; box-shadow: var(--ring); color: var(--muted);
  font: 700 var(--fs-sm) var(--sans); cursor: pointer; }
.ds-more:hover { color: var(--text); box-shadow: 0 0 0 1px var(--line-3); }
.ms-legend { margin: 0 0 10px; }

/* special rewards: reward first, then the condition */
.ms-conds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ms-conds li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 12px 6px 8px; border-radius: var(--r-sm);
  background: var(--surface-2); box-shadow: var(--ring); font-size: var(--fs-sm); font-weight: 700; min-height: 48px; box-sizing: border-box; }
.ms-conds li.ms-dc { box-shadow: inset 0 0 0 1px rgba(255, 154, 61, 0.35); }
.ms-ct small { display: block; font-weight: 500; font-size: var(--fs-xs); }
.ms-rw { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 36px; }
.ms-r { position: relative; display: inline-flex; color: var(--text); padding-bottom: 6px; }
.ms-r img, .ms-r .cur { width: 32px; height: 32px; border-radius: var(--r-xs); }
.ms-r .cur { font-size: var(--fs-label); }
.ms-rq { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font: 700 var(--fs-label)/1 var(--sans); color: #fff; background: rgba(10, 8, 14, 0.88);
  border-radius: var(--r-xs); padding: 2px 4px; white-space: nowrap; }
a.ms-r { min-height: 44px; min-width: 36px; align-items: center; justify-content: center; }

.ms-more { border-top: 1px solid var(--line); margin: 4px -14px 0; padding: 0 14px; }
.ms-more > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; padding: 6px 0; }
.ms-more > summary::-webkit-details-marker { display: none; }
.ms-more > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s; margin-right: 2px; }
.ms-more[open] > summary::before { transform: rotate(45deg); }
.ms-more-t { font-weight: 700; }
.ms-more > summary .faint { font-size: var(--fs-xs); }
/* in a card of the grid the list of tabs would wrap: just "More" (the tabs show when it opens) */
.ms-grid:not(.ms-one) .ms-more:not([open]) > summary .faint { display: none; }
.ms-more > summary:hover .ms-more-t { color: var(--gold); }
.ms-more-b { padding-bottom: 4px; }
.ms-more .tablist { margin: 0 -14px; padding: 0 14px; }

/* ---------- skeleton (pages/mission.html) ---------- */
.ms-skel { padding: 10px 0 8px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.ms-skel > .sk-h { display: none; }
.ms-skc { padding: 14px 16px; gap: 9px; min-height: 420px; box-sizing: border-box; }
.ms-sk-row { height: 54px; }
.ms-sk-strip { height: 62px; width: min(100%, 420px); }
/* the hero's badge row carries the meta chips (one or two rows on a wide screen, more on a phone) and the "Extra
   rewards" box is usually a total, a bar and two or three rows: reserve that before the data arrives
   (scripts/cls-check.mjs) */
#m-badges > .sk-badges { height: 67px; }
html[data-mban="story"] #m-badges > .sk-badges, html[data-mban="gaiden"] #m-badges > .sk-badges { height: 30px; }
html[data-mban="nr"] #m-lead.sk-lead { min-height: 46px; }
.mh-extra[aria-hidden="true"] { min-height: 222px; }
/* the title runs the whole width now: one line on a wide screen */
#m-title:has(> .sk-h1) { min-height: 63px; }
@media (max-width: 860px) {
  #m-badges > .sk-badges { height: 145px; }
  html[data-mban="story"] #m-badges > .sk-badges, html[data-mban="gaiden"] #m-badges > .sk-badges { height: 80px; }
  /* Ninja Road stages carry fewer chips: two rows on a phone (live page 2026-10-11) */
  html[data-mban="nr"] #m-badges > .sk-badges { height: 78px; }
  #m-lead.sk-lead { min-height: 46px; }
  html[data-mban="story"] #m-lead.sk-lead, html[data-mban="gaiden"] #m-lead.sk-lead { min-height: 24px; }
  html[data-mban="nr"] #m-lead.sk-lead { min-height: 52px; }
}
@media (max-width: 600px) {
  html[data-mban] #m-title:has(> .sk-h1) { min-height: 39px; }
  html[data-mban="nr"] #m-title:has(> .sk-h1) { min-height: 32px; }
}
@media (max-width: 600px) {
  .ms-card > .ms-head { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 10px 12px; gap: 10px; }
  .ms-card .m-inner { padding: 0 12px 12px; }
  .ms-more { margin: 4px -12px 0; padding: 0 12px; }
  .ms-vals small { font-size: var(--fs-label); letter-spacing: 0.02em; }
  .ms-vals b { font-size: var(--fs-base); }
  .ms-vals > div { padding: 2px 6px; }
  .ds { width: 50px; }
}
.ds-g { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 700 var(--fs-label)/1 var(--sans);
  color: #1a0d00; background: var(--wip); box-shadow: 0 0 0 2px var(--bg); }

/* ---------- look v4 (2026-10-15): the pearl haul as one line of parts, stage cards with a rank-coloured edge and the
   reward numbers as a footer line ---------- */
.mx-h { font: 600 var(--fs-label)/1.2 var(--head); letter-spacing: var(--tracking-label); color: var(--accent); }
.mx-total b { font-family: var(--head); }
.mx-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-parts li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--blade-sm); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--px); }
.mx-parts li::before { content: none; }
.mx-parts em { font: 700 var(--fs-lg)/1 var(--head); }
.mx-parts b { font: 700 var(--fs-sm)/1.2 var(--head); }
.ms-card { border-radius: var(--blade); box-shadow: var(--shadow-card), inset 3px 0 0 var(--rk, var(--line-3)); }
.ms-card.rk-s, .ms-card.rk-ss { --rk: var(--gold); }
.ms-card.rk-a { --rk: var(--orange-2); }
.ms-card.rk-b { --rk: #7cc0ff; }
.ms-card.rk-c, .ms-card.rk-d { --rk: var(--leaf); }
.ms-stam { border-radius: var(--blade-sm); box-shadow: inset 0 0 0 1px var(--accent-ring); }
.ms-lbl { font: 600 var(--fs-label)/1.2 var(--head); letter-spacing: var(--tracking-label); color: var(--accent); }
.ms-vals { margin-top: var(--sp-2); padding: 10px 0 0; background: none; box-shadow: inset 0 1px 0 var(--line); border-radius: 0; }
.ms-vals > div { padding: 2px 8px 2px 0; }
.ms-vals small { font-family: var(--head); font-weight: 600; color: var(--muted); }
.ms-vals b { font-family: var(--head); }
.ms-conds li { border-radius: var(--blade-sm); }
/* hero: the kind and title across the top, then the banner on the left with the facts and the pearl haul beside it
   (wide screens; fixed banner column so nothing reflows when the picture arrives) */
.mh-extra { border-radius: var(--blade); }
@media (min-width: 1000px) {
  .mission-hero > .wrap { display: grid; grid-template-columns: 512px minmax(0, 1fr); column-gap: var(--sp-8); align-items: start; }
  html[data-mban="story"] .mission-hero > .wrap { grid-template-columns: 240px minmax(0, 1fr); }
  html[data-mban="gaiden"] .mission-hero > .wrap { grid-template-columns: 320px minmax(0, 1fr); }
  .mission-hero .mh-crumbs { grid-column: 1 / -1; grid-row: 1; }
  .mission-hero .mh-grid, .mission-hero .mh-main { display: contents; }
  .mission-hero > .wrap > .eyebrow { grid-column: 1 / -1; grid-row: 2; }
  .mission-hero > .wrap > h1 { grid-column: 1 / -1; grid-row: 3; }
  .mission-hero #m-banner { grid-column: 1; grid-row: 4 / span 3; align-self: start; width: 100%; }
  .mission-hero #m-badges { grid-column: 2; grid-row: 4; margin-bottom: var(--sp-2); }
  .mission-hero #m-lead { grid-column: 2; grid-row: 5; margin-bottom: var(--sp-2); }
  .mission-hero .mh-extra { grid-column: 2; grid-row: 6; margin-top: var(--sp-2); }
  .mission-hero .mh-extra[aria-hidden="true"] { min-height: 150px; }
  #m-badges > .sk-badges { height: 67px; }
}
.mchip { border-radius: var(--blade-sm); }
@media (min-width: 1000px) {
  .mission-hero .mh-extra { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--sp-6); }
  .mission-hero .mh-extra > .mx-h { grid-column: 1 / -1; }
  .mission-hero .mh-extra > .mx-list { grid-column: 1 / -1; }
}