/* ============================================================
   Итоги месяца: карточка-картинка и расшифровка под ней.
   Подключается после style.css.
   ============================================================ */

.mn-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; font-size: 13px; color: var(--text-dim); }

.mn-card {
  background: var(--panel, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.mn-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mn-card-tag { font: 700 10.5px Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.mn-card-note { font-size: 12px; color: var(--text-faint); }
.mn-empty-title { margin: 0 0 12px; font: 600 20px Oswald, sans-serif; color: var(--text); }

.mn-formats { display: flex; gap: 6px; }
.mn-chip {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim); font: 600 12.5px Inter, sans-serif;
}
.mn-chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #1a1300); }

.mn-image { display: block; border-radius: var(--radius-sm); overflow: hidden; background: rgba(0, 0, 0, 0.35); }
.mn-image img { display: block; width: 100%; height: auto; }
.mn-image.story { max-width: 420px; margin: 0 auto; }

.mn-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.mn-btn {
  display: inline-block; padding: 9px 16px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink, #1a1300);
  font: 700 13px Inter, sans-serif; text-decoration: none;
}
.mn-btn:hover { filter: brightness(1.07); }
.mn-btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--line-soft); }
.mn-share-note { font-size: 12px; color: var(--text-faint); word-break: break-all; }

.mn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.mn-stat { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px 12px; }
.mn-stat b { display: block; font: 600 22px Oswald, sans-serif; color: var(--text); }
.mn-stat span { font-size: 11.5px; color: var(--text-faint); }
.mn-delta { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); }
.mn-delta.is-up { color: #7fe3a1; }
.mn-delta.is-down { color: #ff9f9f; }

.mn-list { margin: 14px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.mn-sub { font: 700 11px Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin: 16px 0 8px; }
.mn-tanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.mn-tank {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: 'art name' 'art sub';
  gap: 2px 10px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.025);
  color: inherit; text-decoration: none;
}
.mn-tank:hover { border-color: var(--accent); }
.mn-tank img { grid-area: art; width: 46px; height: 32px; object-fit: contain; }
.mn-tank-name { grid-area: name; font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-tank-sub { grid-area: sub; font-size: 11px; color: var(--text-faint); }

.mn-medals { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-medal { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.mn-medal img { width: 22px; height: 22px; object-fit: contain; }
.mn-note { margin: 14px 0 0; font-size: 12px; color: var(--text-faint); }
.mn-note a { color: var(--accent); text-decoration: none; }

.mn-side { padding: 14px 16px; }
.mn-month { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); color: inherit; text-decoration: none; font-size: 13.5px; }
.mn-month:first-of-type { border-top: 0; }
.mn-month.active { color: var(--accent); }
.mn-month i { font-style: normal; font-size: 11.5px; color: var(--text-faint); }

/* Общий макет на телефоне поднимает сайдбар над колонкой; здесь главное —
   картинка, поэтому возвращаем порядок. */
@media (max-width: 760px), (max-width: 1000px) and (max-height: 520px) {
  .layout-month .sidebar-col { order: 1; }
  .mn-image.story { max-width: 100%; }
}