/* ==========================================================================
   1. Overlapping CSS: Enhanced Brightness & Readability for Current Rating Card
   ========================================================================== */

#card-current-rating {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 58, 138, 0.95) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.8);
  box-shadow: 0 10px 35px rgba(14, 165, 233, 0.35), inset 0 0 25px rgba(56, 189, 248, 0.25);
}

#card-current-rating .rating-metric-kicker {
  color: #7DD3FC;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

/* Crisp, high-contrast, non-blurry numeric rating styling */
#card-current-rating .rating-metric-val,
#metric-current-elo {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(56, 189, 248, 0.5) !important;
  filter: none !important;
  opacity: 1 !important;
}

#metric-current-tier-title {
  color: #FACC15 !important;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
}

#card-current-rating .rating-metric-subtext {
  color: #E2E8F0;
  font-weight: 500;
}


/* ==========================================================================
   2. Media Query CSS: Responsive Matrix Table for Smaller Screens
   ========================================================================== */

@media (max-width: 768px) {
  .rating-matrix-table-wrap {
    border: none;
    background: transparent;
  }

  .rating-matrix-table,
  .rating-matrix-table tbody,
  .rating-matrix-table tr,
  .rating-matrix-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }

  .rating-matrix-table thead {
    display: none;
  }

  .rating-matrix-table tr {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }

  .rating-matrix-table tr.active-tier-row {
    background: rgba(56, 189, 248, 0.15);
    border: 1.5px solid #38BDF8;
    border-left: 5px solid #38BDF8;
  }

  .rating-matrix-table td {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    color: #E2E8F0;
    font-size: 0.875rem;
    word-break: break-word;
  }

  .rating-matrix-table td:last-child {
    border-bottom: none;
  }

  /* Inject mobile accessibility data labels via CSS generated content */
  .rating-matrix-table td::before {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.725rem;
    letter-spacing: 0.05em;
    color: #38BDF8;
    min-width: 130px;
    max-width: 130px;
    flex-shrink: 0;
    text-align: left;
  }

  .rating-matrix-table td:nth-child(1)::before { content: "Rank:"; }
  .rating-matrix-table td:nth-child(2)::before { content: "Tier & Symbol:"; }
  .rating-matrix-table td:nth-child(3)::before { content: "ELO Threshold:"; }
  .rating-matrix-table td:nth-child(4)::before { content: "Color Token:"; }
  .rating-matrix-table td:nth-child(5)::before { content: "Firewall Limits:"; }
}