/*
 * Minerva Game Finder, laid out as a shop.
 *
 * The page used to open on a paragraph explaining itself and a single-column
 * list of file names, so most of a wide screen was margin. Now the search
 * sits in a thin bar pinned to the top with the basket beside it, and the
 * rest of the screen is catalog: a grid of box art that fills whatever width
 * there is. The explanation moved behind the ? button.
 */

body.__accessbox-minerva {
  --ab-accent: #5f3dc4;
  --media-accent: #5f3dc4;
  --media-accent-dark: #452c91;
  --media-soft: #ece6fb;
  --mv-accent: #5f3dc4;
  --mv-accent-dark: #452c91;
  --mv-soft: #ece6fb;
  --mv-live: #22864f;
  --mv-live-ink: #1d6b3c;
  --mv-live-soft: #dff3e6;
  --mv-thin: #c07d1c;
  --mv-thin-ink: #8a5a12;
  --mv-thin-soft: #fdf0dd;
  --mv-dead: #c63c3c;
  --mv-dead-ink: #9c2b2b;
  --mv-dead-soft: #fbe4e4;
  --mv-wrap: min(1760px, calc(100% - 40px));
  --mv-bar-h: 66px;
}

/* An open drawer or game page holds the page still behind it. */
html.mv-locked { overflow: hidden; }
html.mv-locked .__accessbox-nav { display: none; }

.mv-label {
  display: block;
  color: var(--quiet);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------- bar */
.mv-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}

.mv-bar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: var(--mv-wrap);
  height: var(--mv-bar-h);
  margin: 0 auto;
  /* nav.js pins the qpkit mark 12px from the left, 42px square, and it
     centres on this bar. Until the centred bar has moved clear of it on its
     own, the bar keeps that slot empty. */
  padding-left: 54px;
}

@media (min-width: 1900px) {
  .mv-bar-inner { padding-left: 0; }
}

.mv-brand {
  flex: none;
  margin: 0 10px 0 0;
  font-size: 1.04rem;
  font-weight: 790;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.mv-brand span { color: var(--quiet); font-weight: 620; }

.mv-field {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  max-width: 760px;
}

.mv-field-icon {
  position: absolute;
  left: 15px;
  width: 18px;
  height: 18px;
  color: var(--quiet);
  pointer-events: none;
}

.__accessbox-minerva .mv-field input {
  width: 100%;
  height: 44px;
  padding: 0 40px 0 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-strong);
  box-shadow: 0 1px 2px rgba(25, 25, 24, .04);
  font-size: .95rem;
}

.mv-field input::-webkit-search-cancel-button { cursor: pointer; }

.mv-kbd {
  position: absolute;
  right: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-subtle);
  color: var(--quiet);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .72rem;
  pointer-events: none;
}

.mv-field:has(input:not(:placeholder-shown)) .mv-kbd,
.mv-field:has(input:focus) .mv-kbd { display: none; }

@media (hover: none) {
  .mv-kbd { display: none; }
}

.mv-iconbtn {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.mv-iconbtn svg { width: 21px; height: 21px; }

@media (hover: hover) {
  .mv-iconbtn:hover {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
  }
}

#helpBtn { margin-left: auto; }

.mv-basketbtn {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(25, 25, 24, .05);
  cursor: pointer;
  font-size: .86rem;
  font-weight: 700;
}

.mv-basketbtn svg { width: 20px; height: 20px; }

.mv-basketbtn.has-items {
  border-color: var(--mv-accent);
  background: var(--mv-accent);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--mv-accent) 28%, transparent);
}

@media (hover: hover) {
  .mv-basketbtn:hover { border-color: var(--border-hover); transform: translateY(-1px); }
  .mv-basketbtn.has-items:hover { border-color: var(--mv-accent-dark); background: var(--mv-accent-dark); }
}

.mv-count {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--mv-accent-dark);
  font-size: .74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mv-basketbtn.is-bump { animation: mv-bump .45s cubic-bezier(.3, 1.6, .5, 1); }

@keyframes mv-bump { 40% { transform: scale(1.09); } }

/* ------------------------------------------------------------------ shell */
.mv-shell {
  width: var(--mv-wrap);
  margin: 0 auto;
  padding: 0 0 72px;
}

.mv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 16px 0 20px;
}

.mv-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mv-pill {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 620;
  white-space: nowrap;
}

.mv-pill:has(:focus-visible) {
  border-color: var(--mv-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mv-accent) 16%, transparent);
}

