/* Arena Teney — Experience r01b semantic polish
 * Presentation-only overrides for Central Square -> Experience Table.
 * No formula, reward, level, travel or screen-owner changes.
 */

body[data-screen="experience"] {
  --exp-row: #151611;
  --exp-row-alt: #11130f;
  --exp-row-text: #f0ece1;
  --exp-boss: #d8ba64;
  --exp-boss-soft: rgba(151, 108, 28, .32);
  --exp-current-green: #b9d6ad;
  --exp-current-green-bright: #d9f0cf;
  --exp-current-green-soft: rgba(107, 145, 91, .34);
}

/* Reward summary: replace ambiguous icon-only cards with readable labels. */
#screen-experience .experience-reward-icons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin-top: 10px !important;
}

#screen-experience .experience-reward-icon {
  position: relative;
  min-width: 0;
  min-height: 82px;
  padding: 12px 10px 10px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(216, 194, 132, .30) !important;
  border-radius: 2px 11px 2px 11px !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(205, 177, 104, .08), transparent 42%),
    linear-gradient(180deg, rgba(19, 19, 15, .96), rgba(8, 10, 9, .98)) !important;
  font-size: 0 !important;
  text-align: left !important;
  box-shadow: inset 0 1px rgba(255, 245, 213, .025);
}

#screen-experience .experience-reward-icon::before {
  display: block;
  color: #a9a392;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#screen-experience .experience-reward-icon:nth-child(1)::before { content: "Характеристики"; }
#screen-experience .experience-reward-icon:nth-child(2)::before { content: "Усиления"; }
#screen-experience .experience-reward-icon:nth-child(3)::before { content: "Золото"; }
#screen-experience .experience-reward-icon:nth-child(4)::before { content: "Статус"; }

#screen-experience .experience-reward-icon small {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  color: var(--exp-gold-bright) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-align: left;
}

#screen-experience .experience-reward-icon:nth-child(4) small {
  font-size: 16px !important;
  color: #eee7d8 !important;
}

/* Ordinary levels: lighter warm graphite, still subordinate to milestones/current. */
#screen-experience .exp-table td {
  background: linear-gradient(90deg, rgba(24, 25, 20, .98), rgba(15, 17, 14, .98)) !important;
  color: var(--exp-row-text) !important;
  border-bottom-color: rgba(207, 188, 137, .16) !important;
}

#screen-experience .exp-table tr:nth-child(even) td {
  background: linear-gradient(90deg, rgba(20, 22, 18, .98), rgba(12, 14, 12, .98)) !important;
}

#screen-experience .exp-level-badge {
  border-color: rgba(207, 188, 137, .42) !important;
  background: rgba(10, 11, 9, .72) !important;
  color: #f0ece2 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 246, 216, .015);
}

/* Every fifth level is a boss milestone. */
#screen-experience .exp-table tr.milestone td {
  background:
    radial-gradient(circle at 12% 50%, rgba(214, 176, 76, .10), transparent 34%),
    linear-gradient(90deg, rgba(116, 82, 21, .40), rgba(53, 42, 19, .31) 58%, rgba(31, 28, 18, .95)) !important;
  color: #f1d98a !important;
  border-top: 1px solid rgba(222, 190, 98, .28) !important;
  border-bottom: 1px solid rgba(222, 190, 98, .34) !important;
}

#screen-experience .exp-table tr.milestone td:first-child {
  box-shadow: inset 4px 0 0 rgba(222, 190, 98, .78) !important;
}

#screen-experience .exp-table tr.milestone .exp-level-badge {
  min-width: 46px;
  padding-top: 6px;
  padding-bottom: 5px;
  border-color: rgba(229, 199, 112, .72) !important;
  background: linear-gradient(180deg, rgba(61, 46, 17, .94), rgba(15, 15, 11, .90)) !important;
  color: #f5dc8f !important;
  box-shadow: 0 0 18px rgba(216, 186, 100, .08), inset 0 0 0 1px rgba(255, 238, 181, .04);
}

#screen-experience .exp-table tr.milestone .exp-level-badge::after {
  content: "БОСС";
  display: block;
  margin-top: 3px;
  color: #b99b50;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 6px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .13em;
}

/* Current level: separate semantic color from boss milestones. */
#screen-experience .exp-table tr.current td,
#screen-experience .exp-table tr.current:nth-child(even) td,
#screen-experience .exp-table tr.current.milestone td {
  background:
    radial-gradient(circle at 15% 50%, rgba(166, 207, 148, .13), transparent 37%),
    linear-gradient(90deg, rgba(83, 112, 71, .44), rgba(42, 62, 37, .34) 58%, rgba(20, 27, 19, .96)) !important;
  color: var(--exp-current-green-bright) !important;
  border-top: 1px solid rgba(185, 214, 173, .72) !important;
  border-bottom: 1px solid rgba(185, 214, 173, .72) !important;
}

#screen-experience .exp-table tr.current td:first-child,
#screen-experience .exp-table tr.current.milestone td:first-child {
  box-shadow: inset 5px 0 0 #a9c99a !important;
}

#screen-experience .exp-table tr.current .exp-level-badge,
#screen-experience .exp-table tr.current.milestone .exp-level-badge {
  min-width: 52px;
  border-color: rgba(198, 225, 185, .78) !important;
  background: linear-gradient(180deg, rgba(55, 76, 49, .94), rgba(16, 22, 15, .94)) !important;
  color: var(--exp-current-green-bright) !important;
  box-shadow: 0 0 20px rgba(156, 195, 139, .10), inset 0 0 0 1px rgba(230, 245, 222, .04);
}

#screen-experience .exp-table tr.current .exp-level-badge::after,
#screen-experience .exp-table tr.current.milestone .exp-level-badge::after {
  content: "ВЫ ЗДЕСЬ";
  display: block;
  margin-top: 3px;
  color: #a9c99a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 6px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
}

@media (max-width: 640px) {
  #screen-experience .experience-reward-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #screen-experience .experience-reward-icon {
    min-height: 76px;
    padding: 10px 9px 9px !important;
  }

  #screen-experience .experience-reward-icon small {
    font-size: 18px !important;
  }
}