/* theme.css — shared pixel-art design system for the whole suite.
   Link this in every game/hub <head> AFTER its own styles so the tokens +
   pixel utilities are available. The "pixel game" feel comes from: crisp
   nearest-neighbor sprites, chunky SOLID offset shadows (no blur), sharp
   corners, a tight retro palette, and a subtle grid backdrop. No web fonts. */

:root {
  /* Shared palette (games may override --accent / --bg* for their own hue) */
  --px-ink: #f4f4ff;
  --px-ink-dim: rgba(244, 244, 255, 0.66);
  --px-line: rgba(255, 255, 255, 0.14);
  --px-panel: rgba(255, 255, 255, 0.06);
  --px-gold: #ffd23f;
  --px-red: #ff5a6e;
  --px-green: #58e07a;
  --px-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);   /* the signature pixel shadow */
  --px-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.4);
  --px-radius: 4px;                              /* tiny, near-square corners */
  --px-font: "DungGeunMo", "Galmuri11", ui-monospace, "SF Mono", "Segoe UI", system-ui, sans-serif;
}

/* Crisp sprites everywhere (pixel-emoji canvases / sprite imgs / pixel bg). */
.sprite, img.sprite, canvas.sprite, .px-pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Subtle pixel grid backdrop — drop on <body> via .px-grid for retro depth. */
.px-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* --- Chunky components (opt-in via class) --------------------------------- */
.px-btn {
  font-family: var(--px-font);
  font-weight: 800; letter-spacing: 0.5px;
  border: 2px solid rgba(0, 0, 0, 0.55);
  border-radius: var(--px-radius);
  box-shadow: var(--px-shadow);
  padding: 12px 18px; cursor: pointer;
  background: var(--px-panel); color: var(--px-ink);
  transition: transform 0.04s ease, box-shadow 0.04s ease;
}
.px-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45); }
.px-btn.gold { background: var(--px-gold); color: #3a2a00; }

.px-card, .px-panel-el {
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: var(--px-radius);
  box-shadow: var(--px-shadow);
  background: var(--px-panel);
}

/* Headings get a hard 1px text shadow for a stamped, retro look. */
.px-title { letter-spacing: 0.5px; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }

/* Pixel-styled progress/bars: blocky, sharp, solid border. */
.px-bar {
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 2px; overflow: hidden; background: rgba(0, 0, 0, 0.35);
}
.px-bar > .fill { height: 100%; image-rendering: pixelated; }

@media (prefers-reduced-motion: reduce) {
  .px-btn { transition: none; }
}