/*
 * Coder:   klp + GitHub Copilot (Claude Sonnet 4.6)
 * Date:    2026-05-08
 * App:     SWCrosbyBombSaga2026-05-01-Stg1
 * File:    bombStg6Styles.css
 * Purpose: Styles for bombStg6.html — Stage 6 of Crosby's Bomb.
 *
 *          ════════════════════════════════════════════════════════════
 *          WHAT IS NEW IN STAGE 6?
 *          ════════════════════════════════════════════════════════════
 *          Nothing here — and that is exactly the point.
 *
 *          Stage 6's upgrade (replacing two arrays of static SWDisk
 *          puffs with two animated SWCloud objects) is a JavaScript
 *          concern, not a CSS concern.  The browser still sees the
 *          same <canvas> element inside the same <body>.
 *
 *          ════════════════════════════════════════════════════════════
 *          SEPARATION OF CONCERNS — A CONSISTENT PATTERN
 *          ════════════════════════════════════════════════════════════
 *          Across all six stages of this sketch, the CSS file has
 *          remained constant — just the two rules below.  Every stage
 *          upgrade has lived entirely inside the JavaScript sketch:
 *
 *            Stage 1 → Stage 2:  Particle class added (JS)
 *            Stage 2 → Stage 3:  Constants extracted (JS)
 *            Stage 3 → Stage 4:  Color mode switched to HSB (JS)
 *            Stage 4 → Stage 5:  SW class integration (JS)
 *            Stage 5 → Stage 6:  SWCloud replaces SWDisk arrays (JS)
 *
 *          CSS's job is layout and presentation.  JavaScript's job
 *          is drawing logic.  Keeping them separate makes each easier
 *          to read, debug, and change.
 */


/* ── Page reset ──────────────────────────────────────────────────────────────
   WHY: Browsers apply small default margin and padding to <html> and <body>.
        Zeroing them out ensures the p5.js canvas sits flush in the
        top-left corner with no unexpected whitespace around it.
*/
html, body {
    margin:  0;
    padding: 0;
}


/* ── Canvas display ──────────────────────────────────────────────────────────
   WHY: p5.js creates a <canvas> as an inline element by default.  Inline
        elements get a small gap at the bottom (reserved for text descenders).
        display:block removes that gap so the canvas fills its container with
        no phantom spacing below it.
*/
canvas {
    display: block;
}