.mafa-maps, .mafa-maps *, .mafa-maps *::before, .mafa-maps *::after { box-sizing: border-box; }
.mafa-maps {
  --mafa-gold: #e8c58b;
  --mafa-muted: #bfb6a8;
  width: min(1030px, calc(100% - 24px));
  margin: 24px auto 0;
  padding: clamp(16px, 3vw, 30px);
  border: 1px solid #675238;
  border-top: 2px solid #aa7843;
  border-radius: 12px;
  color: #f5eee0;
  background: radial-gradient(ellipse at 12% 0, #35291d 0, transparent 50%), #1c1a19;
  font: 15px/1.6 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}
.mafa-maps-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.mafa-maps .mafa-maps-kicker { color: var(--mafa-gold); font-size: 12px; letter-spacing: .12em; }
.mafa-maps-kicker > span { display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: #d09a56; transform: rotate(45deg); vertical-align: .13em; }
.mafa-maps h2 { margin: 4px 0 5px; color: #fbefda; font-size: clamp(24px, 3.6vw, 36px); line-height: 1.2; }
.mafa-maps .mafa-maps-intro { color: var(--mafa-muted); }
.mafa-maps .mafa-maps-hint { flex: 0 0 auto; padding: 4px 10px; border: 1px solid #564534; border-radius: 5px; color: #e3d3bd; font-size: 12px; font-variant-numeric: tabular-nums; }
.mafa-maps-hint > span:first-child { color: var(--mafa-gold); font-weight: bold; }
.mafa-maps-hint-sep { margin: 0 5px; color: #99846a; }
.mafa-maps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; gap: 12px; }
.mafa-maps .mafa-map-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1.84 / 1;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #584939;
  border-radius: 8px;
  background: #211d18;
  color: #fff6e8;
  text-decoration: none;
}
.mafa-maps .mafa-map-card-featured { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.mafa-map-card img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .2s ease; }
.mafa-map-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.21), transparent 32%, rgba(13,10,8,.10) 51%, rgba(13,10,8,.95) 100%); pointer-events: none; }
.mafa-maps .mafa-map-card:hover { border-color: #d8aa72; color: #fff6e8; }
.mafa-map-card:hover img { transform: scale(1.025); }
.mafa-map-card:focus-visible, .mafa-map-viewer button:focus-visible, .mafa-map-viewer a:focus-visible { outline: 2px solid #ffe0a7; outline-offset: 2px; }
.mafa-map-index, .mafa-map-zoom { position: absolute; z-index: 1; top: 10px; border: 1px solid rgba(234,197,139,.45); border-radius: 4px; background: rgba(25,20,15,.82); color: #f7dfb7; }
.mafa-map-index { left: 10px; padding: 1px 6px; font: 11px/1.7 Consolas, "Microsoft YaHei", monospace; }
.mafa-map-index > span { opacity: .6; }
.mafa-map-zoom { right: 10px; display: grid; place-items: center; width: 26px; height: 26px; font-size: 17px; line-height: 1; }
.mafa-map-caption { position: absolute; z-index: 1; inset: auto 12px 11px; display: block; text-shadow: 0 1px 4px #000; }
.mafa-map-name { display: block; color: #fff3da; font-size: 19px; line-height: 1.25; }
.mafa-map-detail { display: block; margin-top: 3px; color: #efe2d0; font-size: 12px; line-height: 1.45; }
.mafa-map-card-featured .mafa-map-caption { inset: auto 18px 17px; }
.mafa-map-card-featured .mafa-map-name { font-size: clamp(23px, 3.4vw, 32px); }
.mafa-map-card-featured .mafa-map-detail { font-size: 14px; }
.mafa-maps .mafa-maps-foot { margin-top: 13px; color: #b8ab97; font-size: 12px; text-align: right; }

.mafa-map-viewer:not([open]) { display: none; }
.mafa-map-viewer { width: min(1080px, calc(100% - 24px)); max-width: calc(100% - 24px); max-height: calc(100vh - 24px); padding: 0; overflow: auto; border: 1px solid #937343; border-radius: 10px; background: #1d1a16; color: #f7ead5; }
.mafa-map-viewer::backdrop { background: rgba(12,10,8,.86); }
.mafa-map-viewer-head, .mafa-map-viewer-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }
.mafa-map-viewer-head h3 { color: #fff0d6; font-size: 19px; }
.mafa-map-viewer-head p { color: #d1c5b3; font-size: 13px; }
.mafa-map-viewer-media { background: #100e0c; }
.mafa-map-viewer-media img { display: block; width: 100%; height: auto; max-height: min(70vh, 730px); object-fit: contain; }
.mafa-map-viewer-media img[hidden] { display: none; }
.mafa-map-viewer button { min-width: 40px; min-height: 36px; padding: 2px 8px; border: 1px solid #72593b; border-radius: 5px; background: #342a20; color: #f9e1b5; font: inherit; cursor: pointer; }
.mafa-map-viewer .mafa-map-close { font-size: 24px; line-height: 1; }
.mafa-map-viewer button:hover { background: #52402c; }
.mafa-map-viewer-tools { flex-wrap: wrap; }
.mafa-map-viewer-pager { display: flex; align-items: center; gap: 10px; }
.mafa-map-viewer-pager > span { min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.mafa-maps .mafa-map-viewer-tools a { color: #f5d7a1; font-size: 13px; text-decoration: underline; }

@media (max-width: 760px) {
  .mafa-maps-head { align-items: start; flex-direction: column; margin-bottom: 13px; }
  .mafa-maps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .mafa-maps .mafa-map-card-featured { grid-row: auto; aspect-ratio: 1.72 / 1; }
}
@media (max-width: 500px) {
  .mafa-maps-grid { grid-template-columns: minmax(0, 1fr); }
  .mafa-maps .mafa-map-card-featured { grid-column: auto; }
  .mafa-map-card-featured .mafa-map-caption { inset: auto 12px 11px; }
  .mafa-map-viewer-head, .mafa-map-viewer-tools { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mafa-map-card img { transition: none; }
  .mafa-map-card:hover img { transform: none; }
}