.table-scroll {
    overflow-x: auto; /* enables horizontal scroll when needed */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    min-width: 570px; /* keep columns usable on medium screens */
    background: #fff;
  }

  caption {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; /* hide but keep for a11y */
  }

  thead th {
    text-align: left;
    font-weight: 600;
    color: #374151;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;;
  }

  tbody td {
    vertical-align: top;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb; /* 1px row divider */
  }

  tbody tr:last-child td {
    border-bottom: none;
  }

  /* Column tweaks for readability */
  tbody td:nth-child(1) { font-weight: 700; }   /* Archetype */
  tbody td:nth-child(2) { font-weight: 600; }   /* Shadow Side */
  tbody td:nth-child(n+3) { color: #374151; }

  /* --- Cardified layout (mobile) --- */
  @media (max-width: 720px) {
    .table-scroll { overflow: visible; } /* cards size naturally */
    table { min-width: 0; border-collapse: separate; border-spacing: 0; }
    thead { 
      /* Visually hide table header on mobile, keep for screen readers */
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    tbody, tr, td { display: block; width: 100%; }

    tbody tr {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: var(--radius);
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      padding: 10px 12px;
      margin: 12px 0;
    }

    tbody tr + tr { margin-top: 16px; }

    /* Each cell becomes a labeled row */
    tbody td {
      border: 0;
      padding: 8px 0;
      display: grid;
      grid-template-columns: 42% 1fr;
      column-gap: 12px;
      align-items: start;
    }

    tbody td::before {
      content: attr(data-label);
      font-weight: 600;
      color: #374151;
      padding-right: 8px;
    }

    /* Improve visual hierarchy for Archetype & Shadow fields */
    tbody td[data-label="Archetype"] {
      padding-top: 2px;
      font-weight: 700;
      font-size: 1.05rem;
    }
    tbody td[data-label="Shadow Side"] {
      font-weight: 600;
    }

    /* add a subtle divider between label/value rows inside a card */
    tbody td + td { border-top: var(--border); }
    tbody td[data-label="Archetype"] { border-top: 0; }