/* === Your existing styles === */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
}
h1 {
    text-align: center;
}
.controls {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
}
th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
th.sortable {
    cursor: pointer;
}
th.sortable:hover {
    background-color: #ddd;
}
img {
    max-width: 50px;
    max-height: 50px;
}

/* Improved table styling */
th, td {
    border: 1px solid #ccc;
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
}
tr:hover {
    background-color: #f1f1f1;
}
img {
    max-width: 60px;
    max-height: 60px;
    border-radius: 4px;
}
@media screen and (max-width: 768px) {
    table, thead, tbody, th, td, tr { display: block; }
    thead tr { display: none; }
    td:before {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 45%;
        white-space: nowrap;
        font-weight: bold;
    }
}

/* Updated Table Styles */
#deathTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}
#deathTable th, #deathTable td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}
#deathTable th { background-color: #444; color: #fff; }
#deathTable tr:nth-child(even) { background-color: #f9f9f9; }
#deathTable tr:hover { background-color: #f1f1f1; }

/* === Appended: feature + archive polish (non-breaking) === */
.feature-wrap {
  max-width: 1100px;
  margin: 12px auto 8px;
  padding: 0 12px;
}
.feature {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  align-items: center;
  background: #fff8f1;
  border: 1px solid #ffe0c2;
  border-radius: 14px;
  padding: 12px;
}
.feature img {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e3e3e3;
  display: block;
}
.feature h3 { margin: 0 0 6px; font-size: 1.25rem; }
.feature .meta { color: #6b6b6b; font-size: 0.95rem; }

.section-heading { margin: 8px 0 6px; font-size: 1.1rem; color: #333; }
.table-wrap { max-width: 1100px; margin: 16px auto 32px; overflow-x: auto; padding: 0 12px; }

.btn-ghost {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
}
.btn-ghost:hover { background: #f3f3f3; }

/* Optional sizing for archive table to match main */
#archiveTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.95rem;
}
#archiveTable th, #archiveTable td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
  word-break: break-word;
}
#archiveTable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fafafa;
  font-weight: 700;
  border-bottom: 1px solid #e6e6e6;
}
#archiveTable tbody tr:nth-child(odd) { background: #fcfcfc; }
#archiveTable tbody tr:hover { background: #fff7ec; }

/* Thumbnails in cells */
#deathTable td img, #archiveTable td img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  border: 1px solid #e3e3e3;
}

/* Sort indicator */
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable::after { content: "↕"; font-size: 0.85em; opacity: 0.35; margin-left: 6px; }
thead th.sortable[data-order="asc"]::after  { content: "↑"; opacity: 0.7; }
thead th.sortable[data-order="desc"]::after { content: "↓"; opacity: 0.7; }