body {
    margin: 0;
    background-color: #fff; /* Optional: to simulate a bubble wrap background */
    font-family: Arial, sans-serif; /* Use a sans-serif font */
}
:root {
    --size: 40px;
    --label-size: 38px;
  }

  .absolute-header {
    position: absolute;
    top: 0; /* Pin to the top */
    left: 0; /* Pin to the left */
    width: 100vw; /* Stretch across the viewport */
    height: 20px; /* Make it thinner */
    background-color: #fff; /* Blue background */
    color: black; /* White text */
    display: flex; /* Flexbox for centering content */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    font-size: 14px;
    font-weight: 600;
    border-bottom-left-radius: 20px; /* Rounded bottom corners */
    border-bottom-right-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Bigger shadow */
  }

.wrapper {
    overflow: hidden;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100); /* Fallback to 100vh if --vh isn't set */
}
.bubble-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--size)); /* Adjusts columns dynamically */
    gap: 0; /* Spacing between bubbles */
    justify-content: center; /* Center align the grid */
    background-color: #e8f0ff; /* Soft light blue */
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 2px, transparent 3px);
    background-size: var(--size) var(--size); /* Match bubble grid size */

    height: calc(var(--vh, 1vh) * 100 + 20px); /* Use custom viewport height */
    width: calc(100vw + 40px);
    overflow: hidden;
    margin: -20px;
  }
  
  .custom-radio {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--size);
    width: var(--size);
    cursor: pointer;
  }
  label {
    cursor: pointer!important;
    border-radius: 50%;
  }
  .custom-radio input[type="radio"] {
    display: none; /* Hide the default radio button */
    -webkit-appearance: none; 
  }
  
  .custom-radio label::before {
    content: "";
    display: inline-block;
    width: var(--label-size);
    height: var(--label-size);
    border: 2px solid rgba(0, 123, 255, 0.3); /* Light border to simulate a bubble edge */
    border-radius: 50%;
    background: radial-gradient(
      circle at 50% 40%, 
      rgba(255, 255, 255, 0.9), 
      rgba(0, 123, 255, 0.4) 60%, 
      rgba(0, 0, 0, 0.2) 100%
    ); /* Highlight at the top and shading at the edges */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Slight shadow to add depth */
    transition: background 0.2s, border-color 0.2s, transform 0.2s ease-in-out;
    cursor: pointer;
  }
  
  .custom-radio input[type="radio"]:checked + label::before {
    background: radial-gradient(
      circle at 50% 50%, 
      rgba(0, 123, 255, 0.3), 
      rgba(0, 123, 255, 0.7) 70%, 
      rgba(0, 0, 0, 0.6) 100%
    ); /* Darker shading for popped effect */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); /* Inner shadow for depth */
    /* transform: scale(0.9); Slight shrink to simulate popping */
    animation: pop 0.2s ease-in-out;
  }
  
  @keyframes pop {
    0% {
      transform: scale(1);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    50% {
      transform: scale(0.85);
      box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
    }
    100% {
      transform: scale(0.9);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    }
  }