/* Z EX — pixel theme (popup). Loaded after the inline <style> in popup.html.
   Only look & feel: pixel font, square corners, hard edges. No layout/logic changes. */
@font-face {
  font-family: 'ZexPixelUI'; font-weight: 400;
  src: url('fonts/jersey10-400.woff2') format('woff2');
  size-adjust: 118%;
  font-display: swap;
}
@font-face {
  font-family: 'ZexPixelUI'; font-weight: 700;
  src: url('fonts/jersey15-700.woff2') format('woff2');
  size-adjust: 112%;
  font-display: swap;
}

html *, html *::before, html *::after {
  font-family: 'ZexPixelUI', 'Courier New', monospace !important;
  font-synthesis: none !important;
  letter-spacing: 0 !important;
  border-radius: 0 !important;
  text-shadow: none !important;
}

/* soft blurry shadows -> none; buttons/cards get a hard pixel shadow instead */
html * { box-shadow: none !important; }
button, .login-btn, .contact-btn, .logout-btn, .tone-chip, .scheme-chip, .style-chip,
input, select, textarea {
  box-shadow: 2px 2px 0 #17181a !important;
}
button:active:not(:disabled) { transform: translate(2px, 2px) !important; box-shadow: none !important; }

/* crisp pixel edges */
canvas, img { image-rendering: pixelated; }

/* animations step like sprites instead of easing smoothly */
html *, html *::before, html *::after {
  transition-timing-function: steps(4, end) !important;
}
@keyframes pixel-spin { to { transform: rotate(360deg); } }

/* ── performance: orbs ──
   Was filter:blur(60px) on 3–5 animated elements (very heavy on phones).
   Now a plain radial gradient (no filter) on its own GPU layer; same soft glow look. */
.orb { filter: none !important; will-change: transform; }
.orb1 { background: radial-gradient(closest-side, rgba(234,179,8,0.30), rgba(234,179,8,0)) !important; }
.orb2 { background: radial-gradient(closest-side, rgba(234,179,8,0.22), rgba(234,179,8,0)) !important; }
.orb3 { background: radial-gradient(closest-side, rgba(234,179,8,0.18), rgba(234,179,8,0)) !important; }