/* /map and /map/<region> (3 Nov 2026). Loaded only on those pages.
   The painting is the one lit object and takes the whole window. Markers are the game's own map icons, one colour
   per kind (gold for key items: accessories, medicines, Lost Treasures, keys), so what matters reads first.
   What you have found goes grey (DESIGN-SYSTEM.md: lit and unlit). Red only for the selected marker and progress.
   Colour per kind is a deliberate exception agreed with the owner on 3 Nov 2026. Tokens from style.css. */
.mp { --k-gold: #ffd266; --k-chest: #e2d6be; --k-flower: #f6a6c0; --k-gift: #7ed6ba; --k-loot: #96bef0; --k-amber: #ff9c40; --k-stone: #b9c3cf; }

/* the instrument takes the full wrap width; the text sections keep their hang */
@media (min-width: 1200px) {
  .layout:has(.mp) { display: block; }
  .layout:has(.mp) .main { max-width: none; }
}
/* the map breaks out of the text column to the window edges (less 24px); --sbw is the scrollbar width, set by map.js */
body:has(.mp) { overflow-x: clip; }
@media (min-width: 1024px) {
  section.mp { width: calc(100vw - var(--sbw, 0px) - 48px); margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2 + 24px); }
  section.mp.sc { width: auto; margin-left: 0; }
}

.mp { margin: 30px 0 0; }
.mp [hidden] { display: none !important; }
.mp button { font: inherit; color: inherit; }

/* ---------- region strip: the eight paintings ---------- */
.mp-regions ol { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.mp-regions li { min-width: 0; }
.mp-regions a { display: flex; flex-direction: column; gap: 2px; min-height: var(--tap); padding: 10px 12px 11px; border-bottom: 2px solid transparent; text-decoration: none; color: var(--ink-2); }
.mp-regions li + li a { border-left: 1px solid var(--rule-soft); }
.mp-regions a:hover { color: var(--ink); }
.mp-regions a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--sec); }
.mp-regions__k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-variant: small-caps; color: var(--ink-4); }
.mp-regions__n { font-size: 15.5px; line-height: 1.25; }
.mp-regions__c { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 1199px) {
  .mp-regions { overflow-x: auto; scrollbar-width: thin; }
  .mp-regions ol { grid-template-columns: repeat(8, minmax(9.5rem, 1fr)); }
}

/* ---------- map + side panel ---------- */
.mp__body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0; border-top: 1px solid var(--rule-soft); }
@media (max-width: 1023px) { .mp__body { grid-template-columns: minmax(0, 1fr); } }

.mp__view { position: relative; height: calc(100vh - var(--mp-top, 110px) - 36px); height: calc(100svh - var(--mp-top, 110px) - 36px); min-height: 460px; overflow: hidden; background: var(--stage); touch-action: none; cursor: grab; outline: none; }
.mp__view:focus-visible { box-shadow: inset 0 0 0 1px var(--ink-2); }
.mp__view.is-drag { cursor: grabbing; }
.mp__view:fullscreen { height: 100vh; }
@media (max-width: 760px) { .mp__view { height: 64vh; height: 64svh; min-height: 340px; } }
.mp__stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.mp__img { display: block; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.mp:not(.is-ready) .mp__view { cursor: default; }
.mp:not(.is-ready) .mp__stage { position: static; width: 100% !important; height: auto !important; }

/* markers: the game's icon with its rim baked in, no plate; counter-scaled so it stays the same size on screen (--inv = 1 / zoom) */
.mk { position: absolute; width: 0; height: 0; }
.mk--key { z-index: 2; }
.mk > button { position: absolute; left: 0; top: 0; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translate(-50%, -50%) scale(var(--inv, 1)); transition: opacity .2s var(--ease-out); }
.mk img { display: block; width: 100%; height: 100%; transition: transform .15s var(--ease-out); }
.mk > button:hover img, .mk > button:focus-visible img { transform: scale(1.18); }
.mk > button:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.mk--key > button { width: 40px; height: 40px; }
.mk--loot > button { width: 24px; height: 24px; }
.mk--a > button { outline: 1px dashed rgba(var(--white-rgb), .75); outline-offset: 2px; }
.mk.is-found { z-index: 0; }
.mk.is-found > button { opacity: .5; }
.mk.is-found img { filter: grayscale(1) brightness(.8); }
.mk.is-sel { z-index: 3; }
.mk.is-sel > button { opacity: 1; outline: 2px solid var(--red-text); outline-offset: 3px; }
.mk.is-sel img { filter: none; }
.mk.is-off { display: none; }
.mk img { transition: transform .15s var(--ease-out), filter .4s ease; }
.mk.is-going > button { animation: mk-go .5s var(--ease-out, ease-out) var(--d, 0ms) both; }
@keyframes mk-go { 30% { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--inv, 1) * 1.25)); } to { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--inv, 1) * .4)); } }
@media (prefers-reduced-motion: reduce) { .mk.is-going > button { animation: none; opacity: 0; } }

.mp__ctl { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 0; border: 1px solid rgba(var(--white-rgb), .28); background: rgba(var(--stage-rgb), .88); }
.mp__ctl button { min-width: var(--tap); height: var(--tap); padding: 0 12px; border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--ink-2); }
.mp__ctl button + button { border-left: 1px solid rgba(var(--white-rgb), .16); }
.mp__ctl button[data-z="in"], .mp__ctl button[data-z="out"] { font-size: 20px; padding: 0; }
.mp__ctl button:hover { color: var(--ink); }

.mp__side { display: flex; flex-direction: column; min-width: 0; padding: 12px 0 0 20px; border-left: 1px solid var(--rule-soft); }
@media (min-width: 1024px) { .mp--region .mp__side { height: calc(100vh - var(--mp-top, 110px) - 36px); height: calc(100svh - var(--mp-top, 110px) - 36px); min-height: 460px; overflow: hidden; } }
@media (max-width: 1023px) { .mp__side { padding: 22px 0 0; border-left: 0; } }