@media (hover: hover) {
  .mv-pill:hover { border-color: var(--border-hover); }
}

.mv-pill-select > span { color: var(--quiet); }

.__accessbox-minerva .mv-pill select {
  max-width: 200px;
  height: 34px;
  padding: 0 18px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5l3-3' fill='none' stroke='%23626159' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 11px;
  color: var(--text);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 680;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  /* As wide as the choice showing, not the longest console name in the list
     ("Internet Archive - storage manager (29,064)"). */
  field-sizing: content;
}

/* The pill draws the focus ring; the select inside it would draw a second. */
.__accessbox-minerva .mv-pill select:focus { box-shadow: none; }
.__accessbox-minerva .mv-pill select:focus-visible,
.__accessbox-minerva .mv-pill-check input:focus-visible { outline: none !important; }

/* A checkbox pill is a toggle chip. The box itself is visually hidden but
   stays focusable, and the pill draws the tick. */
.mv-pill-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mv-pill-check::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--line2);
  border-radius: 5px;
  background: var(--surface-strong) no-repeat center / 11px;
}

.mv-pill-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--mv-accent) 38%, var(--border));
  background: var(--mv-soft);
  color: var(--mv-accent-dark);
}

.mv-pill-check:has(input:checked)::before {
  border-color: var(--mv-accent);
  background-color: var(--mv-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.6 6.3 2.2 2.2 4.6-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mv-status {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.mv-status:empty { display: none; }

/* ------------------------------------------------------------------- grid */
.mv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 28px 18px;
}

.mv-grid[aria-busy="true"] .mv-card:not(.mv-skel) { opacity: .5; }

.mv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  cursor: pointer;
  transition: opacity .2s ease;
}

.mv-cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: radial-gradient(120% 95% at 50% 0%, #fffdf8 0%, #efe9df 100%);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, border-color .22s;
}

/* Box art is portrait for some consoles and landscape for others; contain
   keeps the whole box in view, and the shadow follows the art, not the frame. */
.mv-cover img {
  width: 100%;
  height: 100%;
  padding: 11%;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(40, 30, 20, .24));
}

@media (hover: hover) {
  .mv-card:hover .mv-cover {
    border-color: var(--border-hover);
    box-shadow: 0 16px 34px rgba(48, 40, 29, .13);
    transform: translateY(-3px);
  }

  .mv-card:hover .mv-card-open { color: var(--mv-accent-dark); }
}

.mv-card.is-added .mv-cover {
  border-color: color-mix(in srgb, var(--mv-accent) 60%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mv-accent) 22%, transparent);
}

/* The drawn box for a game libretro has no art for. */
.mv-box {
  --h: 260;
  display: flex;
  flex-direction: column;
  width: 60%;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(165deg, hsl(var(--h) 34% 58%), hsl(var(--h) 40% 34%));
  box-shadow: 0 10px 18px rgba(40, 30, 20, .22), inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: #fff;
  container-type: inline-size;
}

