/* Arena Teney — Experience r01h table contract + mobile readability
 * Presentation-only table pass.
 * Aligns the six visible columns with the authoritative Experience renderer,
 * keeps current rows green and boss milestones gold, and improves iPhone pan.
 */

#screen-experience .exp-table-shell {
  overflow: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 82px;
}

#screen-experience .exp-table {
  width: 100% !important;
  min-width: 680px !important;
  table-layout: fixed;
}

#screen-experience .exp-table th,
#screen-experience .exp-table td {
  box-sizing: border-box;
  text-align: center;
}

#screen-experience .exp-table th {
  min-height: 46px;
  padding: 10px 8px !important;
  white-space: normal;
  vertical-align: middle;
  line-height: 1.18;
}

#screen-experience .exp-table th > span {
  display: inline-block;
}

#screen-experience .exp-table td {
  padding-left: 8px !important;
  padding-right: 8px !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#screen-experience .exp-table th:nth-child(1),
#screen-experience .exp-table td:nth-child(1) { width: 82px; }
#screen-experience .exp-table th:nth-child(2),
#screen-experience .exp-table td:nth-child(2) { width: 138px; }
#screen-experience .exp-table th:nth-child(3),
#screen-experience .exp-table td:nth-child(3) { width: 108px; }
#screen-experience .exp-table th:nth-child(4),
#screen-experience .exp-table td:nth-child(4) { width: 112px; }
#screen-experience .exp-table th:nth-child(5),
#screen-experience .exp-table td:nth-child(5) { width: 108px; }
#screen-experience .exp-table th:nth-child(6),
#screen-experience .exp-table td:nth-child(6) { width: 132px; }

/* Keep the level visible while the user pans the six-column table horizontally. */
#screen-experience .exp-table th:first-child,
#screen-experience .exp-table td:first-child {
  position: sticky !important;
  left: 0;
  background-clip: padding-box !important;
  border-right: 1px solid rgba(215, 188, 112, .22) !important;
}

#screen-experience .exp-table th:first-child {
  z-index: 6 !important;
  background: linear-gradient(180deg, #211b10, #12110d) !important;
}

#screen-experience .exp-table td:first-child {
  z-index: 2;
}

/* Explicitly preserve the already accepted semantic row colors with a sticky first cell. */
#screen-experience .exp-table tr.current td:first-child {
  background:
    radial-gradient(circle at 18% 50%, rgba(166, 207, 148, .15), transparent 45%),
    linear-gradient(90deg, rgba(83, 112, 71, .52), rgba(35, 51, 31, .96)) !important;
}

#screen-experience .exp-table tr.milestone:not(.current) td:first-child {
  background:
    radial-gradient(circle at 18% 50%, rgba(214, 176, 76, .13), transparent 45%),
    linear-gradient(90deg, rgba(116, 82, 21, .48), rgba(43, 35, 18, .97)) !important;
}

/* Small, non-intrusive pan hint under the table. */
#screen-experience .exp-legend::after {
  content: "↔ Проведи по таблице влево / вправо";
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(207, 188, 137, .18);
  border-radius: 999px;
  background: rgba(8, 9, 9, .62);
  color: #a8a294;
  font-size: 9px;
  line-height: 1.2;
}

@media (max-width: 640px) {
  #screen-experience .exp-table {
    min-width: 646px !important;
  }

  #screen-experience .exp-table th {
    padding: 9px 6px !important;
    font-size: 9px !important;
    letter-spacing: .055em !important;
  }

  #screen-experience .exp-table td {
    padding: 11px 6px !important;
    font-size: 10.5px !important;
  }

  #screen-experience .exp-table th:nth-child(1),
  #screen-experience .exp-table td:nth-child(1) { width: 78px; }
  #screen-experience .exp-table th:nth-child(2),
  #screen-experience .exp-table td:nth-child(2) { width: 128px; }
  #screen-experience .exp-table th:nth-child(3),
  #screen-experience .exp-table td:nth-child(3) { width: 102px; }
  #screen-experience .exp-table th:nth-child(4),
  #screen-experience .exp-table td:nth-child(4) { width: 104px; }
  #screen-experience .exp-table th:nth-child(5),
  #screen-experience .exp-table td:nth-child(5) { width: 102px; }
  #screen-experience .exp-table th:nth-child(6),
  #screen-experience .exp-table td:nth-child(6) { width: 132px; }

  #screen-experience .exp-table-shell {
    scroll-padding-left: 78px;
  }
}