/* ---------- save box ---------- */
.mp-save { padding-bottom: 16px; border-bottom: 1px solid var(--rule-soft); }
.mp-save.is-over { outline: 1px dashed var(--ink-2); outline-offset: 6px; }
.mp-save__h { font-size: 21px; line-height: 1.2; margin: 0 0 8px; color: var(--ink); }
.mp-save p { font-size: var(--fs-small); line-height: var(--lh-small); margin: 0 0 12px; }
.mp-save__btn { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border: 1px solid var(--ink-2); color: var(--ink); cursor: pointer; font-size: 16px; }
.mp-save__btn:hover, .mp-save__btn:focus-within { border-color: var(--ink); }
.mp-save__btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.mp-save__drop { font-size: 14px; color: var(--ink-4); margin-left: 8px; }
@media (hover: none) { .mp-save__drop { display: none; } }
.mp-save__where { margin: 12px 0 10px; font-size: var(--fs-small); line-height: var(--lh-small); }
.mp-save__where summary { cursor: pointer; color: var(--ink-2); min-height: 32px; }
.mp-save__where ol { margin: 6px 0 0; padding-left: 1.3em; color: var(--ink-2); }
.mp-save__where li + li { margin-top: 4px; }
.mp-save p.mp-save__priv { color: var(--ink-3); margin: 0; }
.mp-save[data-state="done"] .mp-save__empty, .mp-save[data-state="busy"] .mp-save__empty { display: none; }
.mp-save__out:empty { display: none; }
.mp-save__out .mp-save__meta { color: var(--ink-2); }
.mp-save__out .mp-save__big { font-size: 24px; line-height: 1.15; color: var(--ink); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.mp-save__out .mp-save__err { color: var(--red-text); }
.mp-save__acts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.mp-save__acts button, .mp-save__acts label { min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 14.5px; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; position: relative; }
.mp-save__acts label input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.mp-save__acts button:hover, .mp-save__acts label:hover { color: var(--ink); }
.mp-save__all { margin: 6px 0 0; }
.mp-save__slots { margin-top: 6px; font-size: 14px; }
.mp-save__slots summary { cursor: pointer; color: var(--ink-3); min-height: 30px; }
.mp-save select { font: inherit; font-size: 14px; color: var(--ink); background: var(--bg-1); border: 1px solid var(--rule); min-height: 36px; max-width: 100%; margin-top: 8px; }

/* progress line: hairline track, red fill (interaction feedback) */
.mp-bar { display: block; height: 2px; background: var(--rule-soft); margin-top: 6px; }
.mp-bar > i { display: block; height: 100%; background: var(--red-text); width: 0; transition: width .5s var(--ease-out); }

/* ---------- filters ---------- */
.mp__filters { padding: 12px 0; border-bottom: 1px solid var(--rule-soft); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
.mp__filters .mp-sw { grid-column: 1 / -1; }
.mp-f { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; font-size: 15px; line-height: 1.2; color: var(--ink-2); }
.mp-f input { position: absolute; opacity: 0; pointer-events: none; }
.mp-f .mp-f__p { width: 26px; height: 26px; display: grid; place-items: center; }
.mp-f .mp-f__p img { width: 26px; height: 26px; }
.mp-f:has(input:not(:checked)) { color: var(--ink-4); }
.mp-f:has(input:not(:checked)) .mp-f__p { opacity: .3; filter: grayscale(1); }
.mp-f:has(input:focus-visible) { outline: 1px solid var(--ink-2); outline-offset: 2px; }
.mp-f__n { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mp-sw { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.mp-sw input { width: 18px; height: 18px; margin: 0; accent-color: var(--red-text); }
.mp-sw:has(input[data-p="key"]) > span { color: var(--k-gold); }
.mp-sw small { display: block; font-size: 13px; color: var(--ink-4); }

/* ---------- selected marker: a plate over the map, bottom left ---------- */
.mp__detail { position: absolute; left: 12px; bottom: 12px; z-index: 4; width: 340px; max-width: calc(100% - 24px); max-height: calc(100% - 84px); overflow: auto; padding: 14px 16px 12px; background: rgba(var(--stage-rgb), .95); border: 1px solid rgba(var(--white-rgb), .22); cursor: auto; touch-action: auto; }
.mp__detail::before { content: ""; position: absolute; left: -1px; top: -1px; width: 40px; height: 2px; background: var(--steel); }
@media (max-width: 760px) { .mp__detail { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; max-height: 52%; } .mp__ctl { bottom: auto; top: 8px; right: 8px; } }
.mp__detail h3 { font-size: 20px; line-height: 1.25; margin: 0 40px 2px 0; color: var(--ink); }
.mp__detail .mp-d__k { font-size: 13.5px; color: var(--ink-3); margin: 0 0 8px; }
.mp__detail ul { list-style: none; margin: 0 0 8px; padding: 0; font-size: 15.5px; line-height: 1.45; max-width: none; }
.mp__detail li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 1px solid var(--rule-soft); }
.mp__detail li:first-child { border-top: 0; }
.mp__detail li span:last-child { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mp__detail p { font-size: 14.5px; line-height: 1.45; margin: 0 0 8px; color: var(--ink-2); }
.mp__detail .mp-d__x { position: absolute; right: 2px; top: 2px; width: var(--tap); height: var(--tap); border: 0; background: none; cursor: pointer; font-size: 22px; color: var(--ink-3); }
.mp__detail .mp-d__x:hover { color: var(--ink); }
.mp__detail .mp-d__acts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.mp__detail .mp-d__acts button { min-height: 40px; padding: 0 14px; border: 1px solid var(--ink-3); background: none; cursor: pointer; font-size: 15px; color: var(--ink); }
.mp__detail .mp-d__acts button:hover { border-color: var(--ink); }
.mp__detail .mp-d__acts button.mp-d__link { border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
.mp__detail .mp-d__st { font-size: 14px; color: var(--ink-3); }

/* far out: smaller icons so neighbours do not pile up; key items stay the largest */
.mp.is-far .mk > button { width: 26px; height: 26px; }
.mp.is-far .mk--key > button { width: 36px; height: 36px; }
.mp.is-far .mk--loot > button { width: 18px; height: 18px; }

/* ---------- list ---------- */
.mp__list { flex: 1; min-height: 0; overflow: auto; padding: 10px 0 12px; scrollbar-width: thin; }
@media (max-width: 1023px) { .mp__list { max-height: 60vh; } }
.mp__list h3 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-variant: small-caps; color: var(--ink-4); margin: 12px 0 4px; font-weight: 600; }
.mp__list h3:first-child { margin-top: 0; }
.mp__list ol { list-style: none; margin: 0; padding: 0; max-width: none; }
.mp-li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 7px 4px 7px 0; border: 0; border-top: 1px solid var(--rule-soft); background: none; text-align: left; cursor: pointer; }
.mp-li:hover .mp-li__n, .mp-li:focus-visible .mp-li__n { color: var(--ink); }
.mp-li .mp-f__p { width: 26px; height: 26px; display: grid; place-items: center; }
.mp-li .mp-f__p img { width: 26px; height: 26px; }
.mp-li.is-found .mp-f__p img { filter: grayscale(1); }
.mp-li__n { display: block; font-size: 15.5px; line-height: 1.3; color: var(--ink-2); }
.mp-li__s { display: block; font-size: 13.5px; line-height: 1.35; color: var(--ink-4); margin-top: 2px; }
.mp-li.is-sel .mp-li__n { color: var(--red-text); }
.mp-li.is-found { opacity: .5; }
.mp__list .mp-empty { font-size: 15px; color: var(--ink-3); }

/* ---------- the table below ---------- */
.mp-ready .mp-table tbody tr { cursor: pointer; }
.mp-table tbody tr:hover td { color: var(--ink); }
.mp-table tr.is-found td { color: var(--ink-4); }
.mp-table tr.is-found td b { color: var(--ink-3); }
.mp-table .lvw { margin-left: 6px; }
.mp-table tr:target td, .mp-table tr.is-sel td { box-shadow: inset 0 -1px 0 var(--red-text); }

/* ---------- hub ---------- */
/* hub: a save strip, then the eight maps as cards; in the text column, not full-bleed */
section.mp.mp--hub { width: auto; margin-left: 0; }
.mp-hubsave { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 40px; padding: 16px 20px; margin: 8px 0 36px; background: rgba(var(--white-rgb), .025); border: 1px solid var(--rule-soft); }
@media (max-width: 760px) { .mp-hubsave { grid-template-columns: minmax(0, 1fr); } }
.mp-hubsave .mp-save { padding: 0; border: 0; }
.mp-hubsave .mp-save__empty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.mp-hubsave .mp-save__h { margin: 0 8px 0 0; padding: 0; border: 0; font-size: 17px; }
.mp-hubsave .mp-save__h::before { content: none; }
.mp-hubsave .mp-save[data-state="done"] .mp-save__h { display: none; }
.mp-hubsave .mp-save__where { margin: 0; }
.mp-hubsave .mp-save p.mp-save__priv { flex-basis: 100%; }
.mp-hubsave .mp-save[data-state="done"] .mp-save__out { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; }
.mp-hubsave .mp-save[data-state="done"] .mp-save__out > * { margin: 0; }
.mp-hubsave .mp-save[data-state="done"] .mp-bar { display: none; }
.mp-hubsave .mp-save__out .mp-save__big { font-size: 20px; }
.mp-hubsave .mp-save[data-state="done"] .mp-save__acts { order: 4; flex-basis: 100%; }
.mp-hubsave .mp-save[data-state="done"] .mp-save__slots { order: 5; }
p.mp-hubsave__more { margin: 0; font-size: 15px; color: var(--ink-3); max-width: 30em; }
.mp--hub > h2 { margin-top: 0; }
.mp-cards__lede { color: var(--ink-3); font-size: var(--fs-small); max-width: 46em; }
.mp-cards { list-style: none; margin: 18px 0 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 24px; }
@media (max-width: 1199px) { .mp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; } }
.mp-card { display: flex; }
/* cards in a row line up their save lines at the bottom, however long the names */
.mp-card a { display: flex; flex-direction: column; width: 100%; text-decoration: none; color: var(--ink-2); }
.mp-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stage); border: 1px solid var(--rule-soft); transition: border-color .25s ease; }
.mp-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; transition: opacity .3s var(--ease-out), transform .6s var(--ease-out); }
.mp-card a:hover .mp-card__img, .mp-card a:focus-visible .mp-card__img { border-color: var(--ink-3); }
.mp-card a:hover .mp-card__img img, .mp-card a:focus-visible .mp-card__img img { opacity: 1; transform: scale(1.04); }
.mp-card a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.mp-card__k { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-variant: small-caps; color: var(--ink-4); }
.mp-card__n { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; overflow-wrap: anywhere; font-size: 19px; line-height: 1.25; color: var(--ink); margin-top: 2px; }
.mp-card a:hover .mp-card__n, .mp-card a:focus-visible .mp-card__n { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 4px; }
.mp-card__n small { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-card__c { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.mp-card__c li { margin: 0; }
.mp-card__c b { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mp-card__save { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 14px; }
.mp-card__save[hidden] { display: none; }
.mp-card__save b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.mp-card__save small { font-size: 13.5px; color: var(--k-gold, #ffd266); }
.mp-card__save.is-new b, .mp-card__save.is-new small { color: var(--ink-4); }
.mp-card__bar { display: block; height: 2px; background: var(--rule-soft); margin-top: 6px; }
.mp-card__bar[hidden] { display: none; }
.mp-card__bar i { display: block; height: 100%; background: var(--red-text); width: 0; transition: width .8s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .mk > button, .mp-bar > i, .mp-card__img img, .mp-card__bar i { transition: none; }
}
/* save box: a thin running line while reading, a short nudge on a wrong file */
.mp-save__busy { position: relative; padding-bottom: 8px; }
.mp-save__busy::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 30%; background: var(--red-text); animation: mp-run 1s var(--ease-out, ease-out) infinite; }
@keyframes mp-run { from { left: -30%; } to { left: 100%; } }
.mp-save__busy { overflow: hidden; }
.mp-save.is-err .sc-drop__box, .mp-save--short.is-err, .mp-save.is-err:not(.sc-drop) { animation: mp-nudge .32s ease-in-out; }
@keyframes mp-nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.mp-save__acts { align-items: center; }
.sc-drop .mp-save__slots summary { display: list-item; min-height: 36px; line-height: 36px; }
.mp-save__acts button, .mp-save__acts label { display: inline-flex; align-items: center; line-height: 1.2; }
/* checker: the whole page takes the file */
.sc-veil { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(10, 11, 12, .93); border: 2px dashed var(--ink-3); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s; }
.sc-veil p { font-size: 26px; color: var(--ink); margin: 0; transform: translateY(6px); transition: transform .2s var(--ease-out, ease-out); }
.sc-dragging .sc-veil { opacity: 1; visibility: visible; transition: opacity .16s ease; }
.sc-dragging .sc-veil p { transform: none; }
.sc-drop__box { cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.sc-drop__box:hover { border-color: var(--ink-3); background: rgba(var(--white-rgb), .035); }
.sc-drop__box svg { transition: transform .2s var(--ease-out, ease-out); }
.sc-drop__box:hover svg, .sc-drop.is-over svg { transform: translateY(-3px); }
/* a fresh result rises section by section */
.sc-res.is-in > * { animation: sc-rise .45s var(--ease-out, ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes sc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sc-res .mp-bar > i { transition-duration: .8s; }
@media (prefers-reduced-motion: reduce) {
  .mp-save__busy::after, .sc-res.is-in > *, .mp-save.is-err .sc-drop__box, .mp-save.is-err { animation: none; }
  .sc-veil, .sc-veil p, .sc-drop__box svg { transition: none; }
}

/* without the script: the whole painting, then the table */
.mp:not(.is-ready) .mp__view { height: auto; min-height: 0; cursor: default; }

/* very far out (a whole map on a phone) */
.mp.is-vfar .mk > button { width: 18px; height: 18px; }
.mp.is-vfar .mk--key > button { width: 25px; height: 25px; }
.mp.is-vfar .mk--loot > button { width: 14px; height: 14px; }
.mp.is-vfar .mk--a > button { outline-offset: 1px; }
@media (max-width: 760px) { .mp__ctl button { height: 40px; min-width: 40px; font-size: 14px; padding: 0 10px; } }
/* Chinese, Japanese and Korean labels: no letter spacing */
:lang(zh) .mp-regions__k, :lang(ja) .mp-regions__k, :lang(ko) .mp-regions__k,
:lang(zh) .mp-card__k, :lang(ja) .mp-card__k, :lang(ko) .mp-card__k,
:lang(zh) .mp__list h3, :lang(ja) .mp__list h3, :lang(ko) .mp__list h3 { letter-spacing: 0; }

/* ---------- key items the save is missing ---------- */
.mp-keys { padding: 14px 0 12px; border-bottom: 1px solid var(--rule-soft); }
.mp--region .mp-keys { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; padding-top: 8px; border-bottom: 0; }
.mp-keys__h { position: relative; font-size: 18px; line-height: 1.25; margin: 0 0 4px; padding-top: 10px; color: var(--k-gold); }
.mp-keys__h::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 2px; background: var(--k-gold); }
.mp-keys p { font-size: 14px; line-height: 1.45; margin: 0 0 8px; color: var(--ink-3); max-width: none; }
.mp-keys p.mp-keys__none { color: var(--ink-2); }
.mp-keys__k { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-variant: small-caps; font-weight: 600; color: var(--ink-3); margin: 12px 0 2px; }
.mp-keys__k--acc, .mp-keys__k--med, .mp-keys__k--tr, .mp-keys__k--key { color: var(--k-gold); }
.mp-keys__k--am { color: var(--k-amber); } .mp-keys__k--bs { color: var(--k-stone); } .mp-keys__k--flower { color: var(--k-flower); }
.mp-keys ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.mp-key { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--rule-soft); }
.mp-key:first-child { border-top: 0; }
.mp-key__go { flex: 1; min-width: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 0; text-decoration: none; color: var(--ink); }
.mp-key__go img { width: 22px; height: 22px; }
.mp-key__go b { display: block; font-weight: 400; font-size: 15px; line-height: 1.3; }
.mp-key__go small { display: block; font-size: 13px; line-height: 1.35; color: var(--ink-4); }
.mp-key__go:hover b { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
.mp-key__guide { flex: none; font-size: 14px; color: var(--k-gold); text-decoration: none; padding: 6px 0 6px 6px; }
.mp-key__guide:hover { text-decoration: underline; text-underline-offset: 3px; }
.mp--hub .mp-keys { margin-bottom: 34px; padding: 0 0 18px; }
.mp--hub .mp-keys ul { columns: 2 300px; column-gap: 32px; }
.mp--hub .mp-key { break-inside: avoid; }
:lang(zh) .mp-keys__k, :lang(ja) .mp-keys__k, :lang(ko) .mp-keys__k { letter-spacing: 0; }
/* key items in the selected marker's card */
.mp__detail li.is-key > span:first-child, .mp__detail li.is-key a { color: var(--k-gold); }

/* ---------- a way out from inside the map, and the wheel hint ---------- */
.mp__top { position: absolute; left: 12px; top: 12px; z-index: 4; display: flex; align-items: stretch; border: 1px solid rgba(var(--white-rgb), .28); background: rgba(var(--stage-rgb), .88); font-size: 15px; }
.mp__top a { display: flex; align-items: center; min-height: var(--tap); padding: 0 14px; color: var(--ink); text-decoration: none; }
.mp__top a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mp__top span { display: flex; align-items: center; padding: 0 14px; border-left: 1px solid rgba(var(--white-rgb), .16); color: var(--ink-3); }
@media (max-width: 760px) { .mp__top { left: 8px; top: 8px; font-size: 14px; } .mp__top span { display: none; } .mp__top a { min-height: 40px; padding: 0 12px; } }
.mp__hint { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); margin: 0; padding: 12px 18px; max-width: min(440px, calc(100% - 32px)); background: rgba(var(--stage-rgb), .94); border: 1px solid rgba(var(--white-rgb), .28); font-size: 15px; line-height: 1.45; color: var(--ink); text-align: center; pointer-events: none; }
.mp.is-active .mp__view { box-shadow: inset 0 0 0 1px rgba(var(--white-rgb), .35); }

/* ---------- region page, design of 3 Nov 2026 (MapDesktop): one-line head, map to the bottom of the first screen ---------- */
.mp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 10px 0 12px; margin: 0; }
.mp-head__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-head .crumbs { margin: 0; font-size: 13px; line-height: 1.3; }
.layout .mp-head .crumbs { margin: 0; }
.mp-head ~ section.mp { margin-top: 0; }
.mp-head .crumbs::before, .mp-head .crumbs::after { display: none; }
.page-head.mp-head h1 { margin: 0; font-size: 24px; line-height: 1.2; max-width: none; }
[data-sec] .page-head.mp-head h1::before { display: none; }
.mp-head__c { margin: 0; flex: 1; min-width: 16rem; font-size: 14px; line-height: 1.4; color: var(--ink-3); max-width: none; }
.mp-switch { position: relative; flex: none; }
.mp-switch summary { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px; border: 1px solid var(--rule); cursor: pointer; list-style: none; color: var(--ink); font-size: 15px; }
.mp-switch summary::-webkit-details-marker { display: none; }
.mp-switch summary span { color: var(--ink-3); }
.mp-switch summary span::after { content: " ▾"; }
.mp-switch[open] summary span::after { content: " ▴"; }
.mp-switch ol { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: 4px 0; width: 300px; max-width: none; background: var(--bg-1); border: 1px solid var(--rule); }
.mp-switch li a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 10px; align-items: baseline; min-height: var(--tap); padding: 8px 14px; text-decoration: none; color: var(--ink-2); }
.mp-switch li a:hover { color: var(--ink); background: rgba(var(--white-rgb), .04); }
.mp-switch li a[aria-current="page"] { color: var(--ink); box-shadow: inset 2px 0 0 var(--red-text); }
.mp-switch li span { font-size: 13px; color: var(--ink-4); }
.mp-switch li b { font-weight: 400; font-size: 15.5px; }
.mp-switch li i { font-style: normal; font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .page-head.mp-head h1 { font-size: 21px; } .mp-head__c { min-width: 0; flex-basis: 100%; order: 3; font-size: 13.5px; } .mp-switch ol { width: min(300px, calc(100vw - 32px)); }
  /* long region names (es, pt-br) shorten in the switch button instead of widening the page */
  .mp-switch { flex: 0 1 auto; min-width: 0; max-width: 100%; } .mp-switch summary { min-width: 0; } .mp-switch summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* way out and neighbours, top left */
.mp__top a + a { border-left: 1px solid rgba(var(--white-rgb), .16); color: var(--ink-2); }
@media (max-width: 760px) { .mp__top a + a { display: none; } }

/* kinds, top right of the map */
.mp__chips { position: absolute; right: 12px; top: 12px; z-index: 4; display: flex; border: 1px solid rgba(var(--white-rgb), .28); background: rgba(var(--stage-rgb), .9); }
.mp-chip { display: flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px; border: 0; background: none; cursor: pointer; font-size: 14.5px; color: var(--ink); }
.mp-chip + .mp-chip { border-left: 1px solid rgba(var(--white-rgb), .16); }
.mp-chip img { width: 22px; height: 22px; }
.mp-chip__n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.mp-chip[aria-pressed="false"] { color: var(--ink-4); }
.mp-chip[aria-pressed="false"] img { opacity: .3; filter: grayscale(1); }
.mp-chip:focus-visible { outline: 1px solid var(--ink); outline-offset: -3px; }
/* names only when the map is wide enough not to collide with the way-out bar; the icon and count always show */
.mp-chip__l { display: none; }
@media (min-width: 1600px) { .mp-chip__l { display: inline; } }
@media (max-width: 760px) { .mp__chips { right: auto; left: 8px; top: 56px; } .mp-chip { padding: 0 9px; min-height: 40px; } }

/* side panel: save line, two tabs, one panel at a time */
.mp-save--short { padding-bottom: 12px; }
.mp-save--short .mp-save__h { font-size: 17px; margin-bottom: 4px; }
.mp-save--short p { margin-bottom: 8px; }
.mp-save--short .mp-save__btn { min-height: 40px; padding: 0 14px; font-size: 15px; }
.mp-save--short .mp-save__where { margin: 8px 0 6px; }
.mp-save--short .mp-save__out .mp-save__big { font-size: 22px; }
.mp-tabs { display: flex; flex: none; border-bottom: 1px solid var(--rule-soft); }
.mp-tabs button { flex: 1; min-height: var(--tap); padding: 0 8px; border: 0; background: none; cursor: pointer; font-size: 14.5px; color: var(--ink-3); box-shadow: inset 0 -2px 0 transparent; }
.mp-tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red-text); }
.mp-tabs button:hover { color: var(--ink); }
.mp__all { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mp__all .mp__filters { display: flex; flex-direction: column; gap: 0; padding: 6px 0; }
.mp--region .mp-keys__scope { margin-top: 4px; }

/* "below: the table" strip under the map */
.mp__more { display: flex; align-items: center; justify-content: center; height: 36px; border-bottom: 1px solid var(--rule-soft); font-size: 14px; color: var(--ink-3); text-decoration: none; }
.mp__more::after { content: "⌄"; margin-left: 8px; }
.mp__more:hover { color: var(--ink); }
.mp:not(.is-ready) .mp__more { display: none; }

/* under the map */
.mp-intro { margin: 34px 0 0; max-width: 46rem; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.mp-kp { margin-top: 26px; }
.mp-table.is-short tbody tr:nth-child(n+13) { display: none; }
.mp-table__more { display: block; width: 100%; min-height: 46px; margin-top: 8px; border: 1px solid var(--rule); background: none; cursor: pointer; color: var(--ink-2); font: inherit; font-size: 15px; }
.mp-table__more:hover { color: var(--ink); border-color: var(--ink-3); }
.mp-pn { display: flex; justify-content: space-between; gap: 16px; margin: 24px 0 0; font-size: 15.5px; max-width: none; }

/* ---------- save checker page (design SaveDrop / SaveResult, 3 Nov 2026) ---------- */
.sc-head__g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px 48px; align-items: end; }
@media (max-width: 900px) { .sc-head__g { grid-template-columns: minmax(0, 1fr); } }
.sc-head .lede { margin-top: 0; }
.sc-head__l { font-size: 15px; color: var(--ink-3); margin: 10px 0 0; }
.sc { margin-top: 26px; }
.sc-drop { padding: 0; border: 0; }
.sc-drop__box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 24px 38px; border: 1px dashed var(--ink-4); background: rgba(var(--white-rgb), .02); text-align: center; color: var(--steel); }
.sc-drop.is-over .sc-drop__box, .mp-save.sc-drop.is-over { outline: 0; }
.sc-drop.is-over .sc-drop__box { border-color: var(--ink); background: rgba(var(--white-rgb), .05); }
.sc-drop .sc-drop__h { font-size: 24px; line-height: 1.25; color: var(--ink); margin: 6px 0 2px; }
.sc-drop .sc-drop__or { display: flex; align-items: center; gap: 12px; margin: 4px 0; color: var(--ink-3); }
.sc-drop__tap { display: none; }
/* phones and tablets can't drag a file: the box says what a tap does, and the button stands alone */
@media (hover: none) {
  .sc-drop__drag, .sc-drop .sc-drop__or > span { display: none; }
  .sc-drop__tap { display: inline; }
  .sc-drop__box { padding: 30px 20px 26px; }
}
.sc-drop .sc-drop__hint { font-size: 14px; color: var(--ink-4); margin: 6px 0 0; }
.sc-drop .sc-drop__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 12px 0 0; font-size: 14.5px; color: var(--ink-3); }
.sc-drop[data-state="done"] .mp-save__out { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.sc-drop[data-state="done"] .mp-save__out > * { margin: 0; }
.sc-demo-note { margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); }
.sc-res { margin-top: 18px; }
.sc-tabs { display: flex; border-bottom: 1px solid var(--rule-soft); }
.sc-tabs button { display: flex; flex-direction: column; align-items: flex-start; min-height: 52px; padding: 6px 18px 8px; border: 0; background: none; color: var(--ink-3); font-size: 17px; cursor: pointer; transition: color .15s; }
.sc-tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red-text); cursor: default; }
.sc-tabs button:hover { color: var(--ink); }
.sc-tabs small { font-size: 13.5px; color: var(--ink-4); }
@media (max-width: 600px) {
  /* all three tabs visible on a phone: equal thirds, the subtitle wraps to two lines at most */
  .sc-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-tabs button { min-width: 0; align-items: stretch; padding: 8px 8px 10px; font-size: 16px; text-align: left; }
  .sc-tabs button > * { min-width: 0; }
  .sc .sc-tabs button small, .sc .sc-tabs button[data-ctab="bosses"] small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; overflow: hidden; white-space: normal; line-height: 1.3; margin-top: 2px; }
}
.sc-tabs button[data-ctab="collect"] small { color: var(--k-gold, #ffd266); }
.sc-tabs button.is-due small { color: #ff9c40; }
.sc-tabs button[data-ctab="bosses"] small { color: var(--c-boss, #da774c); max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; padding: 22px 0 26px; border-bottom: 1px solid var(--rule-soft); }
@media (max-width: 760px) { .sc-sum { grid-template-columns: minmax(0, 1fr); } }
.sc-sum p { margin: 0; max-width: none; }
.sc-sum__k { font-size: 13.5px; color: var(--ink-3); }
.sc-sum__n { font-size: 34px; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-sum__n--gold { color: #ffd266; }
.sc-sum__s { font-size: 13.5px; color: var(--ink-4); }
.sc-sum__f { font-size: 17px; color: var(--ink); margin: 4px 0 6px !important; }
.sc-h { font-size: 22px; line-height: 1.3; margin: 34px 0 12px; }
.sc-regions { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
@media (max-width: 760px) { .sc-regions { grid-template-columns: minmax(0, 1fr); } }
.sc-regions li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0 10px; border-top: 1px solid var(--rule-soft); }
.sc-regions__n { font-size: 17px; color: var(--ink); }
.sc-regions__c { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.sc-regions__k { font-size: 14px; color: #ffd266; }
.sc-regions li.is-new .sc-regions__n, .sc-regions li.is-new .sc-regions__k { color: var(--ink-3); }
.sc-regions__w { font-size: 14px; color: var(--ink-3); text-align: right; }
.sc-regions .mp-bar { grid-column: 1 / -1; height: 3px; }
.sc-kinds { display: flex; flex-wrap: wrap; border: 1px solid var(--rule); width: fit-content; max-width: 100%; }
.sc-kinds button { min-height: var(--tap); padding: 0 14px; border: 0; background: none; cursor: pointer; font-size: 14.5px; color: var(--ink-3); }
.sc-kinds button + button { border-left: 1px solid var(--rule); }
.sc-kinds button span { font-variant-numeric: tabular-nums; }
.sc-kinds button[aria-pressed="true"] { color: var(--ink); background: rgba(var(--white-rgb), .06); box-shadow: inset 0 -2px 0 var(--red-text); }
.sc-list h3 { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-variant: small-caps; color: var(--ink-3); margin: 22px 0 4px; font-weight: 600; }
:lang(zh) .sc-list h3, :lang(ja) .sc-list h3, :lang(ko) .sc-list h3 { letter-spacing: 0; }
.sc-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--rule-soft); }
.sc-row img { width: 24px; height: 24px; }
.sc-row__t b { display: block; font-weight: 400; font-size: 16px; color: var(--ink); }
.sc-row__t b a { color: var(--ink); }
.sc-row__t small { display: block; font-size: 13.5px; color: var(--ink-4); }
.sc-row__go { font-size: 14.5px; white-space: nowrap; color: var(--ink-2); }
.sc-more { display: block; width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid var(--rule); background: none; cursor: pointer; color: var(--ink-2); font: inherit; font-size: 15px; }
.sc-next { list-style: none; margin: 0; padding: 0; max-width: none; }
.sc-next li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding: 10px 0; border-top: 1px solid var(--rule-soft); font-size: 16px; }
.sc-next li span { color: var(--ink-2); }
.sc-kept { margin: 28px 0 0; padding: 14px 16px; border-left: 2px solid var(--rule); font-size: 15px; color: var(--ink-3); max-width: none; }
.sc-kept b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.sc-steps { padding-left: 0; list-style: none; }
.sc-steps li { padding: 8px 0; border-top: 1px solid var(--rule-soft); }
/* the steps hang in the text column like the paragraphs around them */
@media (min-width: 1200px) { .main section > .sc-steps { clear: none; margin-left: calc(var(--hang) + 32px); } }
.sc-maps { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
@media (max-width: 1023px) { .sc-maps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-maps li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.sc-maps li > span { font-size: 13px; color: var(--ink-4); }
.sc-maps li > a { font-size: 17px; }
.sc-maps small { font-size: 13.5px; color: var(--ink-3); }

/* quest tab */
.sq-sum { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .sq-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .sq-sum > :first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .sq-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; } .sq-sum .sc-sum__n { font-size: 28px; } }
.sq-sum__w { font-size: 20px; color: var(--ink); margin: 2px 0 4px !important; }
.sq-dim { color: var(--ink-4); }
.sq-sec { margin-top: 8px; }
.sq-urgent { margin-top: 30px; border-top: 2px solid #ff9c40; }
.sq-urgent__h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.sq-urgent__h .sc-h { margin-top: 16px; border-top: 0; padding-top: 0; }
.sq-urgent__h .sc-h::before { content: none; }
.sq-urgent__h a { font-size: 15px; color: var(--ink-2); white-space: nowrap; margin-bottom: 8px; }
.sq-lede { margin: -4px 0 10px; font-size: 15px; color: var(--ink-3); max-width: none; }
.sq-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 6px 18px; align-items: start; padding: 12px 0; border-top: 1px solid var(--rule-soft); }
.sq-chip { font-size: 13px; line-height: 1.5; padding: 2px 6px; text-align: center; border: 1px solid var(--rule); color: var(--ink-3); margin-top: 2px; }
.sq-chip--active { color: var(--ink); border-color: var(--ink-3); }
.sq-chip--failed, .sq-chip--missed { text-decoration: line-through; }
.sq-chip--risk { color: #ff9c40; border-color: #ff9c40; }
.sq-row__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sq-row__n { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 17px; color: var(--ink); }
.sq-row__n a { color: var(--ink); }
.sq-row__n small { font-size: 13px; color: var(--ink-4); }
.sq-row__d { font-size: 15px; color: var(--ink-2); }
.sq-row__w { font-size: 14px; color: var(--ink-3); }
.sq-row__w a, .sq-row__d a { color: var(--ink-2); }
.sq-basis { display: inline-block; font-size: 12.5px; color: var(--ink-4); border-left: 1px solid var(--rule); padding-left: 8px; margin-left: 4px; }
.sq-go { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 14px; white-space: nowrap; }
.sq-go a { color: var(--ink-2); }
.sq-go .sq-report { font-size: 12.5px; color: var(--ink-4); }
.sq-go .sq-report:hover { color: var(--ink-2); }
.sq-later { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--rule-soft); font-size: 14.5px; color: var(--ink-3); max-width: none; }
.sq-none { margin: 24px 0; font-size: 16px; color: var(--ink-2); max-width: none; }
@media (max-width: 760px) {
  .sq-row { grid-template-columns: minmax(0, 1fr); }
  .sq-chip { justify-self: start; }
  .sq-go { flex-direction: row; justify-content: space-between; align-items: center; }
  .sq-go a { min-height: 36px; display: inline-flex; align-items: center; }
}

/* a collect quest's items under its row: the item art, where it is, whether the save has it */
.sq-tr { grid-column: 1 / -1; margin: 14px 0 4px; padding: 14px 0 0; border-top: 1px solid var(--rule-soft); }
.sq-tr summary { cursor: pointer; font-size: 16px; color: var(--ink); min-height: 32px; }
.sq-tr__g { margin: 18px 0 10px; font-size: 15px; color: var(--ink-2); max-width: none; }
.sq-tr__g span { margin-left: 6px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sq-tr__g.is-done { margin: 10px 0; color: var(--ink-3); }
.sq-tr__l { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px 22px; }
.sq-tr__l li { margin: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.sq-tr__l img { grid-row: 1 / 3; width: 64px; height: 64px; background: radial-gradient(60% 60% at 50% 60%, rgba(var(--light-rgb, 240, 230, 214), .08), transparent 70%), var(--bg-2, #1a1e21); }
.sq-tr__t { display: grid; gap: 2px; min-width: 0; }
.sq-tr__n { font-size: 16px; color: var(--ink); }
.sq-tr__w, .sq-tr__c { font-size: 14px; color: var(--ink-3); }
.sq-tr__c { color: var(--red-text); }
.sq-tr__s { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.sq-tr__l li.is-got .sq-tr__s { color: var(--ink-2); }
.sq-tr__l li.is-got img { opacity: .55; }
.sq-tr__l li.is-got .sq-tr__n { color: var(--ink-2); }
.sq-tr__go { grid-column: 3; font-size: 14px; white-space: nowrap; }
.sq-tr__give { margin: 16px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: none; }
.sq-tr__give b { color: var(--ink); font-weight: 600; }
@media (max-width: 520px) { .sq-tr__l { grid-template-columns: minmax(0, 1fr); } }

/* boss record (3 Nov 2026, second pass): the site's own language, not a dashboard. Kicker, one big line, a sentence,
   the difficulty as a baiwen seal (red only for seals), the costliest boss standing on the right like on a boss page;
   then the wall of bosses met, the home page's wall: dark squares, the boss-colour hairline, a 斩 seal on each kill. */
.sb-rec { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 48px; align-items: end; margin: 8px 0 0; padding: 18px 0 40px; border-bottom: 1px solid var(--rule); }
.sb-rec.is-solo { grid-template-columns: minmax(0, 1fr); }
.sb-q { margin: 22px 0 6px; padding: 2px 0 2px 20px; border-left: 3px solid var(--red, #c23a3a); max-width: none; }
.sb-q p { margin: 0; font-family: var(--kai, var(--serif)); font-size: var(--fs-h3, 26px); line-height: 1.45; color: var(--ink); max-width: none; }
.sb-q p:is(:lang(ja), :lang(zh), :lang(ko)) { hanging-punctuation: none; }   /* a hanging 」 pushed the phone page 4px wide */
.sb-q footer { margin-top: 6px; font-size: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sb-66 { margin: 8px 0 0; font-size: 17px; color: var(--c-boss, #da774c); max-width: none; }
.sb-dare { margin: 8px 0 0; font-family: var(--kai, var(--serif)); font-size: var(--fs-h3, 23px); color: var(--ink); max-width: none; }
.sb-rec p { max-width: none; }
.sb-kick { margin: 0 0 14px; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.sb-kick::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 14px; background: var(--red, #c23a3a); }
.sb-head::before, .sb-head::after, .sb-wh__h::before, .sb-wh__h::after { content: none !important; }   /* not a section heading: no site rule above it */
.sb-head, .sb-wh__h { border-top: 0 !important; padding-top: 0 !important; }
.sb-head { margin: 0; font-family: var(--kai, var(--serif)); font-size: var(--fs-h1, 58px); line-height: 1.05; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.sb-num { font-family: var(--serif); font-size: 1.9em; font-weight: 500; line-height: .8; letter-spacing: -.02em; font-variant-numeric: lining-nums; margin: 0 .1em 0 0; vertical-align: -.06em; }   /* no left margin: the figure starts under the kicker */
.sb-lede { margin: 18px 0 0; font-size: var(--fs-lede, 24px); line-height: var(--lh-lede, 1.4); color: var(--ink); }
.sb-meta { margin: 10px 0 0; font-size: var(--fs-body, 18px); color: var(--ink-2); }
.sb-diff { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; font-size: var(--fs-small, 14.5px); color: var(--ink-3); }
.sb-diff img { display: block; height: 72px; width: auto; transform: rotate(-2deg); }
/* the share panel: the card as a tilted print beside the buttons */
.sb-share { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px 26px; align-items: start; margin-top: 30px; padding: 22px; background: rgba(255, 255, 255, .025); border: 1px solid var(--rule-soft); }
.sb-thumb { display: block; width: 150px; aspect-ratio: 3 / 4; padding: 0; border: 0; background: #0a0c0e; cursor: pointer; box-shadow: 0 14px 30px rgba(0, 0, 0, .55); transform: rotate(-2.5deg); transition: transform .2s; }
.sb-thumb:hover { transform: rotate(0deg) translateY(-3px); }
.sb-thumb img { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .35s; }
.sb-thumb.is-in img { opacity: 1; }
.sb-share__b { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; min-width: 0; }
.sb-share__h { flex-basis: 100%; margin: 0 0 2px; font-family: var(--kai, var(--serif)); font-size: var(--fs-h3, 23px); color: var(--ink); max-width: none; }
@media (max-width: 520px) { .sb-share { grid-template-columns: 96px minmax(0, 1fr); gap: 14px 16px; padding: 14px; } .sb-thumb { width: 96px; } }
.sb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 30px; }
.mp .sb-go, .sb-modal .sb-go, .sb-go { color: var(--bg, #0f1113); }   /* .mp button would make it inherit the light ink */
.sb-go { min-height: 48px; padding: 0 26px; border: 0; background: var(--white, #fcf9f3); color: var(--bg, #0f1113); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.sb-go:hover { background: #fff; }
.sb-go:focus-visible, .sb-lk:focus-visible, .sb-sort button:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; }
.sb-links { display: inline-flex; flex-wrap: wrap; gap: 6px 22px; }
.sb-lk { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 16.5px; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: .22em; }
.sb-lk:hover { text-decoration-color: currentColor; }
.sb-lk.is-done { color: var(--ink-2); text-decoration: none; }
.sb-tg { flex-basis: 100%; display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.sb-tg input { width: 17px; height: 17px; margin: 0; accent-color: var(--red, #c23a3a); }
.sb-note { flex-basis: 100%; margin: -6px 0 0; font-size: 14px; color: var(--ink-3); }
.sb-url { min-height: 44px; padding: 0 10px; width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); font: inherit; font-size: 13px; }
/* the nemesis is one unit beside the headline: number and name over the top-left of the portrait, never stretched by the share box below */
.sb-rec__f { position: relative; margin: 0; align-self: start; display: grid; place-items: end center; height: 580px; }
.sb-rec__f::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 60%; background: radial-gradient(50% 60% at 50% 100%, rgba(var(--light-rgb, 240, 230, 214), .10), transparent 70%); pointer-events: none; }
.sb-rec__f img { position: relative; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.sb-rec__f figcaption { position: absolute; z-index: 1; left: 0; top: 0; display: grid; gap: 4px; }
.sb-out { font: 500 120px/.8 var(--serif); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(var(--white-rgb, 255, 255, 255), .42); font-variant-numeric: lining-nums; }
.sb-cap { font-family: var(--kai, var(--serif)); font-size: 18px; color: var(--ink-2); }
.sb-wh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 40px 0 20px; }
.sb-wh__h { margin: 0; font-family: var(--kai, var(--serif)); font-size: var(--fs-h3, 23px); color: var(--ink); }
.sb-wh__h span { margin-left: 6px; font-family: var(--serif); color: var(--ink-3); font-weight: 400; }
.sb-sort { display: inline-flex; gap: 20px; margin: 0; }
.sb-sort button { min-height: 40px; padding: 0; border: 0; background: none; font: inherit; font-size: 15.5px; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; }
.sb-sort button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--red, #c23a3a); }
.sb-wall { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 30px 18px; }
.sb-wall li { margin: 0; min-width: 0; }
.sb-c { display: grid; gap: 4px; text-decoration: none; color: var(--ink-2); }
.sb-p { position: relative; display: block; aspect-ratio: 1; margin-bottom: 8px; overflow: hidden; background: radial-gradient(70% 55% at 50% 100%, rgba(var(--light-rgb, 240, 230, 214), .09), transparent 70%), var(--bg-2, #1a1e21); }
.sb-p::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-boss, #da774c); }
.sb-p > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.sb-kill { position: absolute; right: 8px; bottom: 10px; width: 26px; height: 26px; transform: rotate(-4deg); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.sb-n { font-size: 16px; line-height: 1.35; color: var(--ink); }
.sb-m { font-size: 14.5px; line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sb-wall li.is-not .sb-p > img:first-child { opacity: .5; filter: grayscale(1) brightness(.8); }
.sb-wall li.is-not .sb-p::after { background: var(--rule); }
.sb-wall li.is-not .sb-n { color: var(--ink-2); }
a.sb-c:hover .sb-n { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: .2em; }
a.sb-c:focus-visible { outline: 2px solid var(--red-text); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .sb-p > img:first-child { transition: transform .5s var(--ease-out, ease); transform-origin: 50% 100%; }
  a.sb-c:hover .sb-p > img:first-child { transform: scale(1.05); }
}
.sb-unmet { margin: 28px 0 0; font-size: 15px; color: var(--ink-3); max-width: none; }
@media (max-width: 900px) {
  .sb-rec { grid-template-columns: minmax(0, 1fr); padding-bottom: 28px; }
  /* the number comes first on a phone: the boss stands behind it on the right, faded into the page */
  /* on a phone the boss stands beside the number only, and is gone before the quote starts */
  .sb-rec__f { position: absolute; top: 0; right: -8px; width: 40%; height: 190px; min-height: 0; place-items: start end; pointer-events: none; opacity: .6; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 92%); mask-image: linear-gradient(to bottom, #000 45%, transparent 92%); }
  .sb-rec__f img { max-height: 260px; }
  .sb-rec__t { position: relative; z-index: 1; }
  .sb-out, .sb-cap { display: none; }
  .sb-head { font-size: 40px; }
  .sb-lede { font-size: 20px; }
  .sb-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 10px; }
  .sb-n { font-size: 14px; }
  .sb-m { font-size: 12.5px; }
  .sb-kill { width: 20px; height: 20px; right: 5px; bottom: 7px; }
}
.sb-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .78); }
.sb-modal__in { display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 100%; }
.sb-modal__img { max-width: min(540px, 100%); max-height: calc(100vh - 120px); height: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.sb-modal__b { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sb-modal .sb-go, .sb-modal .sb-lk { display: inline-flex; align-items: center; text-decoration: none; }
.sb-modal .sb-lk { text-decoration: underline; text-decoration-color: var(--link-line); }
.sb-modal__b { align-items: center; gap: 12px 24px !important; }
.sb-modal__busy { color: var(--ink-2); font-size: 16px; }
/* 4 Nov 2026 (owner: "tighten the tab bar"): on phones the way-out link and the kind chips share one top row (the chips
   scroll sideways when a region has many kinds, fading at the edge), and the zoom buttons go back to the bottom right as on
   desktop, so the map loses one bar instead of two. At the far zooms a phone shows 160 markers in 360px: smaller icons. */
@media (max-width: 760px) {
  .mp__chips { left: auto; right: 8px; top: 8px; max-width: calc(100% - 16px - 88px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18px); mask-image: linear-gradient(to left, transparent 0, #000 18px); }
  .mp__chips::-webkit-scrollbar { display: none; }
  .mp-chip { flex: none; gap: 4px; padding: 0 7px; min-height: 40px; }
  .mp-chip img { width: 20px; height: 20px; }
  .mp-chip:last-child { padding-right: 16px; }
  .mp__ctl { top: auto; bottom: 8px; right: 8px; }
  .mp.is-far .mk > button { width: 20px; height: 20px; }
  .mp.is-far .mk--key > button { width: 28px; height: 28px; }
  .mp.is-far .mk--loot > button { width: 14px; height: 14px; }
  .mp.is-vfar .mk > button { width: 15px; height: 15px; }
  .mp.is-vfar .mk--key > button { width: 21px; height: 21px; }
}
@media (max-width: 760px) { .mp:has(.mp__detail:not([hidden])) .mp__ctl { visibility: hidden; } } /* the detail panel covers the bottom; its see-through ground showed the buttons */

/* things on the ground (5 Nov 2026): a small dot in the colour the game lights them with; no game icon exists for them */
.mk-dot { display: inline-block; flex: none; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .7); background: #6fd08a; }
.mk-dot--rainbow { background: conic-gradient(#ff5e5e, #ffd84a, #6fe07a, #5ec8ff, #b07cff, #ff5e5e); }
.mk-dot--orangeL, .mk-dot--orangeS, .mk-dot--gold { background: #ffa53d; }
.mk-dot--flame, .mk-dot--jade { background: #3ee08a; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .7), 0 0 6px #3ee08a; }
.mk-dot--purpleL, .mk-dot--purpleS, .mk-dot--iron { background: #b58cff; }
.mk-dot--blueL, .mk-dot--blue, .mk-dot--blueS, .mk-dot--wood { background: #6cb6ff; }
.mk-dot--green { background: #8fd49c; }
.mk-dot--white { background: #e9e4da; opacity: .75; }
.mk--pickup > button { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.mk--pickup .mk-dot { width: 11px !important; height: 11px !important; transition: transform .15s var(--ease-out); }
.mk--pickup.mk--key .mk-dot { width: 15px !important; height: 15px !important; }
.mk--pickup > button:hover .mk-dot, .mk--pickup > button:focus-visible .mk-dot { transform: scale(1.3); }
.mk--pickup.is-found .mk-dot { filter: grayscale(1) brightness(.7); }
.mk--pickup.mk--key > button { width: 26px; height: 26px; }
.mp.is-far .mk--pickup > button { width: 16px; height: 16px; }
.mp.is-vfar .mk--pickup > button { width: 12px; height: 12px; }
.mp.is-vfar .mk--pickup .mk-dot { width: 7px !important; height: 7px !important; }
.mp-chip .mk-dot { width: 13px; height: 13px; }
.mp-chip[aria-pressed="false"] .mk-dot { opacity: .3; filter: grayscale(1); }
.mp-f__p .mk-dot { width: 12px; height: 12px; margin: 8px; }
.mp__detail .mp-d__g { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); margin: 8px 0 0; }
.mp__detail .mp-d__g .mk-dot { width: 11px; height: 11px; }
.mp__detail .mp-d__sp, .mp-li__sp { color: var(--ink); font-style: normal; }
.mp__detail .mp-d__sp { font-size: 13.5px; margin: 6px 0 0; }
/* Crimson Forest: before and after the snow */
.mp__season { position: absolute; left: 12px; top: calc(12px + var(--tap) + 8px); z-index: 4; display: flex; border: 1px solid rgba(var(--white-rgb), .28); background: rgba(var(--stage-rgb), .9); }
.mp__season button { min-height: var(--tap); padding: 0 14px; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 14.5px; cursor: pointer; }
.mp__season button + button { border-left: 1px solid rgba(var(--white-rgb), .16); }
.mp__season button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red-text); }
.mp__season button:focus-visible { outline: 1px solid var(--ink); outline-offset: -3px; }
.mp-table__sp { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
/* a spot opened from a guide page's map card (#at=u,v): the same red ring as on the card */
.mk--at { z-index: 3; pointer-events: none; }
.mk--at > span { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border: 4px solid var(--red-text); border-radius: 50%; box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); transform: translate(-50%, -50%) scale(var(--inv, 1)); }
/* the guide pages that show this spot (map deep links, batch 3) */
.mp__detail .mp-d__gd { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--rule-soft); }
.mp__detail .mp-d__gh { font-size: 13.5px; color: var(--ink-3); margin: 0 0 2px; }
.mp__detail .mp-d__gd ul { margin: 0; }
.mp__detail .mp-d__gd li { display: block; padding: 0; border-top: 0; }
.mp__detail .mp-d__gd a { display: flex; align-items: baseline; gap: 10px; min-height: 36px; padding: 6px 0; line-height: 1.4; color: var(--ink); text-decoration: none; }
.mp__detail .mp-d__gd a:hover { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; }
.mp__detail .mp-d__gk { flex: none; min-width: 4em; font-size: 13.5px; color: var(--ink-3); }