/* Explorers Path — refined
   Принцип выравнивания: карточки/мини-плитки — по центру; длинные тексты/списки — слева. */

.explorer-main-heading {
  margin-bottom: var(--space-6);
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(49, 133, 70, 0.13);
  text-align: center; /* Заголовок страницы — центр */
}

.lead {
  font-size: var(--font-size-lg);
  color: var(--color-success);
  margin-bottom: var(--space-10);
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;   /* Вводный текст — центр контейнера */
  text-align: left;     /* но сам текст — слева для читабельности */
}

/* 1) Survivor Character Cards */
.survivor-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}
.survivor-card {
  gap: var(--space-6);
  min-height: 220px;
  cursor: pointer;
  outline: none;
  border-left: 4px solid var(--color-primary);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  background: linear-gradient(120deg, rgba(49,133,70,0.04), rgba(209,169,76,0.03) 80%);
}
.survivor-card:hover,
.survivor-card:focus-within {
  border-color: var(--color-warning);
  box-shadow: var(--shadow-lg);
  transform: scale(1.025);
}
.survivor-avatar {
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: #23281a linear-gradient(135deg, rgba(49,133,70,.09), transparent 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-2);
}
.survivor-avatar img {
  object-fit: cover;
  border-radius: var(--radius-md);
}
.survivor-info { flex: 1; text-align: left; }
.survivor-bio {
  margin-bottom: var(--space-2);
  color: var(--color-gray-200);
  font-size: var(--font-size-sm);
}
.survivor-stats {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-warning);
  margin-bottom: var(--space-3);
}
.survivor-stats dt { font-weight: 500; }
.survivor-stats dd { font-weight: 700; margin-left: 2px; }
.pick-survivor-btn {
  font-size: var(--font-size-sm);
  min-width: 120px;
  padding: var(--space-2) var(--space-4);
}

/* 2) Island Overview Map */
.island-map-section {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  align-items: flex-start;
  background: rgba(35,40,26,.92);
  padding: var(--space-6) var(--space-4);
  text-align: center; /* заголовки/подписи секции — центр */
}
.island-map-wrapper {
  position: relative;
  flex: 1 1 340px;
  margin-left: auto;
  margin-right: auto; /* центрируем карту */
}
.island-map-image {
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-md);
  display: block;
}
.map-hotspot {
  position: absolute;
  width: 34px;
  height: 34px;
  background: rgba(209,169,76,0.91);
  color: #fff;
  border: 2.5px solid var(--color-background);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  z-index: 11;
  cursor: pointer;
  transition: box-shadow var(--transition), background var(--transition), transform var(--transition);
  box-shadow: 0 2px 6px 0 rgba(49,133,70,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}
.map-hotspot::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: var(--color-primary);
  border-radius: 50%;
  margin: auto;
}
.map-hotspot:hover,
.map-hotspot:focus-visible {
  box-shadow: 0 4px 18px 0 rgba(49,133,70,0.27);
  background: var(--color-success);
  transform: translate(-50%,-52%); /* лёгкий “подскок” */
}
.map-hotspot-tooltip {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%,120%);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  font-size: var(--font-size-sm);
  z-index: 20;
  min-width: 160px;
  pointer-events: none;
  text-align: center;
  opacity: 0.96;
  border: 1.5px solid var(--color-primary);
  display: none;
}
.map-hotspot-tooltip[aria-hidden="false"] { display: block; }

.island-regions-list {
  flex: 2 1 360px;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  margin-top: var(--space-3);
  text-align: left;      /* длинный список — слева */
  margin-left: auto;
  margin-right: auto;
  max-width: 60ch;
}
.risk-tip {
  color: var(--color-danger);
  font-size: 0.97em;
  font-style: italic;
}

/* 3) Survival Challenges Timeline */
.challenge-timeline {
  display: grid;
  gap: var(--space-5);
  margin-left: 0;
  margin-bottom: var(--space-6);
}
.challenge-step {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  background: rgba(49,133,70,0.11);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 1.5px 9px rgba(209,169,76,0.04);
}
.challenge-icon { width: 183px; padding-top: 6px; flex-shrink: 0; }
.challenge-content h3 {
  margin-top: 0;
  margin-bottom: var(--space-2);
  font-size: 1.08em;
}
.challenge-tip {
  color: var(--color-warning);
  font-size: var(--font-size-xs);
  margin-left: var(--space-1);
}

