<div class="tv-rpg-panel">
  <h3 class="tv-rpg-panel-title">Character</h3>
  <p class="tv-rpg-panel-subtitle">Level 42 · Arcanist</p>
</div>

.tv-rpg-panel {
  box-sizing: border-box;
  padding: 1rem;
  color: #e7e5e4;
  font-family: ui-sans-serif, system-ui, sans-serif;
  position: relative;
  border: 1px solid var(--tv-rpg-panel-frame, #776449);
  border-radius: 2px;
  background: linear-gradient(145deg, #2a2725, #1b1c22 55%, #14161b);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--tv-rpg-panel-rim, #a28a62) 35%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--tv-rpg-panel-rim, #a28a62) 18%, transparent),
    inset 0 -2px 0 #090b0e,
    0 3px 8px #00000040,
    0 0 14px var(--tv-rpg-panel-glow, transparent);
}

.tv-rpg-panel::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid color-mix(in srgb, var(--tv-rpg-panel-rim, #a28a62) 14%, transparent);
  background:
    linear-gradient(135deg, var(--tv-rpg-panel-frame, #776449) 4px, transparent 4px) top left,
    linear-gradient(225deg, var(--tv-rpg-panel-frame, #776449) 4px, transparent 4px) top right,
    linear-gradient(45deg, var(--tv-rpg-panel-frame, #776449) 4px, transparent 4px) bottom left,
    linear-gradient(315deg, var(--tv-rpg-panel-frame, #776449) 4px, transparent 4px) bottom right;
  background-size: 8px 8px;
  background-repeat: no-repeat;
  pointer-events: none;
}

.tv-rpg-panel-title {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--tv-rpg-panel-title, #fde68a);
}

.tv-rpg-panel-subtitle {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #a8a29e;
}

/* Rarity variants: add one class next to tv-rpg-panel. */
.tv-rpg-panel--common {
  --tv-rpg-panel-frame: #6b7280;
  --tv-rpg-panel-rim: #9ca3af;
  --tv-rpg-panel-title: #e5e7eb;
}

.tv-rpg-panel--uncommon {
  --tv-rpg-panel-frame: #3f7a4a;
  --tv-rpg-panel-rim: #6fbf73;
  --tv-rpg-panel-title: #bbf7d0;
}

.tv-rpg-panel--rare {
  --tv-rpg-panel-frame: #2f5f9e;
  --tv-rpg-panel-rim: #60a5fa;
  --tv-rpg-panel-title: #bfdbfe;
}

.tv-rpg-panel--epic {
  --tv-rpg-panel-frame: #6d3fa0;
  --tv-rpg-panel-rim: #b383ff;
  --tv-rpg-panel-title: #e9d5ff;
}

.tv-rpg-panel--legendary {
  --tv-rpg-panel-frame: #a8661c;
  --tv-rpg-panel-rim: #f59e0b;
  --tv-rpg-panel-title: #fde68a;
  --tv-rpg-panel-glow: #f59e0b40;
}