/* Arena Teney — World Navigation destination: Experience r01a
 * Presentation-only layer for Central Square -> Experience Table.
 * Keeps existing state/player formulas and renderer authoritative.
 */

body[data-screen="experience"] {
  --exp-gold: #bfa66b;
  --exp-gold-bright: #dcc98d;
  --exp-gold-soft: rgba(191, 166, 107, .18);
  --exp-gold-line: rgba(207, 188, 137, .42);
  --exp-ivory: #ece6d8;
  --exp-muted: #96958f;
  --exp-stone: #0b0d0e;
  --exp-stone-2: #111416;
  --exp-current: #d7bd78;
  --bg-start: #100d07;
  --bg-mid: #151006;
  --bg-end: #080704;
  --glow: #7a5718;
  --fog-1: rgba(191, 166, 107, .15);
  --fog-2: rgba(112, 77, 20, .12);
  --fog-3: rgba(191, 166, 107, .07);
}

#screen-experience {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  color: var(--exp-ivory);
}

#screen-experience .experience-layout {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

#screen-experience .experience-sidebar {
  display: none;
}

#screen-experience .experience-main,
#screen-experience .experience-hero {
  min-width: 0;
}

#screen-experience .experience-hero {
  position: relative;
  overflow: hidden;
  padding: 17px 14px 15px;
  border: 1px solid var(--exp-gold-line) !important;
  border-radius: 3px 17px 3px 17px !important;
  background:
    radial-gradient(circle at 84% 4%, rgba(191, 166, 107, .13), transparent 29%),
    linear-gradient(155deg, rgba(24, 22, 16, .98), rgba(11, 13, 14, .99) 58%, rgba(6, 8, 9, .99)) !important;
  box-shadow:
    0 20px 46px rgba(0, 0, 0, .34),
    inset 0 0 0 1px rgba(255, 250, 225, .018),
    inset 0 -46px 80px rgba(0, 0, 0, .18) !important;
}

#screen-experience .experience-hero::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(207, 188, 137, .07);
  border-radius: 1px 12px 1px 12px;
}

#screen-experience .skills-header-copy,
#screen-experience .experience-summary-top,
#screen-experience .exp-table-shell,
#screen-experience .exp-legend {
  position: relative;
  z-index: 1;
}

#screen-experience .ui-kicker {
  color: var(--exp-gold-bright) !important;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .16em;
}

#screen-experience .skills-header-copy h2 {
  color: var(--exp-ivory) !important;
  font-size: clamp(27px, 8vw, 38px) !important;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .65);
}

#screen-experience .experience-summary-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-top: 15px;
}

#screen-experience .experience-current-card,
#screen-experience .experience-next-card,
#screen-experience .experience-reward-card,
#screen-experience .exp-summary-card {
  border: 1px solid rgba(207, 188, 137, .24) !important;
  border-radius: 2px 12px 2px 12px !important;
  background:
    linear-gradient(180deg, rgba(27, 24, 17, .92), rgba(10, 12, 12, .96)) !important;
  box-shadow: inset 0 1px rgba(255, 245, 210, .025);
}

#screen-experience .experience-current-card,
#screen-experience .experience-next-card,
#screen-experience .experience-reward-card {
  padding: 13px !important;
}

#screen-experience .experience-level-emblem {
  border-color: rgba(220, 201, 141, .48) !important;
  background: radial-gradient(circle at 40% 28%, rgba(191, 166, 107, .20), rgba(8, 9, 9, .92) 68%) !important;
  color: var(--exp-gold-bright) !important;
  box-shadow: 0 0 24px rgba(191, 166, 107, .08);
}

#screen-experience .experience-current-card small,
#screen-experience .experience-next-card small,
#screen-experience .experience-reward-card small,
#screen-experience .muted {
  color: var(--exp-muted) !important;
}

#screen-experience .experience-current-card h3,
#screen-experience .experience-current-card strong,
#screen-experience .experience-next-card strong,
#screen-experience .experience-reward-card strong {
  color: var(--exp-ivory) !important;
}

