/* Mode pages: /ninja-road, /phantom-castle, /ultimate-showdown (assets/js/mode-pages.js). Game art is never tinted. */
.mp-body { padding-bottom: 24px; }
.mp-ver { margin: 6px 0 0; min-height: 1.4em; font-size: 0.85rem; }
.m-section > .mp-ver { margin: -6px 0 12px; }

/* This week (Ninja Road): reserved height so the live answer does not move the page */
.mp-now { min-height: 148px; }
.mp-now h3 { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp-now p { margin: 0; }
.mp-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mp-next { margin-top: 6px !important; }
.mp-go { margin-top: 12px; min-height: 44px; }

/* Coming up (planned rotation) */
.mp-rot { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.mp-rot-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; color: var(--text); min-height: 92px; }
.mp-rot-row b { font-family: var(--head); font-size: 1.15rem; }
.mp-rot-row .badge { align-self: flex-start; white-space: normal; max-width: 100%; }
.mp-rot-row .muted { font-size: 0.85rem; }
.mp-rot-sk { min-height: 92px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.mp-rot-empty { grid-column: 1 / -1; padding: 12px 0; min-height: 92px; }
.archive-list .mp-rot-sk { min-height: 44px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 0; }

.nr .badge { margin-top: 6px; }

/* unit and shop tiles */
.mp-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.mp-units > .empty, .mp-units > .mp-note { grid-column: 1 / -1; margin: 0; }
.mp-unit { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 72px; color: var(--text); }
.mp-unit > img, .mp-noicon { width: 52px; height: 52px; border-radius: 10px; flex: none; }
.mp-noicon { background: var(--surface-2); border: 1px solid var(--line); }
.mp-unit-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-unit-body b { overflow-wrap: anywhere; }
.mp-unit-body small { color: var(--muted); font-size: 0.8rem; }
.mp-unit-meta { display: flex; align-items: center; gap: 6px; }
.mp-el { width: 18px; height: 18px; }
.mp-ban, .mp-unit-body .badge { align-self: flex-start; margin-top: 2px; }
.mp-when { font-size: 0.8rem; }
.mp-price { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.mp-price img { width: 18px; height: 18px; }
.mp-coin { width: 48px; height: 48px; flex: none; }
.mp-unknown { min-height: 72px; }

@media (max-width: 560px) {
  .mp-units, .mp-rot { grid-template-columns: 1fr; }
  .mp-now { min-height: 172px; }
}