Transparent controls spritesheet, red focus highlight

Enable alpha blending on the controls texture so sprite icons
float on any background without white cell artifacts. Regenerate
skin template with transparent cells and magenta gutters. Change
focus highlight from blue to red.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -56,3 +56,4 @@ Uses SDL2 (not SDL3). Uses `#if LIBAVUTIL_VERSION_INT` preprocessor checks to su
 - Non-fatal errors go to stderr and continue; fatal errors (SDL init failures) abort via `panic_and_abort()`
 - Update the changelog in `docs/sdlamp2-fsd.md` when making changes
 - Never run privileged Docker containers or make system-wide changes without explicit approval; explain what's needed and let the owner do it manually
+- Never install global Python packages; use a temporary venv in `/tmp` when Python dependencies are needed (e.g. `python3 -m venv /tmp/venv && source /tmp/venv/bin/activate && pip install ...`)

docs/sdlamp2-fsd.md

@@ -7,7 +7,7 @@
 | Version | 1.0        |
 | Status  | Draft      |
 | Created | 2026-02-10 |
-| Updated | 2026-02-14 |
+| Updated | 2026-02-15 |
 
 ## 1. Purpose
 
@@ -43,6 +43,11 @@ This document specifies the functional requirements for an SDL2 based media play
 
 ## 6. Changelog
 
+### 2026-02-15 — Transparent controls spritesheet support
+
+- **Alpha blending on controls texture**: `SDL_SetTextureBlendMode(controls_texture, SDL_BLENDMODE_BLEND)` enables alpha transparency for the controls spritesheet. Sprite icons now float cleanly on any background color instead of showing white cell backgrounds.
+- **Transparent skin template**: `gen_skin_template.py` now generates cells with transparent backgrounds (RGBA) instead of white. Gutters use bright magenta (`#FF00FF`) so they're clearly distinguishable from transparent content areas.
+
 ### 2026-02-14 — Skin template system and device script reorganization
 
 - **Skin template generator**: New `tools/gen_skin_template.py` (requires Pillow) generates a 642x420 PNG template showing the sprite grid layout with labeled gutters. Skin creators can draw over the white 200x200 cells; the 20px gray gutters (never rendered by the app) identify each cell's purpose.

src/sdlamp2.c

@@ -699,6 +699,7 @@ int main(int argc, char** argv) {
   if (!controls_texture) {
     panic_and_abort("Could not create controls texture!", SDL_GetError());
   }
+  SDL_SetTextureBlendMode(controls_texture, SDL_BLENDMODE_BLEND);
 
   /* Handle SIGTERM/SIGINT for clean shutdown (save position before exit) */
   signal(SIGTERM, signal_handler);
@@ -957,11 +958,11 @@ int main(int argc, char** argv) {
     SDL_RenderCopy(renderer, controls_texture, &ff_sprite, &ff_btn);
     SDL_RenderCopy(renderer, controls_texture, &next_sprite, &next_btn);
 
-    /* Focus highlight — 3px blue border around focused element */
+    /* Focus highlight — 3px red border around focused element */
     {
       const SDL_Rect r = *focus_rects[focus_index];
       const int t = 3;
-      SDL_SetRenderDrawColor(renderer, 0x00, 0x80, 0xFF, 0xFF);
+      SDL_SetRenderDrawColor(renderer, 0xFF, 0x00, 0x00, 0xFF);
       SDL_Rect top = {r.x - t, r.y - t, r.w + 2 * t, t};
       SDL_Rect bot = {r.x - t, r.y + r.h, r.w + 2 * t, t};
       SDL_Rect lft = {r.x - t, r.y, t, r.h};

tools/gen_skin_template.py

@@ -3,8 +3,8 @@
 gen_skin_template.py — Generate a skin template PNG for sdlamp2.
 
 Creates a 642x420 PNG showing the sprite grid layout with labeled gutters.
-Each 200x200 cell is blank white (ready to draw on). The 20px gutters between
-cells are gray with small text labels identifying adjacent cells.
+Each 200x200 cell is transparent (ready to draw on). The 20px gutters between
+cells are a bright magenta so they're clearly distinguishable from content areas.
 
 Grid layout:
   Col 0 (0-199)    Col 1 (220-419)   Col 2 (440-639)
@@ -30,9 +30,9 @@ ROWS = 2
 WIDTH = COLS * CELL + (COLS - 1) * GAP + 2   # 642
 HEIGHT = ROWS * CELL + (ROWS - 1) * GAP       # 420
 
-CELL_COLOR = (255, 255, 255)
-GUTTER_COLOR = (180, 180, 180)
-TEXT_COLOR = (80, 80, 80)
+CELL_COLOR = (0, 0, 0, 0)
+GUTTER_COLOR = (255, 0, 255, 255)
+TEXT_COLOR = (255, 255, 255, 255)
 
 LABELS = [
     ["REWIND", "PLAY", "FF"],
@@ -51,7 +51,7 @@ def cell_y(row):
 def main():
     output_path = sys.argv[1] if len(sys.argv) > 1 else "skin_template.png"
 
-    img = Image.new("RGB", (WIDTH, HEIGHT), GUTTER_COLOR)
+    img = Image.new("RGBA", (WIDTH, HEIGHT), GUTTER_COLOR)
     draw = ImageDraw.Draw(img)
 
     # Try to load a small font for labels