/* pixel-panel — bordered window with drop shadow */

.pixel-panel {
  background-color: var(--panel);
  border: var(--border-width) solid var(--border);
  box-shadow: var(--pixel-shadow);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.pixel-panel--compact {
  padding: var(--space-sm);
}

.pixel-panel--inset {
  box-shadow: var(--pixel-shadow-inset);
  background-color: var(--panel-light);
}

.pixel-panel__header {
  font-family: var(--font-pixel);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 2px solid var(--border);
  color: var(--btn-gold);
}

.pixel-panel__footer {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 2px solid var(--border);
}

@media (min-width: 768px) {
  .pixel-panel {
    padding: var(--space-lg);
  }
}

@media (min-width: 1280px) {
  .pixel-panel {
    padding: var(--space-xl);
  }
}