:root {
  --frame-bg: var(--marron-hex);
}

/* Frame (card-like container) */
.frame {
  /* inner elements painted with --bs-body-bg (table headers, titles) follow the frame color */
  --bs-body-bg: var(--frame-bg);
  background: var(--frame-bg);
  color: #fff;
  border-radius: 0.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 5px 5px 5px rgba(0,0,0,.45);
  
}

/* titles with black text would be unreadable on the dark frame */
.frame .table-title,
.frame .tbl-player th.tbl-player-header {
  color: #fff !important; /* beats .tbl-player thead th:first-child { color ... !important } */
}

.spaced {
  padding: 2px;
}

/* Sticky frame header */
.frame-header {
  position: sticky;
  text-align: center;
  top: 0;
  background: rgba(0,0,0,.2);
  padding: 0.25rem;
  font-weight: 600;
  z-index: 1;
  border-radius: 0.75rem 0.75rem 0 0;
}

/* Frame footer (sticky) */
.frame-footer {
  position: sticky;
  bottom: 0;
  text-align: center;
  background: rgba(0,0,0,.2);
  padding: 0.25rem;
  font-weight: 600;
  z-index: 1;
  border-radius: 0 0 0.75rem 0.75rem;
}



/* Scrollable content area */
.frame-body {
  padding: 0.5rem;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

.frame-body>img {
    width: 20%;
    height: 20%;
    object-fit: cover;     /* important */
    border-radius: 5%;
    display: block;        /* remove inline gap */
    
}

.frame-body p {
    font-size: 0.75rem;
}

/* Long frame override */
.frame-long .frame-body {
  max-height: 450px;
}




/* Mobile fine-tuning */
@media (max-width: 768px) {
  .frame-body {
    max-height: none;
  }
}

.bg-image {
  background: url("../images/frame-bg-v.png") center / cover no-repeat;
}

.bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.bg-image > * {
  position: relative;
  z-index: 1;
}