/* Version 31.1 - Club area redesign
   A focused visual reset for Club, Management, Identity and History pages. */

/* Shared club pages */
.club296-page,
.identity-layout,
.legacy-hero,
.legacy-tabs,
.legacy-kpis,
.legacy-grid,
.management-tabs,
.management-hero,
.management-kpis,
.management-grid,
.management-title,
.facility-grid,
.staff-grid,
.sponsor-grid,
.budget-layout {
  width: min(1480px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

/* Club overview */
.club296-page { gap: 16px; }
.club296-header {
  position: relative;
  overflow: hidden;
  min-height: 138px;
  padding: 24px 28px;
  border: 0;
  border-radius: 20px;
  background:
    linear-gradient(100deg, rgba(6,24,20,.96), rgba(9,38,31,.88) 58%, rgba(17,58,47,.72)),
    url('../img/v10/fans-arena.webp') center 42%/cover;
  color: #fff;
  box-shadow: 0 18px 46px rgba(9,28,23,.14);
}
.club296-header:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--v10-lime, #d8ff19);
}
.club296-clubmark {
  width: 82px; height: 82px; flex-basis: 82px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.club296-logo { max-width: 68px; max-height: 68px; }
.club296-title .eyebrow { color: var(--v10-lime, #d8ff19); }
.club296-title h1 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.65rem); }
.club296-title p { color: rgba(255,255,255,.76); font-size: .86rem; }
.club296-actions { position: relative; z-index: 1; }
.club296-actions .secondary-button {
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.club296-actions .primary-button { box-shadow: 0 8px 22px rgba(216,255,25,.18); }

.club296-kpis {
  gap: 10px;
  margin: 0;
}
.club296-kpis article {
  min-height: 104px;
  padding: 18px 20px;
  border: 1px solid #e4e9e6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16,33,29,.045);
}
.club296-kpis article b { font-size: clamp(1.2rem, 2vw, 1.65rem); }
.club296-layout {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: start;
}
.club296-main, .club296-side { gap: 16px; min-width: 0; }
.club296-side { position: static; }
.club296-page .card {
  border: 1px solid #e4e9e6;
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(16,33,29,.04);
}
.club296-next { padding: 22px; }
.club296-match {
  padding: 18px 20px;
  border-color: #e1e8e4;
  background: linear-gradient(135deg, #f8fbf9, #f2f6f4);
}
.club296-modules {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.club296-modules > a {
  min-height: 112px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 15px;
  background: #fbfcfb;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.club296-modules > a:hover {
  transform: translateY(-2px);
  border-color: #bfcac4;
  box-shadow: 0 12px 26px rgba(16,33,29,.07);
}
.club296-modules > a > span {
  margin-top: auto;
  padding: 7px 9px;
  border-radius: 999px;
  background: #eef3f0;
}
.club296-shortcuts { grid-template-columns: repeat(3, minmax(0,1fr)); }
.club296-shortcuts a { min-height: 48px; display: grid; place-items: center; }
.club296-side .card { padding: 18px; }
.club296-players > a {
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 11px;
}
.club296-player-face {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  background: #e9efec;
  border: 1px solid #dfe6e2;
}

/* Infrastructure / management */
.v22-scene.v22-management-scene { display: none !important; }
.management-tabs {
  position: static !important;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
  padding: 6px !important;
  border: 1px solid #dfe6e2 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(16,33,29,.04) !important;
}
.management-tabs a {
  flex: 0 0 auto;
  padding: 10px 14px !important;
  border-radius: 9px !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
}
.management-tabs a.active {
  background: #0d2a22 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.management-hero {
  min-height: 188px !important;
  margin-bottom: 14px;
  padding: 24px 26px !important;
  border-radius: 18px !important;
  align-items: center !important;
  background-position: center 43% !important;
}
.management-hero h2 { font-size: clamp(1.65rem, 3vw, 2.45rem); }
.management-hero p { margin-bottom: 0; }
.management-money { min-width: 210px; }
.management-kpis { gap: 10px; margin-bottom: 14px; }
.management-kpis article { min-height: 104px; padding: 17px; border-radius: 15px; }
.management-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.management-module {
  min-height: 142px;
  padding: 18px;
  border-radius: 15px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.management-module:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16,33,29,.07); }
.management-title { margin-top: 18px; margin-bottom: 12px; }
.management-title h2 { font-size: 1.55rem; }
.facility-grid, .staff-grid, .sponsor-grid { gap: 10px; }
.facility-card, .staff-card, .sponsor-card { border-radius: 15px; }

/* Identity */
.identity-hero {
  width: min(1480px, calc(100% - 32px));
  min-height: 208px !important;
  margin: 14px auto 16px;
  padding: 26px 30px !important;
  border-radius: 20px !important;
  background-position: center 46% !important;
}
.identity-hero h2 { font-size: clamp(1.8rem, 3vw, 2.75rem) !important; }
.identity-badge { width: 92px; height: 92px; border-radius: 22px; }
.identity-layout {
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 16px !important;
  align-items: start;
}
.identity-editor { padding: 24px !important; }
.identity-side {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 132px;
}
.identity-side .card { border-radius: 17px; padding: 20px; }
.identity-group {
  padding: 20px 0 !important;
  border-top: 1px solid #e5ebe7 !important;
}
.identity-group:first-of-type { border-top: 0 !important; }
.identity-group-head { margin-bottom: 14px; }
.form-grid { gap: 12px !important; }
.identity-form input,
.identity-form select,
.identity-form textarea {
  min-height: 44px;
  border-color: #dce4df !important;
  border-radius: 11px !important;
  background: #fbfcfb !important;
}
.identity-form textarea { min-height: 150px; }
.crest-library {
  grid-template-columns: repeat(6, minmax(0,1fr)) !important;
  max-height: 390px;
  overflow: auto;
  padding: 4px;
}
.crest-option { border-radius: 13px !important; }
.color-grid { gap: 10px !important; }

/* History */
.legacy-hero {
  min-height: 216px !important;
  margin-top: 14px;
  margin-bottom: 14px;
  padding: 26px 30px !important;
  border-radius: 20px !important;
  background-position: center 50% !important;
}
.legacy-hero h2 { color: #fff !important; font-size: clamp(1.8rem, 3vw, 2.8rem) !important; }
.legacy-crest { min-width: 120px; }
.legacy-crest img { max-width: 82px; max-height: 82px; }
.legacy-tabs {
  position: static !important;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px !important;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(16,33,29,.04);
}
.legacy-tabs a { padding: 10px 13px; border-radius: 9px; font-size: .76rem; }
.legacy-tabs a.active { background: #0d2a22 !important; color: #fff; }
.legacy-kpis { gap: 10px; margin-bottom: 14px; }
.legacy-kpis article { padding: 18px; border-radius: 15px !important; }
.legacy-grid { gap: 14px; }
.legacy-grid .card, .legacy-record-strip article { border-radius: 16px !important; }
.legacy-record-strip { width: min(1480px, calc(100% - 32px)); margin-left: auto; margin-right: auto; }
.legacy-page-head,
.legacy-records,
.hall-grid,
.history-world-grid,
.history-season-list,
.history-news-feed,
.generation-grid,
.legacy-chronicle,
.museum-layout {
  width: min(1480px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}
.hall-grid { gap: 12px; }
.hall-grid .card { border-radius: 16px; }

@media (max-width: 1050px) {
  .club296-layout { grid-template-columns: 1fr; }
  .club296-side { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .identity-layout { grid-template-columns: 1fr !important; }
  .identity-side { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .crest-library { grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
}

@media (max-width: 760px) {
  .club296-page,
  .identity-layout,
  .legacy-hero,
  .legacy-tabs,
  .legacy-kpis,
  .legacy-grid,
  .management-tabs,
  .management-hero,
  .management-kpis,
  .management-grid,
  .management-title,
  .facility-grid,
  .staff-grid,
  .sponsor-grid,
  .budget-layout,
  .identity-hero,
  .legacy-record-strip,
  .legacy-page-head,
  .legacy-records,
  .hall-grid,
  .history-world-grid,
  .history-season-list,
  .history-news-feed,
  .generation-grid,
  .legacy-chronicle,
  .museum-layout {
    width: min(100% - 20px, 1480px);
  }
  .club296-header { align-items: flex-start; flex-wrap: wrap; padding: 20px; }
  .club296-actions { width: 100%; }
  .club296-actions a { flex: 1; text-align: center; }
  .club296-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .club296-modules { grid-template-columns: 1fr; }
  .club296-side { grid-template-columns: 1fr; }
  .management-hero { align-items: flex-start !important; flex-direction: column !important; min-height: 250px !important; }
  .management-grid { grid-template-columns: 1fr; }
  .identity-hero { align-items: flex-start !important; flex-direction: column; }
  .identity-side { grid-template-columns: 1fr; }
  .crest-library { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
  .legacy-hero { min-height: 260px !important; align-items: flex-start; }
  .legacy-crest { display: none; }
}

@media (max-width: 480px) {
  .club296-kpis, .club296-shortcuts { grid-template-columns: 1fr; }
  .club296-match { align-items: stretch; flex-direction: column; }
  .club296-match .primary-button { width: 100%; text-align: center; }
  .crest-library { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}