/* RF-AVALON Market V61.0.95
   - EXP has one dedicated progression panel instead of sitting under the level.
   - ungraded filled items receive a neutral grade-0 style frame.
   - progression/summary captions use the same framed visual language. */

/* Detailed character card: level stays clean; EXP lives with character progression. */
.character-details.v95-experience-relocated .details-level > strong {
  display: none !important;
}

.character-details.v95-experience-relocated .details-level {
  min-height: 105px;
  gap: 0;
}

.character-exp-overview-v95 {
  --v95-exp-progress: 0%;
  margin: 12px 14px 0;
  padding: 11px 13px 12px;
  border: 1px solid #3c465a;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 46%),
    #1a2130;
  box-shadow: inset 0 1px rgba(255,255,255,.018);
}

.character-exp-title-v95,
.character-caption-frame-v95 {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(240, 163, 48, .42);
  border-radius: 4px;
  background: rgba(240, 163, 48, .075);
  color: #e9a63d !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1.1;
  letter-spacing: .105em !important;
  text-transform: uppercase;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.character-exp-title-v95 {
  margin-bottom: 10px;
}

.character-exp-line-v95 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 7px;
}

.character-exp-line-v95 span {
  color: #8995a9;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.character-exp-line-v95 strong {
  color: #f0f3f8;
  font-size: 13px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.character-exp-track-v95 {
  position: relative;
  height: 6px;
  overflow: hidden;
  border: 1px solid #30394b;
  border-radius: 999px;
  background: #121824;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}

.character-exp-track-v95 i {
  display: block;
  width: var(--v95-exp-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9d6820 0%, #d8942e 62%, #ffc45f 100%);
  box-shadow: 0 0 10px rgba(240,163,48,.28);
  transition: width .28s ease;
}

.character-exp-overview-v95.is-loading .character-exp-track-v95 i {
  width: 18%;
  opacity: .42;
  animation: rfv95-exp-loading 1.25s ease-in-out infinite alternate;
}

.character-exp-overview-v95.is-unavailable .character-exp-line-v95 strong {
  color: #8490a3;
}

/* The progression section already had a border; make the top block read as one deliberate framed unit. */
.character-progression {
  border-color: #3c465a !important;
  box-shadow: 0 10px 24px rgba(3, 7, 13, .12);
}

/* Grade 0 / no grade: do not invent a grade label, only give the icon a neutral silver frame. */
.equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable) {
  --rfv95-grade-zero: #7f8997;
  overflow: visible;
  border-color: #687381 !important;
  box-shadow:
    inset 0 0 0 1px #080b0c,
    inset 0 0 13px rgba(90, 103, 118, .13) !important;
}

.equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable)::before {
  z-index: 4;
  inset: -2px;
  border: 1px solid #8994a2 !important;
  opacity: .78 !important;
  box-shadow:
    0 0 3px rgba(137,148,162,.32),
    inset 0 0 3px rgba(137,148,162,.16) !important;
  animation: rfv95-grade-zero-aura 4.8s ease-in-out infinite !important;
}

.equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable)::after {
  content: "";
  position: absolute;
  z-index: 5;
  pointer-events: none;
  inset: -3px;
  padding: 1px;
  border-radius: 3px;
  background: conic-gradient(
    from var(--rfv94-grade-angle, 0deg),
    transparent 0deg 270deg,
    rgba(156,168,184,.08) 286deg,
    rgba(207,216,228,.62) 306deg,
    rgba(245,248,252,.92) 316deg,
    rgba(173,185,201,.35) 330deg,
    transparent 348deg 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 2px rgba(175,187,202,.3));
  animation: rfv94-grade-tracer 5.4s linear infinite;
}

.equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable):hover::before,
.equipment-slot.filled:not(.graded):not(.v61-expired-temporary):not(.is-unavailable):focus-visible::before {
  opacity: 1 !important;
  border-color: #a9b5c4 !important;
  box-shadow:
    0 0 5px rgba(169,181,196,.42),
    inset 0 0 4px rgba(169,181,196,.2) !important;
}

@keyframes rfv95-exp-loading {
  from { transform: translateX(-12%); }
  to { transform: translateX(420%); }
}

@keyframes rfv95-grade-zero-aura {
  0%, 100% { opacity: .66; }
  50% { opacity: .92; }
}

@media (max-width: 680px) {
  .character-exp-overview-v95 {
    margin: 10px 10px 0;
    padding: 10px 11px 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-exp-track-v95 i,
  .equipment-slot.filled:not(.graded)::before,
  .equipment-slot.filled:not(.graded)::after {
    animation: none !important;
    transition: none !important;
  }
}