.map-experience {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.map-mode-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.map-mode-row::-webkit-scrollbar { display: none; }

.map-mode-row button {
  flex: 0 0 auto;
  min-width: 64px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 800;
}

.map-mode-row button.is-active {
  border-color: rgba(125, 211, 252, 0.72);
  background: rgba(14, 165, 233, 0.22);
  color: #e0f2fe;
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.16) inset;
}

.map-focus-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.48), rgba(30, 41, 59, 0.86));
  color: #f8fafc;
  text-align: left;
}

.map-focus-card[hidden] { display: none; }
.map-focus-card > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.map-focus-card small { color: #fde68a; font-size: 0.7rem; font-weight: 800; }
.map-focus-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.94rem; }
.map-focus-card em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cbd5e1; font-size: 0.76rem; font-style: normal; }
.map-focus-card b { color: #7dd3fc; font-size: 0.72rem; white-space: nowrap; }
.map-focus-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(250, 204, 21, 0.15); font-size: 1.25rem; }

.map-tile--recent-focus {
  z-index: 45 !important;
  animation: mapFocusPulse 1s ease-in-out infinite alternate;
  outline: 3px solid #fde047 !important;
  outline-offset: 1px;
}

.map-linked-event {
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.map-linked-event:active { background: rgba(56, 189, 248, 0.12); }
.map-linked-event::after { content: " 地図へ"; color: #7dd3fc; font-size: 0.72rem; font-weight: 800; }

.map-mode--territory .map-tile:not([class*="map-tile--territory-"]) { opacity: 0.25; filter: saturate(0.35); }
.map-mode--territory .map-tile[class*="map-tile--territory-"] { filter: saturate(1.45) brightness(1.08); }

.map-mode--settlement .map-tile:not(.map-tile--settled) { opacity: 0.24; filter: grayscale(0.65); }
.map-mode--settlement .map-tile--settled { opacity: 1; z-index: 4; transform: scale(1.08); filter: brightness(1.15); }

.map-mode--miracle .map-tile:not(.map-tile--landmark):not([class*="map-tile--effect-"]) { opacity: 0.2; filter: grayscale(0.75); }
.map-mode--miracle .map-tile--landmark,
.map-mode--miracle .map-tile[class*="map-tile--effect-"] { opacity: 1; z-index: 4; filter: brightness(1.18) saturate(1.35); }

.map-mode--character .map-tile { opacity: 0.22; filter: grayscale(0.75); }
.map-mode--character .map-tile:has([data-named-character-fallback]),
.map-mode--character .map-tile--has-character { opacity: 1; z-index: 5; filter: none; transform: scale(1.08); }

@keyframes mapFocusPulse {
  from { box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.55), 0 0 8px rgba(250, 204, 21, 0.5); }
  to { box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.18), 0 0 20px rgba(250, 204, 21, 0.95); }
}

@media (max-width: 720px) {
  .map-experience { margin: 10px 0; }
  .map-focus-card { min-height: 58px; padding: 9px 10px; }
  .map-focus-icon { width: 34px; height: 34px; }
  .map-focus-card b { display: none; }
  .map-linked-event::after { display: inline; }
}