.mv-box-sys {
  overflow: hidden;
  min-height: 1.9em;
  padding: .55em .7em;
  background: rgba(0, 0, 0, .2);
  font-size: 9px;
  font-size: max(8px, 8cqw);
  font-weight: 750;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mv-box-letter {
  display: grid;
  flex: 1;
  place-items: center;
  font-size: 2.4rem;
  font-size: 44cqw;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.mv-flag {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--mv-thin-soft);
  color: var(--mv-thin-ink);
  font-size: .66rem;
  font-weight: 750;
}

.mv-add {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 13px 0 9px;
  border: 1px solid rgba(25, 25, 24, .09);
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(40, 30, 20, .16);
  cursor: pointer;
  font-size: .76rem;
  font-weight: 720;
}

.mv-add svg { width: 15px; height: 15px; }

.mv-card.is-added .mv-add {
  border-color: var(--mv-accent);
  background: var(--mv-accent);
  color: #fff;
}

@media (hover: hover) {
  .mv-add:hover {
    border-color: var(--mv-accent);
    background: var(--mv-accent);
    color: #fff;
  }

  .mv-card.is-added .mv-add:hover { border-color: var(--mv-accent-dark); background: var(--mv-accent-dark); }
}

.mv-card-title {
  margin: 11px 2px 0;
  font-size: .88rem;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.32;
}

.mv-card-open {
  display: -webkit-box;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Two lines, because the tags after the console are what tell three "Zelda
   II" cards apart, and on a phone "Nintendo Entertainment System" alone
   filled the one line there was. */
.mv-card-meta {
  display: -webkit-box;
  margin: 4px 2px 0;
  overflow: hidden;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mv-card-meta b { color: var(--mv-accent-dark); font-weight: 640; }

.mv-card-src {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 6px 2px 0;
  color: var(--quiet);
  font-size: .72rem;
}

.mv-card-src span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mv-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d3ccc0;
}

[data-health="live"] > .mv-dot {
  background: var(--mv-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mv-live) 16%, transparent);
}

[data-health="thin"] > .mv-dot { background: var(--mv-thin); }
.mv-card-src[data-health="dead"] { color: var(--mv-dead-ink); font-weight: 650; }
[data-health="dead"] > .mv-dot { background: var(--mv-dead); }

/* --- loading and empty --- */
.mv-skel { cursor: default; pointer-events: none; }

.mv-skel .mv-cover,
.mv-skel-line {
  border-color: transparent;
  background: linear-gradient(90deg, #ebe5da 0%, #f6f2ea 50%, #ebe5da 100%) 0 0 / 200% 100%;
  animation: mv-shimmer 1.3s linear infinite;
}

.mv-skel-line {
  display: block;
  width: 82%;
  height: 11px;
  margin-top: 13px;
  border-radius: 6px;
}

.mv-skel-line.is-short { width: 48%; margin-top: 8px; }

@keyframes mv-shimmer { to { background-position: -200% 0; } }

.mv-notice {
  grid-column: 1 / -1;
  padding: 64px 20px;
  text-align: center;
}

.mv-notice h2 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 720; }
.mv-notice p { margin: 0; color: var(--muted); font-size: .86rem; }

.mv-shelf-title {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------- drawer */
.mv-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(25, 25, 24, .34);
  animation: mv-fade .2s ease;
}

.mv-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
  width: min(480px, 100%);
  background: var(--surface);
  box-shadow: -24px 0 60px rgba(40, 30, 20, .16);
  animation: mv-slide .3s cubic-bezier(.2, .8, .2, 1);
}

@keyframes mv-slide { from { transform: translateX(100%); } }
@keyframes mv-fade { from { opacity: 0; } }

.mv-drawer-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 64px;
  padding: 10px 12px 10px 22px;
  border-bottom: 1px solid var(--border);
}

.mv-drawer-head h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-back { margin-left: -12px; }

.mv-drawer-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 22px 26px;
}

.mv-drawer-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.mv-drawer-foot:empty { display: none; }

.mv-cta {
  flex: 1;
  min-height: 50px;
  border-radius: 14px;
  font-size: .9rem;
}

.mv-cta svg { width: 18px; height: 18px; }

.mv-drawer-foot .btn-block { min-height: 48px; font-size: .86rem; }

.mv-share { min-height: 50px; padding: 0 16px; border-radius: 14px; font-size: .86rem; }

.mv-textbtn {
  flex: none;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: .84rem;
  font-weight: 650;
}

@media (hover: hover) {
  .mv-textbtn:hover { background: var(--surface-subtle); color: var(--text); }
}

/* --- basket --- */
.mv-bsum { margin: 0; color: var(--muted); font-size: .86rem; }
.mv-bsum strong { color: var(--text); }

.mv-group {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-strong);
}

.mv-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}

.mv-group-name {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.4;
}

.mv-group-name strong { display: block; color: var(--text); font-size: .82rem; }
.mv-group-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mv-health {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 680;
  white-space: nowrap;
}

.mv-health::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.mv-health[data-health="live"] { background: var(--mv-live-soft); color: var(--mv-live-ink); }
.mv-health[data-health="thin"] { background: var(--mv-thin-soft); color: var(--mv-thin-ink); }
.mv-health[data-health="dead"] { background: var(--mv-dead-soft); color: var(--mv-dead-ink); }

.mv-group > .mv-warn { margin: 10px 12px 0; }

.mv-items { margin: 0; padding: 4px 0; list-style: none; }

.mv-item {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 8px;
}

.mv-item + .mv-item { border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }

