/* Pixel-art-style chrome: frames, buttons. */

/* Pixel frame: a chunky border with corner notches,
   looks like a framed arcade panel. */
.pixel-frame {
  position: relative;
  border: 3px solid var(--line);
  /* inset shadows create depth without looking rounded */
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.02),
    inset -2px -2px 0 rgba(0, 0, 0, 0.35),
    0 6px 0 rgba(0, 0, 0, 0.25);
}
.pixel-frame::before,
.pixel-frame::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--accent);
  z-index: 1;
}
.pixel-frame::before { top: -3px; left: -3px; }
.pixel-frame::after  { bottom: -3px; right: -3px; background: var(--primary); }

/* Pixel buttons: chunky, 8-bit arcade feel */
.pixel-btn {
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg-inset);
  color: var(--text);
  border: 3px solid var(--line);
  padding: 12px 20px;
  position: relative;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.06),
    inset -2px -2px 0 rgba(0, 0, 0, 0.45),
    0 4px 0 var(--line);
  transition: transform 0.06s ease, box-shadow 0.06s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}
.pixel-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.pixel-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.04),
    inset -2px -2px 0 rgba(0, 0, 0, 0.55),
    0 2px 0 var(--line);
}
.pixel-btn.primary {
  background: var(--primary);
  color: var(--text);
  border-color: #a01c2a;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.15),
    inset -2px -2px 0 rgba(0, 0, 0, 0.35),
    0 4px 0 #5e0f19;
}
.pixel-btn.primary:hover {
  background: #ef4e5c;
  border-color: var(--accent);
  color: var(--text);
}
.pixel-btn.primary:active {
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.1),
    inset -2px -2px 0 rgba(0, 0, 0, 0.45),
    0 2px 0 #5e0f19;
}

/* Mobile: shrink pixel-btns in narrow viewports while keeping the pixel aesthetic */
@media (max-width: 560px) {
  .pixel-btn { font-size: 10px; padding: 10px 14px; }
}