#screen-experience .bar.exp {
  background: #080907 !important;
  border: 1px solid rgba(207, 188, 137, .20);
  box-shadow: inset 0 0 8px rgba(0,0,0,.5);
}

#screen-experience .bar.exp > i {
  background: linear-gradient(90deg, #8f6b29, #d0ad58 58%, #e5d08e) !important;
  box-shadow: 0 0 13px rgba(208, 173, 88, .22);
}

#screen-experience .experience-reward-icon {
  border-color: rgba(207, 188, 137, .20) !important;
  background: rgba(7, 8, 8, .62) !important;
  color: var(--exp-gold-bright) !important;
}

#screen-experience .exp-table-shell {
  margin-top: 14px !important;
  max-height: 66vh;
  overflow: auto;
  border: 1px solid rgba(207, 188, 137, .34) !important;
  border-radius: 2px 13px 2px 13px !important;
  background: rgba(6, 8, 8, .96) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 246, 216, .012), 0 12px 30px rgba(0,0,0,.22);
  scrollbar-color: rgba(220, 201, 141, .55) rgba(8, 9, 9, .75);
}

#screen-experience .exp-table {
  background: #080a0a !important;
  color: var(--exp-ivory) !important;
}

#screen-experience .exp-table th {
  background: linear-gradient(180deg, #211b10, #12110d) !important;
  border-bottom-color: rgba(220, 201, 141, .42) !important;
  color: var(--exp-gold-bright) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px !important;
  letter-spacing: .09em !important;
}

#screen-experience .exp-table td {
  border-bottom-color: rgba(207, 188, 137, .12) !important;
  background: rgba(8, 10, 10, .92) !important;
  color: #d9d5ca;
}

#screen-experience .exp-table tr:nth-child(even) td {
  background: rgba(18, 18, 15, .94) !important;
}

#screen-experience .exp-table tr.milestone td {
  background: rgba(122, 90, 31, .16) !important;
  color: #d8c27f !important;
}

#screen-experience .exp-table tr.current td {
  background: linear-gradient(90deg, rgba(132, 98, 34, .34), rgba(72, 57, 28, .23)) !important;
  border-top: 1px solid rgba(232, 204, 124, .72) !important;
  border-bottom: 1px solid rgba(232, 204, 124, .72) !important;
  color: #f2e6bd !important;
  box-shadow: none !important;
}

#screen-experience .exp-table tr.current td:first-child {
  box-shadow: inset 4px 0 0 #d8b55e !important;
}

#screen-experience .exp-level-badge {
  border-color: rgba(207, 188, 137, .38) !important;
  border-radius: 2px 9px 2px 9px !important;
  background: rgba(5, 7, 7, .62);
  color: #e4dfd1;
}

#screen-experience .exp-table tr.milestone .exp-level-badge,
#screen-experience .exp-table tr.current .exp-level-badge {
  border-color: rgba(220, 201, 141, .60) !important;
  color: var(--exp-gold-bright) !important;
}

#screen-experience .exp-legend {
  gap: 7px !important;
  margin-top: 10px !important;
}

#screen-experience .exp-legend span {
  border-color: rgba(207, 188, 137, .20) !important;
  background: rgba(8, 9, 9, .68) !important;
  color: #9f9d95 !important;
}

@media (min-width: 860px) {
  #screen-experience {
    max-width: 1120px;
  }

  #screen-experience .experience-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  #screen-experience .experience-sidebar {
    display: block;
    border-color: rgba(207, 188, 137, .26) !important;
    background: linear-gradient(180deg, rgba(22,20,15,.96), rgba(8,10,10,.98)) !important;
  }

  #screen-experience .experience-summary-top {
    grid-template-columns: 1.2fr .85fr 1fr;
  }
}

@media (max-width: 640px) {
  #screen-experience .experience-hero {
    padding: 14px 10px 13px;
  }

  #screen-experience .exp-table-shell {
    max-height: 68vh;
    border-left-width: 1px;
    border-right-width: 1px;
  }

  #screen-experience .exp-table th,
  #screen-experience .exp-table td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}