.mv-item-open {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 6px 9px 12px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.mv-thumb {
  display: grid;
  flex: none;
  place-items: center;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: radial-gradient(120% 95% at 50% 0%, #fffdf8 0%, #efe9df 100%);
}

.mv-thumb img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.mv-thumb .mv-box { width: 62%; border-radius: 4px; }
.mv-thumb .mv-box-sys { display: none; }

.mv-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.mv-item-text strong {
  overflow: hidden;
  font-size: .87rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-item-text span {
  overflow: hidden;
  color: var(--muted);
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-item-text .is-warn { color: var(--mv-dead-ink); font-weight: 600; }

.mv-item-x {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--quiet);
  cursor: pointer;
}

.mv-item-x svg { width: 18px; height: 18px; }

@media (hover: hover) {
  .mv-item-open:hover strong { color: var(--mv-accent-dark); }
  .mv-item-x:hover { background: var(--mv-dead-soft); color: var(--mv-dead-ink); }
}

.mv-basket-empty {
  display: grid;
  justify-items: center;
  padding: 64px 12px;
  text-align: center;
}

.mv-basket-empty-art {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  border-radius: 24px;
  background: var(--mv-soft);
  color: var(--mv-accent);
}

.mv-basket-empty-art svg { width: 36px; height: 36px; }
.mv-basket-empty h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 720; }
.mv-basket-empty p { max-width: 260px; margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }

/* --- the download step --- */
.mv-checkout-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.mv-seg {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #ece7de;
}

.mv-seg button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: .76rem;
  font-weight: 680;
}

.mv-seg button[aria-checked="true"] {
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: 0 1px 6px rgba(43, 38, 29, .12);
}

.mv-steps {
  display: grid;
  gap: 11px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.mv-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .88rem;
  font-weight: 560;
}

.mv-steps li span {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mv-soft);
  color: var(--mv-accent-dark);
  font-size: .76rem;
  font-weight: 800;
}

[data-warns] .mv-warn { margin: 0 0 10px; }

.mv-torrents { margin: 10px 0 0; padding: 0; list-style: none; }

.mv-torrents li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.mv-torrents li:last-child { border-bottom: 0; }
.mv-torrent-text { min-width: 0; flex: 1 1 200px; }

.mv-torrent-text strong {
  display: block;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mv-torrent-text span {
  color: var(--muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .74rem;
}

.mv-torrent-acts { display: flex; flex: none; gap: 6px; }

.mv-minibtn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: .74rem;
  font-weight: 650;
  text-decoration: none;
}

@media (hover: hover) {
  .mv-minibtn:hover { border-color: var(--border-hover); color: var(--text); }
}

/* ------------------------------------------------------ game page + help */
.mv-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(25, 25, 24, .44);
  animation: mv-fade .18s ease;
}

.mv-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(900px, 100%);
  max-height: min(90vh, 860px);
  overflow: hidden;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(25, 20, 10, .26);
  animation: mv-rise .26s cubic-bezier(.2, .8, .2, 1);
}

.mv-modal-card[data-kind="help"] { width: min(620px, 100%); }

@keyframes mv-rise { from { opacity: 0; transform: translateY(14px); } }

.mv-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.mv-modal-body { overflow-y: auto; overscroll-behavior: contain; }

.mv-product {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  min-height: 100%;
}

.mv-product-art {
  display: grid;
  place-items: center;
  min-height: 380px;
  padding: 34px;
  border-right: 1px solid var(--border);
  background: radial-gradient(120% 95% at 50% 0%, #fffdf8 0%, #ebe4d8 100%);
}

.mv-product-art img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(40, 30, 20, .3));
}

.mv-product-art .mv-box { width: 62%; }

.mv-product-info { min-width: 0; padding: 32px 32px 28px; }

