# Pixel Planeswalker: Design System

A GBA-inspired (original, not Nintendo) pixel-art system for a beginner's Magic: The Gathering guide.

## Principles
- **Handheld authenticity**: hero scenes are drawn at 240×160 (GBA native resolution) on a `<canvas>` and scaled with `image-rendering: pixelated`.
- **15-bit colour**: every palette value has RGB channels that are multiples of 8 (5 bits per channel, 32,768 possible colours), as on the GBA.
- **Readable first**: all text is real HTML. Pixel display font only for short headings and labels; body copy uses a readable pixel sans at 19px+.
- **Real cards, untouched**: Scryfall images are shown whole (artist/copyright line intact), with no smoothing hacks, overlays, or watermarks. Callouts sit on top as outlines only.

## Palette (15-bit)
| Token | Hex | Use |
|---|---|---|
| ink | #101828 | outlines, text on light |
| night | #182848 | page background |
| navy | #283870 | dark windows |
| blue | #3858a8 | primary buttons, headers |
| sky | #78a8f0 | highlights, h3 on dark |
| paper | #f8f0d8 | window fill, text on dark |
| cream | #e8d8a8 | inset shadows |
| tan | #c09860 | path, gold shadow |
| brown | #785030 | red shadow |
| red | #d83830 | danger, active cursor |
| orange | #f08830 | red highlight |
| gold | #f8c838 | headings, CTA, focus ring |
| green | #38a048 | grass, G mana |
| leaf | #88d058 | HP bar (healthy) |
| purple | #7048a8 | handheld shell, wizard robe |
| white | #f8f8f8 | window inner border |
Mana: W #f8f0c8 · U #3878d0 · B #504060 · R #d83830 · G #38a048

## Type
- **Press Start 2P** (OFL 1.1): h1–h3, buttons, labels. 8–28px, multiples of 2.
- **Pixelify Sans** 400/700 (OFL 1.1): body 19px / 1.55, dialog 20px.
Self-hosted woff2, `font-display: swap`.

## Components
- **Window** `.win`: paper fill, 2px ink border + 2px white + 2px ink ring (GBA RPG frame), 4px radius, hard drop shadow. `.win.dark` variant.
- **Dialog box** `.dialog`: window + speaker tab `.who` + bobbing ▼ "more" arrow; text typed at 18ms/char (instant under reduced motion).
- **Button** `.btn`: Press Start 12px, bevel via inset shadows; `.gold` (CTA), `.red`.
- **Menu cursor**: ▶ triangle drawn with CSS borders on hover/focus/current.
- **HP bar** `.hp`: life counter; green → gold (≤12) → red (≤6), stepped transitions.
- **Card frame** `.mcard`: 488:680 aspect, loading blink placeholder, error state.
- **Hotspot** `.hot`: numbered callouts on a card.
- Focus: 3px gold outline, 3px offset.

## Motion
`steps()` timing only (no smooth easing), blink, bob, screen shake. All disabled under `prefers-reduced-motion: reduce`.

## Pixel art
Char-map sprites in `sprites.js` (wizard 16×24, mana orbs 12×12, card back 14×20, grass tile 16×8, cloud). Each char indexes the palette.