script.js

// ==============================================================
    //  MOOD CONFIGURATION
    //  Each mood defines three color arrays:
    //    bg1: outer edge of the radial background gradient (darker)
    //    bg2: center of the radial background gradient (lighter)
    //    accent: color used for brush strokes, particles, and rings
    //    particles: hex palette for click-burst particle colors
    //  Colors smoothly interpolate (lerp) toward the target mood.
    // ==============================================================
    const moods = {
      default:  { bg1: [13,13,13],    bg2: [20,24,32],    accent: [41,98,255],   particles: ['#2962FF','#7EB8FF','#3DFFC0','#00E676','#F0F4F8'] },
      sunset:   { bg1: [60,10,5],     bg2: [90,30,0],     accent: [255,140,50],  particles: ['#ff4500','#ff6347','#ffa500','#ffd700','#ffe4b5'] },
      ocean:    { bg1: [5,15,30],     bg2: [10,35,55],    accent: [50,180,255],  particles: ['#00bfff','#1e90ff','#87ceeb','#4682b4','#b0e0e6'] },
      forest:   { bg1: [5,25,5],      bg2: [15,50,15],    accent: [0,230,118],   particles: ['#00E676','#3DFFC0','#32cd32','#228b22','#90ee90'] },
      galaxy:   { bg1: [15,5,35],     bg2: [40,10,70],    accent: [180,100,255], particles: ['#9b59b6','#8e44ad','#d2b4de','#bb8fce','#e8b4f8'] },
      midnight: { bg1: [5,5,5],       bg2: [10,10,10],    accent: [136,153,170], particles: ['#555','#777','#999','#bbb','#ddd'] },
    };

    // Current mood state: these arrays are continuously lerped toward the target
    let currentMood = 'default';
    let targetMood = moods.default;
    let liveBg1 = [...moods.default.bg1];
    let liveBg2 = [...moods.default.bg2];
    let liveAccent = [...moods.default.accent];

    // Linear interpolation helper: blends value a toward b by factor t
    function lerp(a, b, t) { return a + (b - a) * t; }

    // Applies lerp to each channel of an RGB color array
    function lerpColor(cur, target, t) {
      return cur.map((c, i) => lerp(c, target[i], t));
    }

    // ==============================================================
    //  GENERATIVE BACKGROUND ANIMATION
    //  A full-viewport canvas renders:
    //    1. A radial gradient that shifts with the active mood
    //    2. Expanding concentric rings pulsing from center
    //    3. 180 flow-field particles that drift in organic paths
    //       using sine/cosine noise for their angle of movement
    // ==============================================================
    const bgCanvas = document.getElementById('bg-canvas');
    const bgCtx = bgCanvas.getContext('2d');
    let bgW, bgH;

    // Keep the background canvas sized to the full window
    function resizeBg() {
      bgW = bgCanvas.width = window.innerWidth;
      bgH = bgCanvas.height = window.innerHeight;
    }
    resizeBg();
    window.addEventListener('resize', resizeBg);

    const NUM_PARTICLES = 180;
    const bgParticles = [];

    // Each FlowParticle drifts through a vector field and fades in/out
    class FlowParticle {
      constructor() { this.reset(); }

      // Place particle at a random position with random size/speed/lifespan
      reset() {
        this.x = Math.random() * bgW;
        this.y = Math.random() * bgH;
        this.size = 1 + Math.random() * 2.5;
        this.speed = 0.3 + Math.random() * 0.7;
        this.life = 0;
        this.maxLife = 300 + Math.random() * 400;
      }

      // Move along a flow field angle computed from sine/cosine noise
      update(time) {
        const scale = 0.002;
        const angle = Math.sin(this.x * scale + time * 0.0003) * Math.PI +
                      Math.cos(this.y * scale + time * 0.0002) * Math.PI;
        this.x += Math.cos(angle) * this.speed;
        this.y += Math.sin(angle) * this.speed;
        this.life++;
        // Reset if lifespan expired or drifted off screen
        if (this.life > this.maxLife || this.x < -20 || this.x > bgW + 20 || this.y < -20 || this.y > bgH + 20) {
          this.reset();
        }
      }

      // Draw with alpha that fades in then out over the particle's life
      draw(ctx) {
        const alpha = Math.sin((this.life / this.maxLife) * Math.PI) * 0.5;
        const [r, g, b] = liveAccent;
        ctx.fillStyle = `rgba(${r|0},${g|0},${b|0},${alpha})`;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
      }
    }

    // Initialize all background particles
    for (let i = 0; i < NUM_PARTICLES; i++) bgParticles.push(new FlowParticle());

    let ringPhase = 0; // Controls the expanding ring animation

    // Main background draw function, called every animation frame
    function drawBg(time) {
      // Smoothly interpolate current colors toward the target mood
      liveBg1 = lerpColor(liveBg1, targetMood.bg1, 0.02);
      liveBg2 = lerpColor(liveBg2, targetMood.bg2, 0.02);
      liveAccent = lerpColor(liveAccent, targetMood.accent, 0.02);

      // Draw radial gradient background
      const grad = bgCtx.createRadialGradient(bgW/2, bgH/2, 0, bgW/2, bgH/2, bgW * 0.7);
      grad.addColorStop(0, `rgb(${liveBg2[0]|0},${liveBg2[1]|0},${liveBg2[2]|0})`);
      grad.addColorStop(1, `rgb(${liveBg1[0]|0},${liveBg1[1]|0},${liveBg1[2]|0})`);
      bgCtx.fillStyle = grad;
      bgCtx.fillRect(0, 0, bgW, bgH);

      // Draw 5 expanding concentric rings that fade out as they grow
      ringPhase += 0.008;
      const [ar, ag, ab] = liveAccent;
      for (let i = 0; i < 5; i++) {
        const radius = ((ringPhase + i * 0.2) % 1) * bgW * 0.6;
        const alpha = (1 - (ringPhase + i * 0.2) % 1) * 0.05;
        bgCtx.strokeStyle = `rgba(${ar|0},${ag|0},${ab|0},${alpha})`;
        bgCtx.lineWidth = 1.5;
        bgCtx.beginPath();
        bgCtx.arc(bgW / 2, bgH / 2, radius, 0, Math.PI * 2);
        bgCtx.stroke();
      }

      // Update and draw all flow-field particles
      bgParticles.forEach(p => { p.update(time); p.draw(bgCtx); });
    }

    // ==============================================================
    //  MOOD BUTTONS
    //  Clicking a mood button sets the target colors for the
    //  background, brush, and particles. Clicking the already-active
    //  button deselects it and returns to default Blossom blue.
    // ==============================================================
    const moodBtns = document.querySelectorAll('.mood-btn');
    moodBtns.forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        const wasActive = btn.classList.contains('active');
        moodBtns.forEach(b => b.classList.remove('active'));
        if (wasActive) {
          // Deselect: return to default Blossom palette
          currentMood = 'default';
          targetMood = moods.default;
        } else {
          // Select new mood
          currentMood = btn.dataset.mood;
          targetMood = moods[currentMood];
          btn.classList.add('active');
        }
      });
    });

    // ==============================================================
    //  CLICK PARTICLE BURSTS
    //  Every click on the page spawns 6 to 10 colored circles that
    //  fly outward using CSS animations. The particle colors come
    //  from the active mood's palette.
    // ==============================================================
    let clickCount = 0;
    const countEl = document.getElementById('click-count');

    document.body.addEventListener('click', (e) => {
      const colors = targetMood.particles;
      const count = 6 + Math.floor(Math.random() * 5);
      for (let i = 0; i < count; i++) {
        const p = document.createElement('div');
        p.classList.add('particle');
        const size = 5 + Math.random() * 12;
        // Random direction for each particle via CSS custom properties
        const dx = (Math.random() - 0.5) * 200;
        const dy = -50 - Math.random() * 180;
        p.style.setProperty('--dx', dx + 'px');
        p.style.setProperty('--dy', dy + 'px');
        p.style.width = size + 'px';
        p.style.height = size + 'px';
        p.style.left = (e.clientX - size / 2) + 'px';
        p.style.top = (e.clientY - size / 2) + 'px';
        p.style.background = colors[Math.floor(Math.random() * colors.length)];
        document.body.appendChild(p);
        // Remove the particle element after its animation completes
        setTimeout(() => p.remove(), 2000);
      }
      clickCount += count;
      countEl.textContent = clickCount;
    });

    // ==============================================================
    //  DRAWING CANVAS SETUP
    // ==============================================================
    const drawCanvas = document.getElementById('draw-canvas');
    const drawCtx = drawCanvas.getContext('2d');
    let drawing = false;      // Whether the user is currently drawing
    let lastPos = null;       // Last cursor position for connected strokes
    let brushMode = 'thin';   // Currently selected brush type
    let brushColorOverride = null; // null = use mood color; string = manual color

    // Scale the canvas display size responsively (internal resolution stays 900x500)
    function resizeDrawCanvas() {
      const maxW = Math.min(900, window.innerWidth - 40);
      drawCanvas.style.width = maxW + 'px';
      drawCanvas.style.height = (maxW * (500/900)) + 'px';
    }

    // Fill canvas with a dark background so saved PNGs aren't transparent
    function fillCanvasBackground() {
      drawCtx.fillStyle = '#141820';
      drawCtx.fillRect(0, 0, drawCanvas.width, drawCanvas.height);
    }
    fillCanvasBackground();
    resizeDrawCanvas();
    window.addEventListener('resize', resizeDrawCanvas);

    // Convert mouse/touch screen coordinates to canvas pixel coordinates
    function getDrawPos(e) {
      const rect = drawCanvas.getBoundingClientRect();
      const touch = e.touches ? e.touches[0] : e;
      return {
        x: (touch.clientX - rect.left) * (drawCanvas.width / rect.width),
        y: (touch.clientY - rect.top) * (drawCanvas.height / rect.height),
      };
    }

    // Returns the current brush color: either user-selected or mood-linked
    function getBrushColor(alpha) {
      if (brushColorOverride) return brushColorOverride;
      const [r, g, b] = liveAccent;
      return `rgba(${r|0},${g|0},${b|0},${alpha || 0.8})`;
    }

    // ==============================================================
    //  13 BRUSH TYPES
    //  Each brush has a name (for the button) and a draw function
    //  that receives the canvas context, position, and last position.
    // ==============================================================
    const brushTypes = [
      {
        name: 'Thin',
        // Simple small circle at cursor position
        draw(ctx, pos) {
          ctx.fillStyle = getBrushColor(0.9);
          ctx.beginPath();
          ctx.arc(pos.x, pos.y, 2, 0, Math.PI * 2);
          ctx.fill();
        }
      },
      {
        name: 'Thick',
        // Larger circle for bold strokes
        draw(ctx, pos) {
          ctx.fillStyle = getBrushColor(0.8);
          ctx.beginPath();
          ctx.arc(pos.x, pos.y, 8, 0, Math.PI * 2);
          ctx.fill();
        }
      },
      {
        name: 'Spray',
        // Scattered random dots around the cursor (airbrush effect)
        draw(ctx, pos) {
          ctx.fillStyle = getBrushColor(0.5);
          for (let i = 0; i < 15; i++) {
            const ox = (Math.random() - 0.5) * 35;
            const oy = (Math.random() - 0.5) * 35;
            ctx.beginPath();
            ctx.arc(pos.x + ox, pos.y + oy, 1 + Math.random(), 0, Math.PI * 2);
            ctx.fill();
          }
        }
      },
      {
        name: 'Glow',
        // Soft radial gradient that creates a neon glow effect
        draw(ctx, pos) {
          const grad = ctx.createRadialGradient(pos.x, pos.y, 0, pos.x, pos.y, 18);
          grad.addColorStop(0, getBrushColor(0.6));
          grad.addColorStop(1, 'rgba(0,0,0,0)');
          ctx.fillStyle = grad;
          ctx.beginPath();
          ctx.arc(pos.x, pos.y, 18, 0, Math.PI * 2);
          ctx.fill();
        }
      },
      {
        name: 'Square',
        // Draws filled squares instead of circles
        draw(ctx, pos) {
          ctx.fillStyle = getBrushColor(0.8);
          ctx.fillRect(pos.x - 5, pos.y - 5, 10, 10);
        }
      },
      {
        name: 'Diamond',
        // Rotated square creating a diamond shape
        draw(ctx, pos) {
          ctx.fillStyle = getBrushColor(0.8);
          ctx.save();
          ctx.translate(pos.x, pos.y);
          ctx.rotate(Math.PI / 4); // 45 degree rotation
          ctx.fillRect(-5, -5, 10, 10);
          ctx.restore();
        }
      },
      {
        name: 'Star',
        // Five-pointed star stamp at each cursor point
        draw(ctx, pos) {
          ctx.fillStyle = getBrushColor(0.85);
          ctx.beginPath();
          for (let i = 0; i < 5; i++) {
            const angle = (i * 4 * Math.PI) / 5 - Math.PI / 2;
            const r = 7;
            const method = i === 0 ? 'moveTo' : 'lineTo';
            ctx[method](pos.x + Math.cos(angle) * r, pos.y + Math.sin(angle) * r);
          }
          ctx.closePath();
          ctx.fill();
        }
      },
      {
        name: 'Ribbon',
        // Connected line from last position to current (ribbon effect)
        draw(ctx, pos, last) {
          ctx.strokeStyle = getBrushColor(0.7);
          ctx.lineWidth = 3;
          ctx.lineCap = 'round';
          ctx.beginPath();
          ctx.moveTo(last ? last.x : pos.x, last ? last.y : pos.y);
          ctx.lineTo(pos.x, pos.y);
          ctx.stroke();
        }
      },
      {
        name: 'Splatter',
        // Random sized dots scattered in a wide radius (paint splatter)
        draw(ctx, pos) {
          for (let i = 0; i < 8; i++) {
            const angle = Math.random() * Math.PI * 2;
            const dist = Math.random() * 25;
            const size = 1 + Math.random() * 4;
            ctx.fillStyle = getBrushColor(0.3 + Math.random() * 0.5);
            ctx.beginPath();
            ctx.arc(
              pos.x + Math.cos(angle) * dist,
              pos.y + Math.sin(angle) * dist,
              size, 0, Math.PI * 2
            );
            ctx.fill();
          }
        }
      },
      {
        name: 'Dash',
        // Short horizontal dashes along the stroke path
        draw(ctx, pos) {
          ctx.strokeStyle = getBrushColor(0.8);
          ctx.lineWidth = 2;
          ctx.beginPath();
          ctx.moveTo(pos.x - 6, pos.y);
          ctx.lineTo(pos.x + 6, pos.y);
          ctx.stroke();
        }
      },
      {
        name: 'Fur',
        // Multiple thin lines radiating outward (fur/hair texture)
        draw(ctx, pos) {
          ctx.strokeStyle = getBrushColor(0.4);
          ctx.lineWidth = 0.5;
          for (let i = 0; i < 6; i++) {
            const angle = Math.random() * Math.PI * 2;
            const len = 5 + Math.random() * 12;
            ctx.beginPath();
            ctx.moveTo(pos.x, pos.y);
            ctx.lineTo(pos.x + Math.cos(angle) * len, pos.y + Math.sin(angle) * len);
            ctx.stroke();
          }
        }
      },
      {
        name: 'Pixel',
        // Snaps to a 6px grid for a retro pixelated look
        draw(ctx, pos) {
          ctx.fillStyle = getBrushColor(0.9);
          const grid = 6;
          const gx = Math.floor(pos.x / grid) * grid;
          const gy = Math.floor(pos.y / grid) * grid;
          ctx.fillRect(gx, gy, grid, grid);
        }
      },
      {
        name: 'Calligraphy',
        // Angled ellipse that mimics a calligraphy pen nib
        draw(ctx, pos) {
          ctx.fillStyle = getBrushColor(0.85);
          ctx.save();
          ctx.translate(pos.x, pos.y);
          ctx.rotate(-Math.PI / 6); // 30 degree tilt
          ctx.beginPath();
          ctx.ellipse(0, 0, 8, 2, 0, 0, Math.PI * 2);
          ctx.fill();
          ctx.restore();
        }
      },
    ];

    // ==============================================================
    //  13 COLOR PALETTE + MOOD OPTION
    //  "Mood" uses the live accent color from the active mood.
    //  The other 13 are fixed color swatches the user can pick.
    // ==============================================================
    const colorPalette = [
      { name: 'Mood',    hex: null },           // null = use mood accent color
      { name: '',        hex: '#FFFFFF' },       // White
      { name: '',        hex: '#2962FF' },       // Electric Blue (Blossom)
      { name: '',        hex: '#7EB8FF' },       // Light Blue (Blossom)
      { name: '',        hex: '#3DFFC0' },       // Mint Green (Blossom)
      { name: '',        hex: '#00E676' },       // Electric Green (Blossom)
      { name: '',        hex: '#FF4444' },       // Red
      { name: '',        hex: '#FF9800' },       // Orange
      { name: '',        hex: '#FFEB3B' },       // Yellow
      { name: '',        hex: '#E040FB' },       // Magenta
      { name: '',        hex: '#7C4DFF' },       // Deep Purple
      { name: '',        hex: '#FF80AB' },       // Pink
      { name: '',        hex: '#00BCD4' },       // Cyan
      { name: '',        hex: '#8D6E63' },       // Brown
    ];

    // ==============================================================
    //  BUILD BRUSH + COLOR UI
    //  Dynamically creates buttons for each brush type and color
    //  swatch, and wires up click handlers to select them.
    // ==============================================================
    const brushRow = document.getElementById('brush-row');
    const colorRow = document.getElementById('color-row');

    // Create a button for each brush type
    brushTypes.forEach((b, i) => {
      const btn = document.createElement('button');
      btn.textContent = b.name;
      btn.dataset.brush = i;
      if (i === 0) btn.classList.add('active-tool'); // Default: Thin
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        brushMode = i;
        // Update active state visual
        brushRow.querySelectorAll('button').forEach(x => x.classList.remove('active-tool'));
        btn.classList.add('active-tool');
      });
      brushRow.appendChild(btn);
    });

    // Create a swatch button for each color
    colorPalette.forEach((c, i) => {
      const btn = document.createElement('button');
      if (c.hex) {
        // Colored circular swatch
        btn.className = 'color-swatch';
        btn.style.background = c.hex;
        btn.title = c.hex;
      } else {
        // "Mood" text button (uses the live accent color)
        btn.textContent = c.name;
        btn.title = 'Use mood color';
      }
      if (i === 0) btn.classList.add('active-tool'); // Default: Mood
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        brushColorOverride = c.hex; // null for mood, hex string for fixed color
        colorRow.querySelectorAll('button').forEach(x => x.classList.remove('active-tool'));
        btn.classList.add('active-tool');
      });
      colorRow.appendChild(btn);
    });

    // ==============================================================
    //  DRAWING ENGINE
    //  Handles mouse and touch events to draw on the canvas using
    //  the currently selected brush type and color.
    // ==============================================================

    // Dispatches to the active brush type's draw function
    function drawStroke(pos) {
      const brush = brushTypes[brushMode] || brushTypes[0];
      brush.draw(drawCtx, pos, lastPos);
      lastPos = pos;
    }

    // Mouse events for desktop drawing
    drawCanvas.addEventListener('mousedown', (e) => {
      e.stopPropagation();
      drawing = true;
      lastPos = null;
      drawStroke(getDrawPos(e));
    });
    drawCanvas.addEventListener('mousemove', (e) => {
      if (drawing) drawStroke(getDrawPos(e));
    });
    drawCanvas.addEventListener('mouseup', () => { drawing = false; lastPos = null; });
    drawCanvas.addEventListener('mouseleave', () => { drawing = false; lastPos = null; });

    // Touch events for mobile drawing
    drawCanvas.addEventListener('touchstart', (e) => {
      e.preventDefault(); e.stopPropagation();
      drawing = true; lastPos = null;
      drawStroke(getDrawPos(e));
    });
    drawCanvas.addEventListener('touchmove', (e) => {
      e.preventDefault();
      if (drawing) drawStroke(getDrawPos(e));
    });
    drawCanvas.addEventListener('touchend', () => { drawing = false; lastPos = null; });

    // Clear button wipes the drawing canvas
    document.getElementById('btn-clear').addEventListener('click', (e) => {
      e.stopPropagation();
      drawCtx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
      fillCanvasBackground();
    });

    // ==============================================================
    //  SAVE DRAWING AS PNG
    //  Converts the canvas to a PNG data URL and triggers a download.
    // ==============================================================
    document.getElementById('btn-save').addEventListener('click', (e) => {
      e.stopPropagation();
      const link = document.createElement('a');
      link.download = 'mood-room-drawing.png';
      link.href = drawCanvas.toDataURL('image/png');
      link.click();
    });

    // ==============================================================
    //  100 SNAPPLE REAL FACTS
    //  A pool of trivia facts displayed on the flip cards.
    //  Six random facts are selected on page load and when the
    //  user clicks the "Shuffle Facts" button.
    // ==============================================================
    const snappleFacts = [
      "A goldfish's attention span is three seconds.",
      "Animals that lay eggs don't have belly buttons.",
      "Beavers can hold their breath for 45 minutes underwater.",
      "Slugs have 4 noses.",
      "Camels have 3 eyelids.",
      "Honey bees can fly at 15 miles per hour.",
      "A queen bee can lay 800 to 1,500 eggs per day.",
      "Bees have 5 eyes.",
      "The average housefly lives for about one month.",
      "Mosquitoes are attracted to people who have recently eaten bananas.",
      "Flamingos are pink because they eat shrimp.",
      "Emus and kangaroos cannot walk backward.",
      "Cats have over 100 vocal cords.",
      "Camel's milk does not curdle.",
      "All porcupines float in water.",
      "Termites outweigh humans ten to one.",
      "Hummingbirds weigh less than a penny.",
      "A jellyfish is 95% water.",
      "Children grow faster in the spring.",
      "Broccoli is the only vegetable that is also a flower.",
      "Almonds are part of the peach family.",
      "Alaska has the highest percentage of people who walk to work.",
      "The San Francisco cable cars are the only mobile National Monuments.",
      "The state of Maine has 62 lighthouses.",
      "Honey is the only food that does not spoil.",
      "The Hawaiian alphabet has only 12 letters.",
      "A ball of glass will bounce higher than a ball of rubber.",
      "Chewing gum while peeling onions will prevent you from crying.",
      "On average, a human will spend up to 2 weeks kissing in a lifetime.",
      "Fish have eyelids.",
      "There are one million ants for every person on Earth.",
      "A goldfish kept in a dark room will eventually turn white.",
      "Termites eat wood twice as fast when listening to rock music.",
      "Elephants sleep only about 2 hours a day.",
      "A duck's quack does not echo.",
      "Snails breathe through their feet.",
      "An ant's sense of smell is stronger than a dog's.",
      "Frogs cannot swallow with their eyes open.",
      "A cat's jaw cannot move sideways.",
      "Bullfrogs do not sleep.",
      "Elephants can swim up to 20 miles a day.",
      "Elephants are the only mammals that cannot jump.",
      "Giraffes have no vocal cords.",
      "Cats can hear ultrasound.",
      "Mosquitoes have 47 teeth.",
      "The tongue is the fastest healing part of the body.",
      "Pigs can get sunburn.",
      "The lifespan of a taste bud is 10 days.",
      "Americans eat about 18 acres of pizza every day.",
      "There are 18 different animal shapes in the Animal Crackers cookie zoo.",
      "No word in the English language rhymes with month.",
      "A jiffy is an actual unit of time, equal to 1/100th of a second.",
      "There is a town called Big Ugly in West Virginia.",
      "The average person uses 150 gallons of water per day for personal use.",
      "The average person spends 2 weeks waiting for a traffic light to change.",
      "You share your birthday with at least 9 million other people in the world.",
      "The average person makes about 1,140 phone calls per year.",
      "The average person spends 2 years on the phone in a lifetime.",
      "No piece of paper can be folded more than 7 times.",
      "Alaska is the most eastern and most western state in the United States.",
      "There are 119 grooves on the edge of a quarter.",
      "About 18% of animal owners share their bed with their pet.",
      "Alaska has more caribou than people.",
      "August has the highest percentage of births.",
      "Googol is a number: 1 followed by 100 zeros.",
      "Oysters can change their gender back and forth.",
      "The Mona Lisa has no eyebrows.",
      "A ten gallon hat actually holds less than one gallon.",
      "The average raindrop falls at 7 miles per hour.",
      "Fish can drown.",
      "Lizards communicate by doing push ups.",
      "A squid's eyeballs can grow to the size of a volleyball.",
      "The average American eats about 35,000 cookies in a lifetime.",
      "Wild turkeys can run at speeds of up to 20 miles per hour.",
      "Standing directly under the moon makes you weigh slightly less.",
      "Chewing gum while walking burns about 20 calories per hour.",
      "A one minute kiss burns 26 calories.",
      "Frowning burns more calories than smiling.",
      "Walking on hard dirt burns about 7% more calories than walking on pavement.",
      "You weigh less at the top of a mountain than at sea level.",
      "Smelling apples or bananas can help you lose weight.",
      "Only male turkeys gobble.",
      "Dalmatians are born completely white.",
      "A tortoise can live to be over 150 years old.",
      "A panda's diet is 99% bamboo.",
      "Starfish can turn their stomachs inside out.",
      "Hummingbirds are the only birds that can fly backward.",
      "Penguins can swim but cannot fly.",
      "Ducks cannot walk without bobbing their heads.",
      "Beavers in prehistoric times were as large as bears.",
      "A pigeon's feathers weigh more than its bones.",
      "A hummingbird's heart beats about 1,400 times per minute.",
      "Dragonflies have six legs but cannot walk.",
      "Penguins have an organ above their eyes that converts seawater to freshwater.",
      "Crocodiles cannot move their tongues.",
      "Honeybees navigate by using the sun as a compass.",
      "A strawberry is the only fruit with seeds on the outside.",
      "The Caspian Sea is actually a lake.",
      "Caterpillars have about 2,000 muscles.",
      "A blue whale's heart is about the size of a small car.",
    ];

    // ==============================================================
    //  FLIP CARD SYSTEM
    //  Blossom icons used as the card front images. Six random
    //  Snapple facts are assigned each time cards are built.
    // ==============================================================
    const cardIcons = [
      `<svg id="card-b1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M421.661,250.6c14.082-4.332,27.221-11.043,39.047-19.945,2.088-1.551,4.191-3.237,6.251-5.01,2.557-2.176,5.069-4.494,7.467-6.892,2.47-2.47,4.819-5.022,6.991-7.595,1.767-2.053,3.397-4.09,4.983-6.227,8.901-11.862,15.597-25.026,19.902-39.123,1.219-3.917,2.249-7.944,3.061-11.967,1.692-8.324,2.558-16.9,2.574-25.493h.064V0h-127.99l-.268.064h-.001c-8.609.012-17.201.879-25.536,2.574-3.988.806-8.013,1.831-11.962,3.049-14.095,4.317-27.254,11.018-39.112,19.92-2.252,1.68-4.252,3.284-6.112,4.904l-.112.079c-2.559,2.161-5.114,4.514-7.595,6.995-2.483,2.483-4.797,4.997-6.901,7.492-1.664,1.922-3.346,4.017-4.996,6.228-8.905,11.855-15.614,25.001-19.94,39.073-1.231,3.978-2.269,8.03-3.087,12.042-1.645,8.058-2.511,16.351-2.574,24.649v.639h-63.772c-13.874,0-27.051-4.396-38.106-12.714-2.409-1.81-4.697-3.795-6.801-5.899-2.087-2.087-4.075-4.376-5.911-6.802-8.299-11.055-12.686-24.236-12.686-38.119V.409l-.025-.155-.185-.19h-.646v64.11c0,13.882-4.386,27.063-12.685,38.118-1.822,2.417-3.827,4.719-5.962,6.841-2.12,2.12-4.39,4.092-6.75,5.861-11.056,8.318-24.233,12.714-38.107,12.714H.345l-.345.137v.451l.026.16.639.623v-.528h63.516c13.873,0,27.05,4.396,38.108,12.715,2.377,1.774,4.66,3.758,6.787,5.899l.106.094h0c2.051,2.06,4.008,4.317,5.817,6.708,8.299,11.055,12.685,24.237,12.685,38.119v63.53l-.515.017.161.161c-8.398.052-16.777.911-24.913,2.567-4.017.809-8.051,1.839-11.988,3.062-14.102,4.31-27.257,11.007-39.099,19.908-2.181,1.63-4.28,3.311-6.261,5.021-2.54,2.141-5.082,4.482-7.558,6.956-2.375,2.377-4.676,4.873-6.85,7.429-1.771,2.055-3.464,4.168-5.034,6.278-8.894,11.823-15.607,24.964-19.952,39.06l-.014.058c-1.227,3.971-2.261,8.012-3.073,12.01-1.574,7.746-2.436,15.668-2.561,23.551v130.291l128.17.012.973-.012c8.289-.062,16.579-.929,24.64-2.574,3.998-.813,8.058-1.852,12.064-3.088,14.069-4.332,27.203-11.043,39.033-19.945,2.085-1.548,4.189-3.234,6.251-5.009,2.56-2.178,5.072-4.497,7.466-6.893,2.476-2.476,4.825-5.028,6.979-7.582,1.757-2.042,3.439-4.142,4.996-6.24,8.9-11.86,15.595-25.023,19.902-39.122,1.219-3.918,2.249-7.944,3.061-11.967,1.284-6.314,2.09-12.775,2.412-19.28.317,6.482,1.117,12.947,2.404,19.28.838,4.124,1.876,8.184,3.087,12.067,4.333,14.109,11.047,27.272,19.952,39.123,1.633,2.194,3.366,4.355,5.162,6.431,2.118,2.485,4.384,4.937,6.737,7.29,2.363,2.364,4.82,4.636,7.311,6.763,1.995,1.725,4.09,3.405,6.404,5.138,11.854,8.913,25.009,15.628,39.099,19.959,3.875,1.208,7.939,2.247,12.077,3.088,8.057,1.637,16.321,2.5,24.566,2.562l1.226.012,128.003-.012v-128.8l-.065.066c-.044-8.48-.914-16.924-2.586-25.107-.847-4.121-1.877-8.139-3.06-11.939-4.297-14.06-10.989-27.206-19.889-39.072-1.532-2.052-3.165-4.1-4.867-6.098-2.256-2.665-4.647-5.264-7.108-7.725-2.504-2.505-5.111-4.901-7.723-7.099l-.12-.112h-.014c-1.884-1.622-3.89-3.225-5.961-4.766-11.816-8.878-24.954-15.572-39.047-19.895-3.809-1.187-7.83-2.217-11.95-3.062-5.88-1.201-11.896-1.981-17.965-2.346,6.027-.36,12.047-1.14,17.964-2.343,4.005-.817,8.059-1.856,12.051-3.088ZM255.814,192.088h-.255c0,13.871-4.391,27.052-12.697,38.118-1.851,2.455-3.852,4.756-5.949,6.84h-.001c-2.076,2.09-4.351,4.066-6.761,5.875-11.053,8.301-24.23,12.689-38.108,12.689v.115h-63.503v-63.637c0-13.883,4.387-27.064,12.686-38.118,1.821-2.413,3.797-4.688,5.873-6.766,2.119-2.132,4.419-4.129,6.839-5.938,11.056-8.318,24.233-12.714,38.106-12.714h63.772v63.535Z"/>
  <path d="M30.812,211.515c1.624,2.825,3.63,5.443,5.966,7.783l.094.106c2.383,2.384,5.062,4.439,7.961,6.108,5.857,3.406,12.547,5.206,19.348,5.206,10.281,0,19.961-4.004,27.257-11.274,7.326-7.288,11.361-17.003,11.361-27.355s-4.016-20.008-11.31-27.317l-.106-.094c-7.283-7.237-16.938-11.22-27.203-11.22-10.348,0-20.06,4.036-27.347,11.365-7.269,7.284-11.272,16.967-11.272,27.266,0,6.812,1.8,13.509,5.204,19.366l.046.061Z"/>
  <path d="M36.872,91.491c7.294,7.296,16.992,11.314,27.309,11.314s19.975-4.004,27.257-11.274c7.326-7.288,11.361-17.003,11.361-27.355s-4.016-20.008-11.31-27.317l-.106-.094c-7.283-7.236-16.937-11.219-27.203-11.219-6.7,0-13.284,1.738-19.039,5.025l-.061.046c-3.027,1.703-5.801,3.821-8.247,6.293-2.438,2.438-4.522,5.178-6.15,8.081l-.058.074c-3.312,5.769-5.063,12.377-5.063,19.11,0,10.267,3.982,19.925,11.216,27.21l.094.106Z"/>
  <path d="M164.697,164.81h0c-7.268,7.31-11.271,16.998-11.271,27.278s4.016,20.007,11.31,27.316c7.307,7.296,17.005,11.314,27.308,11.314,6.689,0,13.281-1.742,19.064-5.038,2.97-1.676,5.731-3.774,8.206-6.237,2.503-2.503,4.63-5.304,6.28-8.262l.057-.074c3.279-5.765,5.011-12.342,5.011-19.019,0-10.306-4.016-20.007-11.31-27.317-7.279-7.295-16.978-11.314-27.309-11.314s-20.042,4.032-27.346,11.352Z"/>
  <path d="M192.043,102.804c10.303,0,19.988-4.004,27.27-11.275,7.318-7.307,11.349-17.021,11.349-27.355,0-6.572-1.688-13.073-4.882-18.8l-.036-.054c-1.727-3.1-3.877-5.948-6.392-8.463-2.559-2.56-5.417-4.717-8.495-6.412l-.076-.071h-.053c-5.658-3.16-12.116-4.83-18.684-4.83-10.33,0-20.042,4.031-27.347,11.352-7.268,7.31-11.271,16.997-11.271,27.277s4.016,20.008,11.31,27.316c7.294,7.296,16.991,11.314,27.308,11.314Z"/>
</svg>`,
      `<svg id="card-b2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M506.279,165.57c-1.918-4.229-4.325-8.285-7.153-12.053l-.191-.255h-12.428v-12.432l-.255-.191c-11.218-8.425-24.579-12.878-38.638-12.878s-27.431,4.449-38.637,12.866c-2.434,1.835-4.771,3.869-6.946,6.044-2.148,2.148-4.146,4.452-5.941,6.845-8.423,11.22-12.875,24.584-12.875,38.648s4.448,27.439,12.863,38.648c1.848,2.455,3.864,4.78,5.992,6.908,2.128,2.13,4.452,4.146,6.908,5.994,3.757,2.816,7.832,5.232,12.112,7.18l.141.057c8.332,3.735,17.208,5.629,26.383,5.629v.115c13.681,0,26.681,4.302,37.617,12.445v126.178c-10.997-7.945-23.975-12.138-37.617-12.138-14.078,0-27.438,4.453-38.637,12.879-2.452,1.846-4.789,3.875-6.946,6.032-2.107,2.108-4.106,4.41-5.941,6.845-8.423,11.219-12.875,24.587-12.875,38.66s4.452,27.429,12.875,38.648l.191.255h12.441v12.444l.255.191c3.757,2.816,7.832,5.232,12.112,7.18l.14.057c8.331,3.735,17.208,5.628,26.384,5.628h64.386V192.164c0-9.264-1.925-18.211-5.721-26.594ZM466.194,224.872c-5.623,3.218-12.048,4.919-18.58,4.919-10.05,0-19.495-3.914-26.599-11.02-7.104-7.105-11.016-16.554-11.016-26.607s3.895-19.444,10.965-26.557c7.111-7.138,16.575-11.069,26.65-11.069s19.484,3.914,26.599,11.018c7.104,7.12,11.017,16.569,11.017,26.608,0,6.438-1.651,12.78-4.775,18.347l-.151.151-.038.173c-1.649,2.898-3.702,5.585-6.103,7.986-2.375,2.364-5.055,4.399-7.97,6.051ZM485.231,447.596c0,6.492-1.683,12.889-4.868,18.498l-.002.003c-1.662,2.966-3.747,5.705-6.198,8.144-2.378,2.379-5.074,4.426-8.015,6.086l-.09.057c-5.596,3.165-11.971,4.839-18.444,4.839-9.961,0-19.33-3.845-26.412-10.833l-.186-.198c-7.104-7.118-11.017-16.563-11.017-26.595s3.895-19.457,10.965-26.569c7.111-7.138,16.575-11.069,26.65-11.069s19.484,3.913,26.599,11.018c7.104,7.12,11.017,16.574,11.017,26.62Z"/>
  <path d="M371.412,281.188c-1.809-2.409-3.825-4.729-5.992-6.896-2.169-2.169-4.488-4.185-6.895-5.994-3.723-2.796-7.777-5.203-12.05-7.154-8.38-3.798-17.325-5.724-26.587-5.724-13.651,0-26.629,4.188-37.617,12.125v-126.088c10.931-8.125,23.932-12.419,37.617-12.419v-.217c14.071,0,27.431-4.449,38.636-12.866l.255-.191v-12.444h12.428l.191-.254c8.432-11.213,12.888-24.577,12.888-38.648s-4.452-27.446-12.875-38.648c-1.809-2.409-3.825-4.73-5.992-6.896-2.171-2.171-4.491-4.188-6.895-5.994-3.725-2.798-7.778-5.204-12.05-7.155-8.38-3.798-17.325-5.724-26.587-5.724-14.078,0-27.438,4.453-38.638,12.879l-.255.191v12.444h-12.453l-.191.255c-8.414,11.208-12.862,24.572-12.862,38.648v116.342c-.931-5.22-2.488-10.302-4.701-15.189-1.917-4.228-4.323-8.284-7.152-12.053l-.191-.255h-12.441v-12.444l-.255-.191c-11.206-8.416-24.566-12.866-38.637-12.866s-27.432,4.449-38.639,12.867c-2.452,1.858-4.788,3.886-6.944,6.03-2.12,2.121-4.12,4.429-5.941,6.858-8.423,11.22-12.875,24.584-12.875,38.648s4.448,27.439,12.863,38.648l.191.255h12.453v12.457l.255.192c3.764,2.821,7.845,5.236,12.127,7.181,8.369,3.772,17.287,5.685,26.509,5.685v.115c13.693,0,26.692,4.297,37.616,12.432v38.362l.128.171c8.822,11.761,15.455,24.792,19.717,38.734,1.173,3.767,2.194,7.75,3.034,11.834,1.688,8.266,2.551,16.807,2.564,25.387l.065.637h.254v127.748h26.783v-115.112c10.925-8.135,23.925-12.432,37.617-12.432v-.204c14.059,0,27.419-4.453,38.636-12.878l.255-.191v-12.444h12.428l.191-.254c8.432-11.213,12.888-24.578,12.888-38.649s-4.452-27.445-12.875-38.648ZM282.272,64.417c0-6.539,1.71-12.98,4.946-18.628,1.622-2.875,3.652-5.547,6.032-7.942,2.425-2.425,5.144-4.494,8.084-6.152,5.596-3.209,12.012-4.905,18.555-4.905,10.063,0,19.509,3.913,26.599,11.018,7.104,7.119,11.017,16.569,11.017,26.608s-3.926,19.528-11.053,26.645c-7.106,7.081-16.54,10.982-26.562,10.982s-19.495-3.914-26.599-11.019c-7.104-7.12-11.017-16.569-11.017-26.607ZM282.272,357.462v-37.627c0-6.539,1.71-12.979,4.946-18.627,1.623-2.876,3.653-5.549,6.032-7.942,2.424-2.424,5.143-4.493,8.084-6.152,5.596-3.21,12.012-4.906,18.555-4.906,10.062,0,19.509,3.913,26.599,11.019,7.104,7.119,11.017,16.568,11.017,26.607s-3.926,19.528-11.053,26.645c-7.093,7.081-16.527,10.982-26.562,10.982h-37.617ZM192.112,154.538c10.054,0,19.5,3.917,26.599,11.031,7.104,7.12,11.017,16.564,11.017,26.595,0,6.522-1.696,12.94-4.905,18.56l-.002.004c-1.661,2.96-3.733,5.679-6.16,8.081-2.382,2.382-5.053,4.417-7.942,6.049-5.639,3.226-12.073,4.932-18.606,4.932-10.042,0-19.483-3.914-26.588-11.02-7.112-7.1-11.028-16.549-11.028-26.606s3.899-19.449,10.979-26.557c7.097-7.138,16.557-11.069,26.637-11.069Z"/>
  <path d="M109.93,274.291l-.196-.184c-2.067-2.061-4.323-4.015-6.711-5.81-3.717-2.791-7.766-5.198-12.037-7.154-8.38-3.798-17.329-5.724-26.6-5.724-13.641,0-26.62,4.193-37.616,12.138v-126.089c10.942-8.135,23.941-12.432,37.616-12.432v-.217c14.071,0,27.431-4.449,38.637-12.866l.255-.191v-12.444h12.441l.191-.255c8.422-11.22,12.874-24.584,12.874-38.648s-4.447-27.439-12.863-38.65c-1.86-2.459-3.876-4.778-5.992-6.895l-.194-.182c-2.067-2.063-4.324-4.017-6.713-5.812-3.719-2.793-7.768-5.199-12.037-7.155-8.38-3.798-17.329-5.724-26.6-5.724-14.066,0-27.426,4.458-38.637,12.892l-.255.191v12.431h-12.441l-.191.255C4.448,36.977,0,50.342,0,64.417v383.18h.638s0,0,0,0h.638c0-9.061,1.87-17.793,5.557-25.954,1.895-4.201,4.271-8.218,7.062-11.939,1.799-2.387,3.758-4.645,5.825-6.711,2.105-2.118,4.391-4.103,6.796-5.901,10.987-8.266,24.082-12.635,37.87-12.635v-.204c14.059,0,27.419-4.453,38.637-12.878l.255-.191v-12.444h12.441l.191-.255c8.422-11.22,12.874-24.584,12.874-38.648s-4.447-27.438-12.863-38.65c-1.86-2.458-3.876-4.778-5.992-6.895ZM31.596,45.967l.094-.128c1.614-2.882,3.652-5.571,6.058-7.991,2.437-2.437,5.164-4.511,8.104-6.161l.091-.057c5.594-3.166,11.97-4.839,18.443-4.839,10.063,0,19.509,3.913,26.599,11.018,7.104,7.12,11.017,16.569,11.017,26.608s-3.926,19.528-11.054,26.645c-7.106,7.081-16.54,10.982-26.562,10.982s-19.482-3.914-26.599-11.019c-7.104-7.119-11.017-16.568-11.017-26.607,0-6.506,1.692-12.92,4.826-18.45ZM31.62,301.362l.07-.104c1.614-2.882,3.652-5.571,6.058-7.991,2.438-2.439,5.164-4.511,8.104-6.162l.084-.053c5.597-3.168,11.975-4.843,18.45-4.843,10.063,0,19.509,3.913,26.599,11.019,7.104,7.12,11.017,16.569,11.017,26.607s-3.926,19.528-11.054,26.645c-7.093,7.081-16.527,10.982-26.562,10.982s-19.495-3.914-26.599-11.019c-7.104-7.12-11.017-16.569-11.017-26.608,0-6.477,1.677-12.863,4.85-18.474Z"/>
</svg>`,
      `<svg id="card-b3" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M511.787,127.703h-127.411v-63.526c0-13.884,4.388-27.065,12.687-38.119,1.833-2.429,3.814-4.705,5.887-6.767,2.1-2.113,4.401-4.115,6.839-5.95,3.657-2.756,7.643-5.126,11.847-7.044,8.268-3.755,17.105-5.658,26.264-5.658v-.639h-127.892v.639c9.146,0,17.973,1.899,26.238,5.645,4.21,1.928,8.205,4.302,11.874,7.057,2.426,1.823,4.714,3.812,6.801,5.912l.106.094h0c2.054,2.063,4.011,4.32,5.819,6.709,8.3,11.056,12.687,24.238,12.687,38.121v63.527l-63.524.216c-14.019,0-27.331,4.432-38.496,12.819-2.443,1.852-4.771,3.874-6.92,6.009-2.112,2.113-4.104,4.413-5.919,6.833-2.803,3.725-5.213,7.795-7.165,12.098l-.029.076c-3.09,6.869-4.9,14.116-5.442,21.596-.545-7.545-2.378-14.848-5.51-21.761-1.91-4.214-4.308-8.254-7.127-12.009h0c-1.828-2.434-3.832-4.745-5.957-6.871s-4.439-4.133-6.883-5.972c-11.164-8.386-24.475-12.818-38.494-12.818h-63.511v-63.743c0-13.883,4.387-27.065,12.686-38.119,1.822-2.413,3.797-4.689,5.874-6.767,2.119-2.132,4.419-4.129,6.839-5.938,3.674-2.769,7.66-5.139,11.848-7.044,8.258-3.763,17.094-5.671,26.264-5.671v-.639h-127.879v.639c9.137,0,17.96,1.899,26.225,5.645,4.227,1.929,8.225,4.308,11.888,7.07,2.375,1.773,4.658,3.757,6.787,5.899l.107.094h0c2.054,2.064,4.011,4.32,5.818,6.709,8.3,11.055,12.687,24.237,12.687,38.121v63.526H.344l-.16.026-.185.19.025,64.166c0,14.028,4.436,27.343,12.828,38.504,1.812,2.412,3.788,4.692,5.877,6.778l.094.105c2.107,2.108,4.417,4.117,6.87,5.972,11.164,8.386,24.475,12.819,38.495,12.819h63.156v.063h.319c8.595.013,17.163.879,25.464,2.576l.384.078h0s.189.037.189.037c3.985.807,7.981,1.832,11.878,3.047,13.989,4.277,27.066,10.938,38.871,19.796,2.097,1.567,4.129,3.193,6.093,4.868,3.039,1.67,5.861,3.798,8.386,6.323,2.493,2.493,4.62,5.311,6.358,8.428,1.676,1.97,3.301,4.007,4.83,6.055,8.856,11.806,15.515,24.886,19.793,38.88,1.178,3.783,2.203,7.779,3.045,11.88,1.696,8.298,2.562,16.872,2.575,25.482l.023.113-.023.023v.132c-.013,8.562-.875,17.11-2.562,25.406h0c-.807,3.999-1.832,8.008-3.046,11.918-4.284,14.029-10.947,27.127-19.805,38.931-1.579,2.127-3.2,4.153-4.946,6.182l-.059.075c-1.665,2.969-3.757,5.723-6.219,8.185-2.435,2.422-5.15,4.485-8.122,6.169-2.049,1.765-4.141,3.441-6.218,4.984-11.775,8.859-24.845,15.537-38.845,19.848-3.988,1.23-8.027,2.263-12.005,3.071-7.703,1.567-15.584,2.425-23.424,2.55l.005.639h251.439l.005-.639c-7.86-.125-15.715-.979-23.347-2.537-4.126-.839-8.169-1.872-12.017-3.072h-.001c-14.02-4.309-27.11-10.991-38.908-19.861-2.303-1.724-4.387-3.396-6.367-5.107l-.067-.051c-2.865-1.647-5.512-3.676-7.867-6.031-2.329-2.33-4.353-4.973-6.066-7.919-1.779-2.059-3.502-4.208-5.122-6.386-8.861-11.791-15.542-24.89-19.856-38.93-1.2-3.852-2.233-7.895-3.071-12.019-1.629-8.016-2.487-16.238-2.549-24.437h-.256s0-.918,0-.918v-1.277l.256.002c.062-8.254.924-16.506,2.562-24.526.812-3.99,1.846-8.022,3.071-11.982,4.306-14.003,10.982-27.083,19.843-38.879,1.682-2.248,3.316-4.282,5.031-6.272,1.629-2.912,3.688-5.627,6.118-8.071,2.485-2.485,5.243-4.583,8.249-6.271,1.959-1.686,3.985-3.308,6.192-4.958,11.801-8.859,24.896-15.527,38.922-19.822,3.93-1.211,7.934-2.232,11.902-3.033,8.293-1.688,16.844-2.55,25.413-2.563h.131l.155-.154,2.044-.025c7.879-.125,15.799-.988,23.541-2.562,4.004-.817,8.06-1.856,12.053-3.088,14.078-4.33,27.222-11.046,39.065-19.959,2.261-1.69,4.268-3.302,6.161-4.954l.115-.081c2.55-2.168,5.049-4.473,7.429-6.854,2.46-2.46,4.805-5.008,6.95-7.552l.107-.119v-.009c1.746-2.022,3.401-4.088,4.918-6.142,8.895-11.853,15.596-25.017,19.917-39.126,1.221-3.972,2.246-8.003,3.049-11.979,1.696-8.334,2.562-16.924,2.575-25.533v-.387l-.213-.213ZM31.276,211.044c-3.318-5.731-5.072-12.286-5.072-18.959,0-10.124,3.933-19.647,11.074-26.816,7.179-7.208,16.737-11.177,26.91-11.177s19.674,3.952,26.86,11.126c7.173,7.188,11.124,16.73,11.124,26.866s-3.968,19.735-11.174,26.916c-7.18,7.143-16.702,11.076-26.81,11.076-6.704,0-13.302-1.779-19.028-5.107l-.066-.051c-2.816-1.635-5.429-3.643-7.767-5.97-2.311-2.298-4.314-4.901-5.953-7.736l-.099-.17ZM282.025,192.085c0-10.115,3.937-19.638,11.086-26.816,7.167-7.208,16.719-11.177,26.898-11.177s19.692,3.956,26.86,11.139c7.173,7.188,11.124,16.725,11.124,26.853,0,10.182-3.968,19.736-11.174,26.904h0c-7.162,7.151-16.683,11.089-26.809,11.089-6.688,0-13.264-1.766-19.019-5.108-2.841-1.627-5.475-3.652-7.83-6.02-2.324-2.299-4.353-4.938-6.03-7.843-3.34-5.756-5.106-12.334-5.106-19.022Z"/>
</svg>`,
      `<svg id="card-b5" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M509.412,358.127h0c-.848-4.124-1.878-8.142-3.061-11.941-4.299-14.064-10.992-27.212-19.892-39.077-1.532-2.052-3.166-4.101-4.867-6.099-2.249-2.658-4.641-5.257-7.109-7.726-2.503-2.504-5.11-4.901-7.735-7.111l-.119-.1h-.009c-1.876-1.615-3.88-3.219-5.957-4.768-11.863-8.902-25.007-15.597-39.066-19.897-3.916-1.221-7.933-2.251-11.939-3.063-5.885-1.203-11.908-1.981-17.981-2.345,6.033-.36,12.059-1.14,17.981-2.344,4.005-.814,8.065-1.853,12.066-3.088,14.095-4.349,27.234-11.065,39.053-19.961,2.264-1.692,4.272-3.305,6.163-4.955l.115-.08c2.55-2.168,5.05-4.474,7.429-6.855,2.461-2.461,4.806-5.008,6.951-7.553l.107-.119v-.01c1.737-2.01,3.392-4.077,4.919-6.142,8.896-11.855,15.597-25.021,19.918-39.129,1.222-3.976,2.247-8.008,3.05-11.98,1.693-8.329,2.559-16.907,2.574-25.496h0v-.32c-.013-8.653-.883-17.266-2.588-25.598-.847-4.122-1.877-8.14-3.061-11.941-4.299-14.063-10.991-27.21-19.892-39.077-1.532-2.052-3.166-4.101-4.867-6.099-2.253-2.661-4.645-5.261-7.109-7.726-2.504-2.505-5.111-4.902-7.73-7.105l-.12-.107h-.009c-1.885-1.622-3.89-3.226-5.962-4.767-11.863-8.903-25.007-15.598-39.066-19.897-3.918-1.221-7.935-2.251-11.938-3.062-8.3-1.697-16.872-2.567-25.481-2.588h-.394c-8.603.013-17.192.879-25.527,2.575-3.977.803-8.006,1.829-11.977,3.049-14.098,4.317-27.26,11.02-39.118,19.923-2.139,1.588-4.176,3.219-6.238,4.997-2.562,2.162-5.113,4.512-7.584,6.983-2.486,2.487-4.801,5-6.903,7.493-1.661,1.918-3.342,4.013-4.997,6.228-8.894,11.84-15.604,24.979-19.944,39.053l-.014.058c-1.227,3.974-2.261,8.014-3.073,12.011-1.3,6.396-2.085,12.914-2.4,19.432-.32-6.572-1.131-13.085-2.429-19.433-.845-4.124-1.875-8.145-3.062-11.953-4.321-14.085-11.014-27.228-19.892-39.064-1.532-2.052-3.166-4.101-4.854-6.086-2.258-2.666-4.654-5.27-7.122-7.739l-.104-.09c-2.41-2.419-4.978-4.784-7.632-7.032-1.986-1.69-4.033-3.324-6.085-4.856-11.863-8.903-25.007-15.598-39.066-19.897-3.798-1.183-7.815-2.213-11.938-3.062-8.304-1.697-16.882-2.568-25.497-2.588h-.378c-8.612.013-17.205.879-25.54,2.575-4.031.814-8.057,1.845-11.964,3.062-14.096,4.307-27.258,11.006-39.118,19.91-2.141,1.589-4.178,3.221-6.238,4.997-2.562,2.162-5.113,4.512-7.584,6.983-2.486,2.487-4.801,5-6.903,7.493-1.666,1.923-3.347,4.019-4.997,6.228-8.906,11.857-15.616,25.004-19.943,39.078-1.232,3.981-2.27,8.033-3.088,12.044C.93,110.429.063,118.723,0,127.022v2.201c.063,8.24.925,16.503,2.562,24.561.834,4.106,1.869,8.15,3.073,12.024l.014.057c4.334,14.111,11.049,27.275,19.955,39.128,1.572,2.114,3.261,4.218,5.162,6.433,2.121,2.487,4.388,4.939,6.738,7.29,2.394,2.395,4.824,4.645,7.249,6.713,2.121,1.821,4.293,3.563,6.456,5.176,11.848,8.907,25.006,15.628,39.106,19.974,4.036,1.242,8.105,2.281,12.092,3.088,5.874,1.199,11.88,1.975,17.919,2.333-6.045.363-12.046,1.137-17.919,2.332-4.031.814-8.057,1.845-11.964,3.062-14.096,4.307-27.258,11.006-39.118,19.909-2.142,1.591-4.179,3.223-6.238,4.997-2.564,2.164-5.115,4.514-7.584,6.984-2.486,2.487-4.801,5-6.903,7.493-1.669,1.927-3.35,4.023-4.997,6.228-8.906,11.856-15.616,25.004-19.943,39.078-1.232,3.981-2.27,8.033-3.088,12.044-1.645,8.059-2.512,16.353-2.575,24.652v2.201c.063,8.24.925,16.503,2.562,24.561.843,4.147,1.882,8.212,3.088,12.081,4.335,14.111,11.049,27.276,19.955,39.128,1.629,2.189,3.361,4.35,5.162,6.432,2.116,2.482,4.383,4.935,6.738,7.291s4.808,4.623,7.299,6.751c2.071,1.79,4.231,3.523,6.418,5.151,11.864,8.919,25.016,15.635,39.093,19.962,4.031,1.24,8.099,2.279,12.092,3.088,7.671,1.565,15.566,2.423,23.471,2.549l2.313.026,2.088-.026c7.879-.125,15.8-.988,23.543-2.562,3.995-.812,8.034-1.846,12.008-3.073l.059-.014c14.069-4.341,27.205-11.052,39.041-19.948,2.21-1.651,4.305-3.332,6.251-5.022,2.564-2.169,5.072-4.484,7.455-6.881,2.372-2.359,4.726-4.912,7.006-7.596,1.764-2.051,3.395-4.088,4.984-6.228,8.882-11.836,15.579-24.992,19.905-39.101,1.22-3.932,2.25-7.972,3.061-12.006,1.29-6.341,2.096-12.831,2.415-19.365.313,6.523,1.094,13.02,2.389,19.365.814,4.018,1.853,8.092,3.088,12.107,4.325,14.082,11.039,27.238,19.955,39.103,1.633,2.195,3.366,4.355,5.163,6.432,2.114,2.481,4.381,4.934,6.738,7.291,2.355,2.356,4.808,4.623,7.301,6.751,2.082,1.789,4.241,3.522,6.417,5.151,11.858,8.915,25.015,15.631,39.106,19.962,3.852,1.201,7.92,2.24,12.092,3.088,7.67,1.565,15.561,2.423,23.459,2.549l2.325.026,2.074-.026c7.88-.125,15.8-.988,23.543-2.562,3.997-.812,8.057-1.851,12.066-3.088,14.072-4.333,27.207-11.044,39.04-19.948,2.089-1.551,4.192-3.237,6.252-5.01,2.565-2.183,5.078-4.502,7.468-6.893,2.469-2.47,4.818-5.022,6.992-7.596,1.761-2.045,3.391-4.083,4.984-6.228,8.903-11.864,15.6-25.029,19.905-39.127,1.222-3.936,2.252-7.966,3.062-11.98,1.693-8.326,2.559-16.899,2.574-25.484h0v-.32c-.013-8.648-.883-17.265-2.588-25.61ZM146.923,236.736c-2.017-2.027-3.929-4.238-5.686-6.578-8.309-11.05-12.7-24.232-12.7-38.123s4.396-27.061,12.713-38.123h0c1.758-2.345,3.726-4.617,5.848-6.753,2.148-2.149,4.454-4.155,6.853-5.965,11.053-8.302,24.233-12.69,38.114-12.69s27.048,4.393,38.114,12.703c2.286,1.709,4.496,3.617,6.574,5.675l-89.829,89.853ZM230.178,114.946c-11.066,8.311-24.245,12.703-38.114,12.703s-27.061-4.388-38.113-12.69c-2.393-1.811-4.649-3.769-6.709-5.821l-.094-.107c-2.14-2.127-4.124-4.411-5.899-6.79-8.317-11.062-12.713-24.244-12.713-38.123s4.391-27.074,12.7-38.123c1.759-2.333,3.658-4.528,5.648-6.527l89.816,89.839c-2.052,2.032-4.245,3.928-6.523,5.637ZM114.98,102.242c-1.81,2.422-3.807,4.724-5.937,6.841-2.076,2.076-4.351,4.052-6.763,5.875-11.054,8.302-24.233,12.69-38.114,12.69s-27.06-4.388-38.113-12.69c-2.341-1.772-4.552-3.685-6.576-5.689L109.307,19.419c2.054,2.074,3.965,4.286,5.687,6.577,8.308,11.049,12.7,24.232,12.7,38.123s-4.396,27.062-12.713,38.123ZM26.052,141.195c11.054-8.302,24.233-12.69,38.114-12.69s27.06,4.388,38.113,12.69c2.402,1.808,4.69,3.802,6.803,5.927,2.144,2.132,4.128,4.416,5.898,6.79,8.317,11.06,12.713,24.243,12.713,38.123s-4.391,27.073-12.7,38.123c-1.761,2.339-3.686,4.569-5.725,6.628L19.439,146.934c2.058-2.051,4.282-3.98,6.614-5.739ZM141.237,281.753c1.759-2.333,3.658-4.527,5.648-6.527l89.816,89.84c-2.052,2.032-4.245,3.927-6.524,5.637-11.059,8.319-24.238,12.716-38.113,12.716s-27.049-4.393-38.113-12.702c-2.39-1.809-4.647-3.767-6.709-5.821l-.094-.107c-2.14-2.127-4.124-4.411-5.899-6.79-8.317-11.062-12.713-24.244-12.713-38.123s4.391-27.073,12.7-38.123ZM141.249,409.67c1.784-2.367,3.756-4.635,5.863-6.741,2.121-2.147,4.421-4.153,6.839-5.963,11.046-8.31,24.226-12.703,38.113-12.703s27.056,4.397,38.114,12.717c2.29,1.709,4.497,3.617,6.562,5.674l-6.597,6.599-83.221,83.241c-2.056-2.064-3.963-4.272-5.674-6.565-8.317-11.06-12.713-24.244-12.713-38.123s4.396-27.075,12.713-38.135ZM114.98,357.999v.002c-1.775,2.386-3.772,4.687-5.937,6.84-2.075,2.075-4.351,4.052-6.763,5.875-11.066,8.31-24.245,12.703-38.114,12.703s-27.048-4.393-38.113-12.702c-2.339-1.77-4.55-3.683-6.576-5.689l89.829-89.852c2.054,2.075,3.965,4.286,5.687,6.577,8.308,11.05,12.7,24.232,12.7,38.123s-4.396,27.063-12.713,38.123ZM26.053,396.965c11.047-8.31,24.226-12.703,38.113-12.703s27.066,4.393,38.113,12.703c2.374,1.784,4.663,3.774,6.802,5.913,2.131,2.132,4.116,4.417,5.899,6.791,8.317,11.06,12.713,24.247,12.713,38.135s-4.396,27.063-12.713,38.123h0c-1.746,2.338-3.666,4.562-5.711,6.616l-89.83-89.853c2.038-2.029,4.262-3.955,6.614-5.726ZM253.579,358.127h0c-.845-4.123-1.875-8.145-3.062-11.954-4.322-14.086-11.014-27.23-19.892-39.064-1.532-2.052-3.166-4.101-4.854-6.086-2.258-2.666-4.654-5.27-7.122-7.739l-.104-.09c-2.409-2.418-4.977-4.783-7.632-7.033-1.98-1.685-4.027-3.319-6.085-4.856-11.863-8.902-25.007-15.597-39.066-19.897-3.802-1.184-7.819-2.215-11.938-3.063-5.885-1.203-11.908-1.981-17.982-2.345,6.032-.36,12.059-1.14,17.982-2.344,4.003-.814,8.042-1.848,12.008-3.074l.059-.014c14.093-4.348,27.233-11.065,39.054-19.96,2.112-1.572,4.224-3.267,6.288-5.048,2.5-2.113,4.992-4.416,7.404-6.843,2.446-2.432,4.795-4.98,6.97-7.559l.1-.118v-.004c1.742-2.017,3.398-4.084,4.919-6.143,8.885-11.84,15.582-25.001,19.905-39.115,1.225-3.946,2.255-7.981,3.061-11.993,1.289-6.34,2.096-12.829,2.415-19.362.313,6.522,1.094,13.018,2.388,19.362.833,4.112,1.872,8.182,3.088,12.094,4.33,14.096,11.044,27.256,19.955,39.115,1.578,2.12,3.267,4.225,5.163,6.433,2.119,2.486,4.386,4.938,6.738,7.29,2.323,2.325,4.762,4.583,7.249,6.713,2.122,1.825,4.294,3.567,6.456,5.176,11.849,8.922,25.01,15.642,39.118,19.974,3.858,1.203,7.926,2.242,12.092,3.088,5.875,1.199,11.878,1.975,17.913,2.333-6.04.363-12.04,1.137-17.912,2.332-3.977.803-8.006,1.829-11.977,3.049-14.098,4.317-27.26,11.02-39.118,19.922-2.102,1.561-4.201,3.242-6.238,4.997-2.564,2.164-5.115,4.514-7.584,6.984-2.486,2.487-4.801,5-6.877,7.468-1.684,1.943-3.328,3.989-5.022,6.253-8.89,11.834-15.599,24.977-19.944,39.065-1.233,3.988-2.272,8.045-3.087,12.057-1.3,6.399-2.086,12.918-2.4,19.44-.32-6.568-1.131-13.084-2.429-19.44ZM370.839,25.995c8.3,11.056,12.688,24.239,12.688,38.123s-4.391,27.055-12.7,38.123c-1.848,2.452-3.85,4.753-5.95,6.842-2.119,2.119-4.39,4.091-6.751,5.862-11.065,8.311-24.249,12.703-38.126,12.703s-27.048-4.393-38.113-12.703c-2.324-1.747-4.535-3.654-6.576-5.676l83.131-83.152.195-.008v-.187l6.51-6.511c2.007,2.027,3.921,4.241,5.693,6.583ZM281.886,141.208c11.066-8.31,24.245-12.703,38.114-12.703s27.061,4.393,38.126,12.703c2.408,1.809,4.697,3.795,6.802,5.901,2.104,2.104,4.089,4.393,5.899,6.803,8.309,11.068,12.7,24.251,12.7,38.123s-4.388,27.067-12.688,38.123c-1.742,2.313-3.672,4.542-5.737,6.628l-89.83-89.853c2.026-2.017,4.25-3.943,6.614-5.726ZM397.083,153.912c1.771-2.362,3.743-4.633,5.861-6.753,2.081-2.094,4.382-4.101,6.84-5.964,11.054-8.302,24.233-12.69,38.114-12.69s27.06,4.388,38.113,12.69c2.333,1.757,4.549,3.669,6.588,5.688l-89.842,89.864c-2.064-2.086-3.977-4.301-5.687-6.59-8.309-11.05-12.7-24.232-12.7-38.123s4.396-27.061,12.713-38.123ZM486.011,114.959c-11.054,8.302-24.233,12.69-38.114,12.69s-27.06-4.388-38.113-12.69c-2.429-1.838-4.717-3.828-6.803-5.915-2.141-2.142-4.126-4.431-5.899-6.803-8.317-11.062-12.713-24.244-12.713-38.123s4.391-27.074,12.7-38.123h0c1.706-2.276,3.604-4.475,5.647-6.539l89.83,89.853c-2.015,2.006-4.213,3.905-6.537,5.649ZM486.011,370.716c-11.066,8.31-24.245,12.703-38.114,12.703s-27.048-4.393-38.113-12.702c-2.426-1.837-4.715-3.827-6.803-5.915-2.141-2.142-4.126-4.431-5.899-6.803-8.317-11.062-12.713-24.244-12.713-38.123s4.391-27.073,12.7-38.123h0c1.706-2.276,3.605-4.475,5.647-6.539l89.83,89.853c-2.015,2.006-4.213,3.905-6.537,5.649ZM397.083,409.67c1.811-2.403,3.783-4.674,5.861-6.753,2.1-2.113,4.401-4.115,6.84-5.951,11.047-8.31,24.226-12.703,38.113-12.703s27.066,4.393,38.113,12.703c2.337,1.756,4.548,3.668,6.576,5.687l-89.83,89.853c-2.056-2.077-3.963-4.288-5.674-6.577-8.317-11.06-12.713-24.244-12.713-38.123s4.396-27.075,12.713-38.135ZM370.839,281.752c8.3,11.057,12.688,24.239,12.688,38.123s-4.391,27.056-12.7,38.123c-1.848,2.452-3.85,4.753-5.95,6.842-2.119,2.119-4.39,4.091-6.752,5.862-11.058,8.319-24.241,12.716-38.126,12.716s-27.054-4.397-38.113-12.716c-2.322-1.745-4.532-3.653-6.576-5.676l83.131-83.152.195-.007v-.187l6.51-6.511c2.007,2.027,3.921,4.242,5.693,6.583ZM281.886,396.978c11.058-8.319,24.237-12.716,38.113-12.716s27.069,4.397,38.127,12.717c2.371,1.769,4.655,3.754,6.788,5.899l.106.094h0c2.095,2.104,4.048,4.358,5.806,6.697,8.309,11.068,12.7,24.255,12.7,38.136s-4.391,27.056-12.7,38.123c-1.781,2.362-3.705,4.587-5.724,6.616l-89.831-89.853c2.054-2.046,4.277-3.966,6.614-5.713Z"/>
  <path d="M275.047,274.987c2.116-2.13,4.417-4.127,6.84-5.938,11.058-8.319,24.237-12.716,38.113-12.716v-.754c-13.869,0-27.048-4.393-38.113-12.703-2.41-1.811-4.699-3.797-6.802-5.901-2.102-2.102-4.091-4.396-5.912-6.816-8.3-11.057-12.687-24.239-12.687-38.123h-.907c0,13.884-4.387,27.067-12.687,38.123-1.81,2.401-3.817,4.708-5.964,6.855-2.117,2.117-4.388,4.089-6.75,5.862-11.066,8.311-24.245,12.703-38.114,12.703v.319h0,0v.115h0,0v.32c13.876,0,27.056,4.397,38.113,12.716h.001c2.376,1.775,4.66,3.759,6.787,5.9l.106.094h0c2.051,2.061,4.009,4.318,5.819,6.71,8.3,11.057,12.687,24.239,12.687,38.123h.319s0,0,0,0h.268s0,0,0,0h.319c0-13.884,4.387-27.067,12.687-38.122,1.822-2.414,3.799-4.69,5.874-6.766Z"/>
</svg>`,
      `<svg id="card-b6" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M511.923,383.914h-63.827c14.377,0,27.667-4.76,38.348-12.795v-12.692l-.09-.089h-38.258c-10.591,0-20.172-4.286-27.117-11.234v-.013c-6.946-6.947-11.23-16.518-11.23-27.112v-38.269l-.09-.09h-12.701c-8.033,10.683-12.778,23.964-12.778,38.358v-63.845l-.026-.026h-.179v63.87c0-14.394-4.758-27.675-12.778-38.358h-12.791v38.358c0,10.607-4.311,20.215-11.269,27.163-6.946,6.922-16.5,11.195-27.079,11.195h-38.348v12.795c10.681,8.022,23.958,12.782,38.348,12.782h-63.917l-.026.026v.23l.026.026v-.077h63.917c-14.39,0-27.667,4.747-38.348,12.782v12.782h38.348c10.591,0,20.184,4.299,27.117,11.246,6.946,6.947,11.231,16.531,11.231,27.124v38.358h12.778c8.033-10.683,12.791-23.977,12.791-38.358v63.922h-.09l.026.026h.243l.026-.026v-63.922c0,14.381,4.758,27.675,12.791,38.358h12.778v-38.358c0-10.568,4.259-20.139,11.179-27.086,6.946-6.973,16.552-11.285,27.168-11.285h38.348v-12.769c-10.68-8.035-23.97-12.795-38.348-12.795h63.84v-.192l-.013-.013ZM358.328,358.337h.077v.077l-.077-.077ZM358.405,409.695v-.013h.013l-.013.013ZM409.748,409.784l-.102-.102h.102v.102Z"/>
  <path d="M384.179,0v.09l-.026-.026h-.243c-8.736.013-17.268.896-25.505,2.572-4.055.819-8.046,1.842-11.96,3.045-14.236,4.363-27.424,11.157-39.064,19.896-2.136,1.599-4.221,3.263-6.255,5.015-2.609,2.201-5.116,4.517-7.534,6.947h-.013c-2.379,2.38-4.669,4.849-6.843,7.421-1.752,2.034-3.428,4.12-5.027,6.269-8.736,11.63-15.541,24.796-19.928,39.023-1.215,3.928-2.238,7.945-3.083,12.04-1.548,7.613-2.43,15.469-2.558,23.516v2.047h.013l-.038.038v.23l.026.026v127.779h127.744l.026.026h.243l.026-.026h2.047c8.046-.128,15.899-1.011,23.523-2.559,4.08-.832,8.097-1.868,12.036-3.083,14.224-4.389,27.373-11.182,39-19.934,2.136-1.587,4.221-3.263,6.255-5.015,2.571-2.175,5.052-4.465,7.432-6.858,2.43-2.431,4.771-4.964,6.997-7.6,1.727-2.022,3.39-4.094,4.976-6.218,8.724-11.643,15.516-24.821,19.877-39.062,1.202-3.915,2.226-7.907,3.044-11.963,1.676-8.24,2.558-16.761,2.571-25.5v-.256l-.026-.026h.09V0h-127.821ZM358.405,230.443l-.09-.09h.09v.09ZM281.71,230.353h.013l-.013.013v-.013ZM358.405,102.369l-.077-.077h.077v.077ZM358.405,153.637h.013l-.013.013v-.013ZM281.71,153.637v.09l-.09-.09h.09ZM486.443,102.382l-.09-.09h.09v.09ZM409.748,25.576v.09l-.09-.09h.09ZM409.748,153.739l-.102-.102h.102v.102Z"/>
  <path d="M128.051,256.045v.077l-.013-.013h-.256c-8.736.013-17.268.896-25.505,2.572-4.055.819-8.046,1.842-11.947,3.058-14.236,4.35-27.424,11.144-39.064,19.883-2.136,1.587-4.208,3.25-6.229,4.99-2.622,2.214-5.142,4.542-7.572,6.973-2.392,2.393-4.694,4.875-6.869,7.459-1.752,2.022-3.415,4.107-5.014,6.244-8.736,11.63-15.528,24.783-19.916,39.011-1.215,3.928-2.251,7.945-3.083,12.04-1.548,7.613-2.43,15.469-2.558,23.516v2.06l-.026.013v.256l.026.026v127.766h127.731l.026.026h.256l.026-.026h2.047c8.046-.128,15.899-1.011,23.51-2.559,4.093-.832,8.11-1.868,12.036-3.083,14.224-4.389,27.373-11.182,39-19.921,2.136-1.599,4.221-3.263,6.242-5.015,2.584-2.175,5.065-4.478,7.457-6.871,2.43-2.431,4.758-4.952,6.971-7.574,1.74-2.021,3.402-4.094,4.988-6.231,8.736-11.643,15.528-24.834,19.877-39.075,1.215-3.915,2.238-7.907,3.057-11.963,1.676-8.24,2.558-16.761,2.571-25.5v-.256l-.013-.013h.077v-127.869h-127.834ZM102.277,486.488l-.077-.077h.077v.077ZM102.277,358.414l-.077-.077h.077v.077ZM102.277,409.682h.013l-.013.013v-.013ZM25.582,409.682v.09l-.09-.09h.09ZM230.316,358.414l-.077-.077h.077v.077ZM153.62,281.621v.077l-.077-.077h.077ZM153.62,409.771l-.089-.09h.089v.09ZM230.316,409.695v-.013h.013l-.013.013Z"/>
  <path d="M255.795,127.856h-63.827c14.39,0,27.667-4.747,38.348-12.769v-12.718l-.077-.077h-38.271c-10.591,0-20.172-4.299-27.117-11.234-6.946-6.947-11.231-16.543-11.231-27.124V25.653l-.077-.077h-12.714c-8.033,10.683-12.778,23.964-12.778,38.358V.077l-.013-.013h-.192v63.87c0-14.394-4.746-27.675-12.778-38.358h-12.791v38.358c0,10.607-4.311,20.215-11.269,27.163-6.946,6.909-16.5,11.195-27.079,11.195H25.582v12.782c10.68,8.022,23.97,12.782,38.348,12.782H.026l-.026.026v.256l.026.026v-.09h63.904c-14.377,0-27.667,4.76-38.348,12.782v12.782h38.348c10.591,0,20.184,4.299,27.117,11.246,6.946,6.947,11.231,16.518,11.231,27.112v38.358h12.791c8.033-10.683,12.778-23.964,12.778-38.358v63.934h-.09l.026.026h.256l.026-.026h-.013v-63.934c0,14.394,4.746,27.675,12.778,38.358h12.791v-38.358c0-10.568,4.259-20.126,11.192-27.073,6.933-6.973,16.539-11.285,27.155-11.285h38.348v-12.795c-10.68-8.022-23.958-12.769-38.348-12.769h63.853v-.192l-.026-.026ZM102.277,102.292v.077l-.077-.077h.077ZM102.277,153.65v-.013h.013l-.013.013ZM153.62,153.727l-.089-.09h.089v.09Z"/>
  <line x1="127.847" y1="127.946" x2="127.757" y2="127.856"/>
</svg>`,
      `<svg id="card-b7" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M511.936,127.834v.192h-63.853c-14.39,0-27.667,4.76-38.348,12.783-2.443,1.843-4.746,3.839-6.882,5.989-2.123,2.124-4.093,4.389-5.897,6.795-8.02,10.685-12.778,23.967-12.778,38.363v63.942l-.026.026h-.256l-.026-.026h.09v-63.942c0-14.396-4.758-27.678-12.778-38.363-1.816-2.418-3.799-4.709-5.935-6.846s-4.413-4.12-6.843-5.937c-10.681-8.023-23.97-12.783-38.348-12.783h-63.917v.09l-.026-.026v-.256l.026-.026h63.917c14.377,0,27.667-4.76,38.348-12.783,2.405-1.804,4.669-3.775,6.792-5.899,2.149-2.137,4.157-4.44,5.986-6.884,8.02-10.685,12.778-23.98,12.778-38.363V0h.192l.026.026v63.853c0,14.383,4.758,27.678,12.778,38.363,1.816,2.431,3.799,4.709,5.935,6.846s4.426,4.12,6.843,5.937c10.68,8.023,23.958,12.783,38.348,12.783h63.827l.026.026Z" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/>
  <path d="M358.405,191.955c0,10.621-4.311,20.231-11.282,27.179-6.946,6.91-16.5,11.184-27.066,11.184-7.022,0-13.597-1.894-19.263-5.195-2.878-1.663-5.513-3.698-7.854-6.04-2.354-2.342-4.387-4.99-6.05-7.882-3.3-5.656-5.18-12.233-5.18-19.245,0-10.57,4.259-20.128,11.179-27.077,6.946-6.974,16.552-11.286,27.168-11.286s20.172,4.3,27.117,11.235c6.946,6.948,11.231,16.533,11.231,27.128Z" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/>
  <path d="M486.444,191.955c0,6.872-1.804,13.308-4.976,18.887l-.013.013c-1.701,3.045-3.837,5.822-6.306,8.266-2.405,2.406-5.129,4.491-8.097,6.168h-.013c-.013.013-.026.026-.038.026-5.577,3.186-12.036,5.003-18.918,5.003-10.591,0-20.159-4.299-27.104-11.235-6.946-6.935-11.243-16.533-11.243-27.128s4.272-20.128,11.192-27.077c6.933-6.974,16.552-11.286,27.155-11.286s20.197,4.3,27.117,11.248c6.946,6.948,11.243,16.52,11.243,27.115Z" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/>
  <path d="M486.444,63.878c0,10.608-4.311,20.218-11.282,27.166-6.933,6.91-16.5,11.197-27.079,11.197s-20.172-4.299-27.117-11.235c-6.933-6.948-11.23-16.545-11.23-27.128s4.285-20.141,11.192-27.089c6.946-6.961,16.552-11.273,27.155-11.273,6.754,0,13.085,1.74,18.598,4.811q.013.013.026.026t.026.013c3.121,1.715,5.961,3.877,8.468,6.385,2.507,2.508,4.681,5.374,6.408,8.497l.013.013c3.07,5.515,4.822,11.862,4.822,18.618Z" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/>
  <path d="M358.405,63.878c0,10.608-4.311,20.231-11.282,27.166-6.946,6.923-16.5,11.197-27.066,11.197s-20.171-4.299-27.117-11.235v-.013c-6.946-6.948-11.231-16.533-11.231-27.115,0-6.91,1.816-13.385,5.027-18.977,1.676-2.969,3.761-5.694,6.165-8.1,2.43-2.457,5.193-4.568,8.225-6.27l.026-.026c5.577-3.186,12.024-4.99,18.905-4.99,10.591,0,20.159,4.287,27.104,11.235h.013c6.946,6.948,11.231,16.533,11.231,27.128Z" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/>
  <path d="M384.179,256.013v.09l-.026-.026h-.256c-8.736.013-17.255.896-25.493,2.572-4.055.819-8.046,1.843-11.96,3.045-14.236,4.363-27.424,11.158-39.064,19.898-2.123,1.587-4.208,3.25-6.229,4.99l-.026.026c-2.609,2.201-5.129,4.53-7.547,6.948-2.379,2.38-4.669,4.85-6.843,7.422-1.752,2.035-3.428,4.12-5.027,6.27-8.736,11.632-15.541,24.799-19.928,39.028-1.215,3.928-2.238,7.946-3.083,12.041-1.548,7.614-2.43,15.471-2.558,23.519v2.06l-.026.013v.256l.026.026v127.782h127.731l.026.026h.256l.026-.026h2.047c8.046-.128,15.899-1.011,23.51-2.559,4.093-.832,8.109-1.868,12.049-3.084,14.211-4.376,27.373-11.184,38.987-19.924,2.136-1.587,4.221-3.263,6.242-5.003,2.571-2.188,5.065-4.491,7.457-6.884,2.43-2.431,4.771-4.965,6.997-7.601v-.013c1.74-2.022,3.39-4.082,4.976-6.206,8.724-11.644,15.516-24.825,19.865-39.067,1.215-3.916,2.238-7.908,3.057-11.964,1.676-8.241,2.558-16.763,2.571-25.503v-.256l-.013-.013h.077v-127.885h-127.821ZM281.71,409.771l-.102-.102h.102v.102ZM358.405,486.497l-.09-.09h.09v.09ZM358.405,358.408l-.09-.09h.09v.09ZM409.736,409.759l-.09-.09h.09v.09ZM409.736,281.669l-.077-.077h.077v.077ZM486.444,358.408l-.09-.09h.09v.09Z" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/>
  <path d="M128.051,256.09l-.013-.013h-.256l.064-.064H.013v127.885l-.013.013v.256l.013.013v.96c.064,8.394.947,16.597,2.558,24.53.831,4.108,1.867,8.138,3.083,12.092,4.375,14.242,11.179,27.409,19.928,39.054,1.637,2.201,3.351,4.338,5.142,6.411,2.149,2.521,4.4,4.952,6.741,7.294,2.341,2.342,4.771,4.594,7.291,6.744,2.072,1.791,4.208,3.506,6.408,5.144,11.64,8.753,24.802,15.56,39.038,19.936,3.952,1.216,7.969,2.252,12.075,3.084,7.585,1.548,15.413,2.418,23.433,2.546h2.047l.026.026h.256l.026-.026h127.821v-127.872l-.064.064v-.256l-.013-.013h.077v-127.885h-127.834v.077ZM25.582,409.759l-.09-.09h.09v.09ZM25.582,281.669l-.077-.077h.077v.077ZM102.277,358.318v.077l-.077-.077h.077ZM102.277,486.484l-.077-.077h.077v.077ZM102.277,409.682v-.013h.013l-.013.013ZM127.847,448.045c0-14.396-4.758-27.691-12.791-38.376-1.816-2.418-3.799-4.696-5.935-6.833s-4.426-4.133-6.843-5.95c-10.68-8.036-23.958-12.783-38.348-12.783h63.917v63.942ZM153.62,409.759l-.09-.09h.09v.09ZM230.316,409.682v-.013h.013l-.013.013ZM230.316,358.318v.077l-.077-.077h.077ZM230.316,486.408v.077l-.077-.077h.077ZM153.62,281.592v.077l-.077-.077h.077ZM146.777,365.164c2.136,2.137,4.426,4.12,6.843,5.95,10.681,8.023,23.958,12.783,38.348,12.783h-63.917v-63.942c0,14.383,4.758,27.678,12.791,38.363,1.816,2.431,3.799,4.709,5.935,6.846Z" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/>
  <path d="M230.316,63.878c0,10.608-4.311,20.218-11.269,27.166-6.946,6.91-16.5,11.197-27.079,11.197s-20.172-4.299-27.117-11.235c-6.946-6.948-11.231-16.545-11.231-27.128s4.272-20.141,11.192-27.089c6.946-6.961,16.552-11.273,27.155-11.273,6.779,0,13.136,1.753,18.662,4.85,3.108,1.728,5.961,3.89,8.455,6.385,2.494,2.495,4.656,5.349,6.383,8.458,3.095,5.528,4.848,11.888,4.848,18.67Z" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/>
  <path d="M230.316,191.955c0,6.872-1.804,13.321-4.989,18.9q0,.013-.013.026c-1.701,3.033-3.825,5.809-6.28,8.241-2.405,2.406-5.116,4.479-8.084,6.155l-.013.013c-5.59,3.199-12.062,5.029-18.969,5.029-10.591,0-20.159-4.299-27.104-11.235-6.946-6.935-11.243-16.533-11.243-27.128s4.259-20.128,11.192-27.077c6.933-6.974,16.539-11.286,27.155-11.286s20.184,4.3,27.117,11.248c6.946,6.948,11.231,16.52,11.231,27.115Z" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/>
  <path d="M102.277,191.955c0,10.621-4.311,20.231-11.282,27.166-6.946,6.923-16.5,11.197-27.066,11.197-7.009,0-13.571-1.881-19.225-5.17l-.026-.026c-2.878-1.663-5.513-3.698-7.854-6.04-2.366-2.342-4.413-5.016-6.089-7.921-3.287-5.643-5.155-12.208-5.155-19.207,0-10.57,4.259-20.128,11.192-27.077,6.933-6.974,16.539-11.286,27.155-11.286s20.184,4.3,27.117,11.248c6.946,6.948,11.23,16.52,11.23,27.115Z" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/>
  <path d="M102.277,63.878c0,10.608-4.311,20.218-11.269,27.166-6.946,6.91-16.5,11.197-27.079,11.197s-20.172-4.299-27.117-11.235c-6.946-6.948-11.23-16.545-11.23-27.128,0-6.884,1.804-13.334,4.988-18.913l.026-.026c1.676-2.994,3.761-5.733,6.178-8.151,2.443-2.457,5.219-4.581,8.263-6.283l.013-.013c5.577-3.174,12.011-4.978,18.88-4.978,10.591,0,20.172,4.287,27.117,11.235,6.946,6.948,11.23,16.533,11.23,27.128Z" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/>
  <path d="M255.821,127.834v.192h-63.853c-14.39,0-27.667,4.747-38.348,12.771-2.443,1.843-4.745,3.852-6.882,6.001-2.123,2.124-4.093,4.389-5.897,6.795-8.033,10.685-12.791,23.967-12.791,38.363v63.942h.013l-.026.026h-.256l-.026-.026h.09v-63.942c0-14.396-4.758-27.678-12.791-38.363-1.804-2.418-3.786-4.696-5.935-6.833-2.123-2.137-4.413-4.133-6.843-5.963-10.68-8.023-23.958-12.771-38.348-12.771H.013v.077l-.013-.013v-.256l.026-.026h63.904c14.39,0,27.667-4.747,38.348-12.771,2.405-1.817,4.682-3.788,6.805-5.912,2.162-2.15,4.157-4.453,5.973-6.884,8.033-10.685,12.791-23.98,12.791-38.363V0h.192l.013.013v63.866c0,14.383,4.758,27.678,12.791,38.363,1.816,2.431,3.799,4.709,5.935,6.846s4.426,4.12,6.843,5.95c10.681,8.023,23.958,12.771,38.348,12.771h63.827l.026.026Z" stroke="#000" stroke-miterlimit="10" stroke-width=".5"/>
</svg>`
    ];

    // Fisher-Yates shuffle: returns a new randomly ordered copy of the array
    function shuffle(arr) {
      const a = [...arr];
      for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
      }
      return a;
    }

    // Build 6 cards with random facts and Blossom icon fronts
    function buildCards() {
      const grid = document.getElementById('card-grid');
      grid.innerHTML = '';
      const picked = shuffle(snappleFacts).slice(0, 6); // Pick 6 random facts
      picked.forEach((fact, i) => {
        const icon = cardIcons[i % cardIcons.length]; // Cycle through icons
        const card = document.createElement('div');
        card.className = 'card';
        card.innerHTML = `
          <div class="card-inner">
            <div class="card-front">
              ${icon}
              <span class="label">Click to flip</span>
            </div>
            <div class="card-back">
              <div class="fact-label">Snapple Real Fact</div>
              ${fact}
            </div>
          </div>`;
        grid.appendChild(card);
      });
      initCardListeners(); // Attach flip event handlers to the new cards
    }

    // ==============================================================
    //  CARD FLIP EVENT HANDLING
    //  Simple click-to-flip. No mousemove tilt effect, which was
    //  previously causing unreliable flip behavior.
    // ==============================================================
    function initCardListeners() {
      document.querySelectorAll('.card').forEach(card => {
        // Click to toggle the .flipped class (triggers CSS 3D rotation)
        card.addEventListener('click', (e) => {
          e.stopPropagation();
          card.classList.toggle('flipped');
        });

        // Touch support: tap to flip on mobile
        card.addEventListener('touchend', (e) => {
          e.stopPropagation();
          e.preventDefault();
          card.classList.toggle('flipped');
        });
      });
    }

    // Shuffle button: deals 6 new random facts from the pool
    document.getElementById('btn-shuffle').addEventListener('click', (e) => {
      e.stopPropagation();
      buildCards();
    });

    // Build the initial set of cards on page load
    buildCards();

    // ==============================================================
    //  MAIN ANIMATION LOOP
    //  Calls drawBg() every frame via requestAnimationFrame to keep
    //  the background particles and color transitions running smoothly.
    // ==============================================================
    function animate(time) {
      drawBg(time);
      requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);