.mv-kicker {
  margin: 0 0 7px;
  color: var(--mv-accent-dark);
  font-size: .74rem;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mv-product-info h2 {
  margin: 0;
  padding-right: 36px;
  font-size: 1.55rem;
  font-weight: 790;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.mv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0 0; }

.mv-tags span {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: .75rem;
  font-weight: 620;
}

.mv-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 22px 0 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.mv-specs div { min-width: 0; padding: 11px 14px; }
.mv-specs div + div { border-left: 1px solid var(--border); }

.mv-specs dt {
  color: var(--quiet);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mv-specs dd {
  margin: 3px 0 0;
  overflow: hidden;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-specs dd[data-health="live"] { color: var(--mv-live-ink); }
.mv-specs dd[data-health="thin"] { color: var(--mv-thin-ink); }
.mv-specs dd[data-health="dead"] { color: var(--mv-dead-ink); }

.mv-product-info > .mv-warn { margin: 14px 0 0; }

.mv-from { margin: 18px 0 0; color: var(--text-secondary); font-size: .82rem; }
.mv-from .mv-label { margin-bottom: 4px; }

.mv-sources { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.mv-sources legend { margin-bottom: 8px; padding: 0; }

.mv-source-list {
  display: grid;
  gap: 6px;
  max-height: 212px;
  overflow-y: auto;
}

.mv-source {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-size: .8rem;
}

.mv-source:has(input:checked) {
  border-color: var(--mv-accent);
  background: color-mix(in srgb, var(--mv-accent) 5%, var(--surface));
}

.mv-source input { flex: none; margin: 0; accent-color: var(--mv-accent); }

.mv-source-name {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.mv-source-name strong { display: block; font-weight: 680; }

.mv-source-name span {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  overflow-wrap: anywhere;
}

.mv-product-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
}

.mv-product-actions .btn {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 13px;
  font-size: .86rem;
}

.mv-add-big { flex: 1 1 210px; }
.mv-add-big svg { width: 18px; height: 18px; }

.mv-add-big.is-added {
  border-color: var(--mv-accent);
  background: var(--mv-accent);
}

/* In the basket: the button opens the basket, and its ✕ half takes the game
   back out. */
.mv-split { display: flex; flex: 1 1 210px; min-width: 0; }
.mv-split .mv-add-big { flex: 1; min-width: 0; border-radius: 13px 0 0 13px; }

.mv-product-actions .mv-split-x {
  flex: none;
  width: 50px;
  padding: 0;
  border-color: var(--mv-accent);
  border-left-color: rgba(255, 255, 255, .28);
  border-radius: 0 13px 13px 0;
  background: var(--mv-accent);
}

.mv-split-x svg { width: 17px; height: 17px; }

@media (hover: hover) {
  .mv-split .btn-primary:hover:not(:disabled) {
    border-color: var(--mv-accent-dark);
    background: var(--mv-accent-dark);
    transform: none;
  }
}

.mv-now {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-subtle);
}

.mv-now .mv-code { margin-top: 12px; }

.mv-filename { margin: 22px 0 0; }
.mv-filename .mv-label { margin-bottom: 4px; }

.mv-filename code {
  display: block;
  color: var(--text-secondary);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .76rem;
  overflow-wrap: anywhere;
}

/* --- help --- */
.mv-help { padding: 32px 32px 28px; }

.mv-help h2 {
  margin: 0 0 22px;
  font-size: 1.35rem;
  font-weight: 790;
  letter-spacing: -.03em;
}

.mv-howto { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }

.mv-howto li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.mv-howto-n {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--mv-soft);
  color: var(--mv-accent-dark);
}

.mv-howto-n svg { width: 21px; height: 21px; }
.mv-howto strong { display: block; padding-top: 2px; font-size: .95rem; font-weight: 700; }
.mv-howto p { margin: 3px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }

.mv-help-notes {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.mv-help-notes p { margin: 0; color: var(--muted); font-size: .81rem; line-height: 1.6; }
.mv-help-notes strong { color: var(--text); }

/* ------------------------------------------------------ shared small parts */
/* Only shown when something is wrong — an empty swarm, or an index that has
   moved since the catalog was made. */
.mv-warn {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--mv-dead-soft);
  color: var(--mv-dead-ink);
  font-size: .8rem;
  line-height: 1.55;
}

.mv-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.6;
}

.mv-hint a { color: var(--mv-accent-dark); font-weight: 620; }

.mv-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--mv-accent-dark);
  cursor: pointer;
  font: inherit;
  font-weight: 620;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mv-more { margin-top: 18px; }

.mv-more summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 650;
  list-style: none;
}

.mv-more summary::-webkit-details-marker { display: none; }

.mv-more summary::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform .15s ease;
}

.mv-more[open] summary::before { transform: rotate(90deg); }
.mv-more-body { padding-top: 4px; }

/* --- copyable command --- */
.mv-code {
  position: relative;
  border: 1px solid #2d2a3a;
  border-radius: 12px;
  background: #1d1b26;
}

.mv-code pre {
  max-height: 280px;
  margin: 0;
  overflow: auto;
  padding: 14px 80px 14px 14px;
  color: #e6e2f2;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .74rem;
  line-height: 1.75;
  white-space: pre;
}

.mv-copy {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 7px;
  /* Opaque, not translucent: the command is one long line that scrolls
     underneath, and a see-through button had the URL running through it. */
  background: #2f2c3c;
  color: #efecf8;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 650;
}

