Scale up gameplay UI and enlarge Bongo Cat (tester feedback)

[OmikronApex]

What

First round of tester feedback on the gameplay stage:

• UI ~15% bigger — HUD chips (score/lives/streak/phase/BPM), notation bars, note figures, grade badges
• Bongo Cat bigger + repositioned — stage-relative width min(50%, 520px), pushed down (translateY(30%)) so the "Listen…" / "Your turn!" cue no longer overlaps the cat
• Sprites overspill the stage bottom — released overflow: hidden on root + stage so the cat/instrument are not clipped; notation paging keeps its own viewport clip so bar rows still page correctly
• Legacy 20px cat-demo padding zeroed inside the stage (it pulled the clip line above the stage bottom)

Vertical fit

Cat box stays height-clamped (max-height: 100%, object-fit: contain, bottom-anchored) — squat aspect ratios squeeze the cat zone, not the strip or HUD.

Testing

• 617 unit tests pass (CSS-only change)
• Visually verified in host via tester screenshots (16:9)

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Increased the size and readability of gameplay HUD elements, including score, lives, streak, phase, BPM, and labels.
  • Enlarged notation, runline, figure, slot, and grade visuals.
  • Improved cat and instrument scaling to better fill the stage while preserving layout boundaries.
  • Adjusted phase cues and beat-count text to scale more effectively across screen sizes.

[coderabbitai]

📝 Walkthrough

Walkthrough

The stylesheet adds v7 scaling rules for HUD chips, notation, cat visuals, phase cues, and stage overflow behavior. Cat positioning and sizing are adjusted, legacy stage padding is removed, and selected typography and spacing values are increased.

Changes

Stage Visual Scaling

Layer / File(s)	Summary
HUD and notation scaling assets/styles.css	HUD chip typography and spacing are increased, along with notation-strip height, padding, figure sizing, slot width, runline text, and grade badges.
Cat and stage layout assets/styles.css	Cat sizing and positioning are updated, legacy demo padding is removed, and stage containers allow visible overflow for cat and instrument overspill.
Phase cue typography assets/styles.css	Phase cue labels use responsive sizing, and beat-count text uses a larger font size.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main UI scaling and Bongo Cat resizing changes reflected in the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/tester-ui-scale

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

assets/styles.css (1)

2131-2135: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Synchronize the explanatory comments with the final CSS.

The comments claim cqw sizing and hidden overflow, but the implementation uses percentage sizing and explicitly sets the cat zone, stage, and root to overflow: visible. This can mislead future changes about the actual clipping boundary.

Also applies to: 2181-2189, 2196-2212

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@assets/styles.css` around lines 2131 - 2135, Update the explanatory comments
in the v7 tester feedback sections near the cat sizing and overflow rules to
match the final CSS: describe percentage-based sizing and the explicit overflow:
visible behavior on the cat zone, stage, and root, without claiming cqw sizing
or hidden/clipping overflow. Keep the comments focused on the actual clipping
boundary and ensure all referenced sections are synchronized.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@assets/styles.css`:
- Around line 2131-2135: Update the explanatory comments in the v7 tester
feedback sections near the cat sizing and overflow rules to match the final CSS:
describe percentage-based sizing and the explicit overflow: visible behavior on
the cat zone, stage, and root, without claiming cqw sizing or hidden/clipping
overflow. Keep the comments focused on the actual clipping boundary and ensure
all referenced sections are synchronized.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: d46542b0-26c1-4553-9067-ec7b5509e060

📥 Commits

Reviewing files that changed from the base of the PR and between e64ecb3 and d310165.

📒 Files selected for processing (1)

• assets/styles.css