/* Component extensions: interactive map */
.map-layout{display:grid;gap:1rem}.map-toolbar{display:flex;flex-wrap:wrap;gap:.5rem}.map-viewport{position:relative;aspect-ratio:4/3;min-height:360px;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-medium);background:#121020;touch-action:none}.map-canvas{position:absolute;inset:0;transform-origin:0 0;background:radial-gradient(circle at 30% 30%,#292044,#121020 60%);background-size:cover}.map-placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--color-text-muted);padding:2rem;border:1px dashed var(--color-border)}.map-pin{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);translate:-50% -50%;width:38px;height:38px;border:3px solid white;border-radius:50% 50% 50% 0;background:var(--color-pink);rotate:-45deg;box-shadow:var(--shadow-small);cursor:pointer}.map-pin span{display:block;rotate:45deg;font-size:0}.map-detail{padding:1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-medium)}.map-filters{display:flex;flex-wrap:wrap;gap:.4rem}.filter-drawer-button{display:inline-flex}@media(min-width:900px){.map-layout{grid-template-columns:1fr 280px}.filter-drawer-button{display:none}.map-viewport{aspect-ratio:16/10;min-height:520px}}@media(max-width:899px){.map-filters{display:none}.map-filters.open{display:flex;padding:1rem;background:var(--color-surface);border-radius:var(--radius-small)}}



 /* =========================================================
   CHARACTER PAGE — MOBILE
========================================================= */

@media (max-width: 699px) {

  .character-split,
  .character-split.character-split-reverse {
    display: block !important;
  }

  .character-split-content,
  .character-split-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .character-split-content {
    margin-bottom: 1.5rem;
  }

  .character-split-image {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  .character-split-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: var(--radius-medium);
  }

}