/* 4) Gear & Equipment Cards */
.gear-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-8);
}
.gear-card {
  padding: var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 320px;
  background: linear-gradient(120deg, rgba(49,133,70,.04) 18%, rgba(209,169,76,0.03) 80%);
  border-left: 4px solid var(--color-warning);
  text-align: left; /* карточка с описанием — слева */
}
.gear-card img {
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  background: #22271c;
  box-shadow: 0 1.5px 9px rgba(209,169,76,0.09);
}
.gear-info h3 { font-size: 1.17em; margin-bottom: 2px; }
.gear-info p { font-size: var(--font-size-sm); margin-bottom: var(--space-2); max-width: 42ch; }
.gear-rating {
  color: var(--color-success);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}
.gear-rating-val { color: var(--color-warning); margin-left: 2px; }
.gear-reviews {
  font-size: var(--font-size-xs);
  color: var(--color-gray-200);
  margin-bottom: var(--space-1);
}

/* 5) Pathfinder's Guide (expandable) */
.expandable-tips details {
  background: rgba(49,133,70,0.07);
  border: 1px solid var(--color-gray-700);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
  box-shadow: var(--shadow-xs);
}
.expandable-tips details[open] {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-warning);
}
.expandable-tips summary {
  font-weight: 600;
  cursor: pointer;
  outline: none;
  color: var(--color-primary);
  margin-bottom: 3px;
}
.community-tip {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
  color: var(--color-gray-400);
}
.community-tip a {
  color: var(--color-warning);
  font-weight: 600;
  text-decoration: underline;
}

/* 6) Progress/Milestone Tracker */
.milestone-tracker {
  background: linear-gradient(110deg, rgba(209,169,76,0.03), rgba(49,133,70,0.07) 90%);
  text-align: center; /* подзаголовки/бейджи — центр */
}
.milestone-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  align-items: flex-start;
  margin-bottom: var(--space-5);
  list-style: none;
  justify-content: center;
}
.milestone-point {
  position: relative;
  font-size: var(--font-size-sm);
  color: var(--color-gray-200);
  padding-left: 38px;
  min-width: 170px;
  text-align: left; /* описание шага — слева */
}
.milestone-badge {
  display: inline-block;
  width: 35px;
  height: 35px;
  font-weight: 700;
  font-size: var(--font-size-base);
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 29px;
  border: 2px solid var(--color-warning);
  box-shadow: 0 1px 6px rgba(49,133,70,0.11);
  margin-right: var(--space-2);
}
.milestone-point.current .milestone-badge {
  background: var(--color-warning);
  color: #1e2017;
  border-color: var(--color-success);
}
.milestone-rewards ul {
  list-style: none;
  display: flex;
  gap: var(--space-4);
  font-size: 1.3em;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.milestone-rewards p {
  margin: 0 auto;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--color-warning);
}
.badge-unlocked { font-size: 1.2em; margin-right: 5px; }

/* 7) Campfire Stories */
.campfire-stories-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.campfire-story {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-left: 4px solid var(--color-success);
  min-height: 130px;
  background: rgba(49,133,70,0.05);
  padding: var(--space-3);
}
.story-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.story-avatar {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1px 5px rgba(49,133,70,0.12);
  border: 1.5px solid var(--color-warning);
}
.story-author { color: var(--color-primary); }
.campfire-story blockquote {
  color: var(--color-gray-100);
  font-size: var(--font-size-sm);
  font-style: italic;
  margin: 0 0 0 7px;
  border-left: 3px solid var(--color-success);
  padding-left: 11px;
}

/* Submit Story */
.submit-your-story {
  margin-top: var(--space-4);
  padding: var(--space-6) var(--space-4);
  text-align: left;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
#story-submit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
#story-submit-form label {
  font-size: var(--font-size-sm);
  color: var(--color-gray-400);
}
#story-submit-form input,
#story-submit-form textarea {
  font-size: var(--font-size-base);
  background: var(--color-background);
}
#story-submit-form .button {
  align-self: flex-start;
  margin-top: var(--space-1);
}
.form-response {
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
  color: var(--color-success);
  font-weight: 600;
}
.form-response[aria-hidden="false"] { display: block; }
.form-response[hidden] { display: none; }

/* ================== RESPONSIVE ================== */
@media (max-width: 900px) {
  .island-map-section {
    flex-direction: column;
    gap: var(--space-6);
  }
  .island-map-wrapper,
  .island-regions-list {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .explorer-main-heading { font-size: 2rem; }
  .survivor-cards-grid,
  .gear-catalog-grid,
  .campfire-stories-list {
    grid-template-columns: 1fr;
  }
  .challenge-step { flex-direction: column; gap: var(--space-3); }
  .island-map-image { max-width: 100vw; }
  .milestone-list { flex-direction: column; gap: var(--space-3); align-items: stretch; }
  .pick-survivor-btn { width: 100%; } /* удобнее тапать на мобилке */
}