/* Fades the line out as it runs under the button rather than cutting it. */
.mv-copy::before {
  content: "";
  position: absolute;
  top: -9px;
  right: 100%;
  bottom: -9px;
  width: 28px;
  background: linear-gradient(to right, rgba(29, 27, 38, 0), #1d1b26 75%);
  pointer-events: none;
}

@media (hover: hover) {
  .mv-copy:hover { border-color: rgba(255, 255, 255, .4); background: #443f58; }
}

.mv-code.is-plain pre { padding-right: 14px; }

/* ------------------------------------------------------------------ toast */
.mv-toast {
  position: fixed;
  bottom: calc(22px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 32px);
  padding: 8px 8px 8px 18px;
  border-radius: 14px;
  background: #1f1d26;
  color: #f3f0fa;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .26);
  font-size: .85rem;
  transform: translateX(-50%);
  animation: mv-toast .28s cubic-bezier(.2, .8, .2, 1);
}

.mv-toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mv-toast button {
  flex: none;
  height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
}

@media (hover: hover) {
  .mv-toast button:hover { background: rgba(255, 255, 255, .24); }
}

@keyframes mv-toast { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ------------------------------------------------------------ narrow */
@media (max-width: 1000px) {
  .mv-brand span { display: none; }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 640px) {
  body.__accessbox-minerva {
    --mv-wrap: calc(100% - 24px);
    --mv-bar-h: 58px;
  }

  /* The home mark sits at 8px on a phone, so the bar keeps 50px for it. */
  .mv-bar-inner { gap: 4px; padding-left: 50px; }
  .mv-brand { display: none; }

  .__accessbox-minerva .mv-field input {
    height: 42px;
    padding-right: 12px;
    padding-left: 40px;
    font-size: 16px;
  }

  .mv-field-icon { left: 13px; }
  .mv-iconbtn { width: 40px; height: 44px; }
  #helpBtn { margin-left: 2px; }

  .mv-basketbtn { width: 44px; padding: 0; justify-content: center; }
  .mv-basketbtn-label { display: none; }

  .mv-count {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-shadow: 0 0 0 2px var(--bg);
    font-size: .68rem;
  }


  /* One swipeable row of filters rather than three wrapped lines above the
     first game. */
  .mv-toolbar { padding: 12px 0 16px; }

  .mv-filters {
    flex-wrap: nowrap;
    width: calc(100% + 24px);
    margin: 0 -12px;
    padding: 2px 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mv-filters::-webkit-scrollbar { display: none; }
  .__accessbox-minerva .mv-pill select { max-width: 150px; }

  .mv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
  }

  .mv-cover { border-radius: 14px; }

  .mv-add {
    right: 7px;
    bottom: 7px;
    height: 32px;
    padding: 0 11px 0 8px;
  }

  .mv-card-title { font-size: .86rem; }

  .mv-drawer { width: 100%; }
  .mv-drawer-head { padding-left: 18px; }
  .mv-drawer-body { padding: 16px 16px 24px; }
  .mv-drawer-foot { padding-right: 16px; padding-left: 16px; }

  .mv-modal { place-items: end stretch; padding: 0; }

  .mv-modal-card,
  .mv-modal-card[data-kind="help"] {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    animation-name: mv-sheet;
  }

  .mv-product { grid-template-columns: minmax(0, 1fr); }

  .mv-product-art {
    min-height: 0;
    padding: 24px 24px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .mv-product-art img { max-height: 190px; }
  .mv-product-art .mv-box { width: 30%; }

  .mv-product-info { padding: 20px 18px calc(24px + env(safe-area-inset-bottom)); }
  .mv-product-info h2 { padding-right: 0; font-size: 1.3rem; }
  .mv-specs div { padding: 10px 11px; }
  .mv-specs dd { font-size: .94rem; }
  .mv-product-actions .btn { flex: 1 1 100%; }

  .mv-help { padding: 26px 20px calc(26px + env(safe-area-inset-bottom)); }

  .mv-code pre { padding-top: 42px; padding-right: 14px; }
  .mv-code.is-plain pre { padding-top: 14px; }
  .mv-copy { top: 7px; right: 7px; }

  .mv-toast { bottom: calc(14px + env(safe-area-inset-bottom)); }
}

@keyframes mv-sheet { from { transform: translateY(40px); opacity: 0; } }