From 0560db43185f8bcb043c6caa3c1f310e5409aeeb Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Mon, 30 Jun 2025 20:30:57 -0400
Subject: [PATCH] new balloon shape

---
 style.css | 2087 ++++++++++++++++++++++++++---------------------------
 1 file changed, 1043 insertions(+), 1044 deletions(-)

diff --git a/style.css b/style.css
index d1784ff..58fbc6c 100644
--- a/style.css
+++ b/style.css
@@ -1,1087 +1,1086 @@
 body {
-    margin: 0;
-    padding: 10px;
-    box-sizing: border-box;
-    /* font-family: sans-serif; */
-        font-family: "Autour One", serif; 
-        background-color: #e8e8e8;
-        background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
-        /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
-  }
-  #main-header {
-    text-align: center;
-    padding: 20px 10px;
-    background: #ffffffdd;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-    border-radius: 12px;
-    margin-bottom: 20px;
-  }
-  
-  #main-header h1 {
-    font-size: 2rem;
-    margin-bottom: 5px;
-  }
-  
-  #main-header p {
-    font-size: 1rem;
-    color: #666;
-  }
-  
-  #selected-palette {
-    position: sticky;
-    top: 10px;
-    background: #fff;
-    z-index: 100;
-    padding: 10px;
-    border: 2px solid #ccc;
-    border-radius: 10px;
-    transition: box-shadow 0.3s ease;
-    max-width: 80%;
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-  
-    gap: 15px;
-    background-color: #e8e8e8;
+  margin: 0;
+  padding: 10px;
+  box-sizing: border-box;
+  /* font-family: sans-serif; */
+      font-family: "Autour One", serif; 
+      background-color: #e8e8e8;
+      background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
+      /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
+}
+#main-header {
+  text-align: center;
+  padding: 20px 10px;
+  background: #ffffffdd;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border-radius: 12px;
+  margin-bottom: 20px;
+}
+
+#main-header h1 {
+  font-size: 2rem;
+  margin-bottom: 5px;
+}
+
+#main-header p {
+  font-size: 1rem;
+  color: #666;
+}
+
+#selected-palette {
+  position: sticky;
+  top: 10px;
+  background: #fff;
+  z-index: 100;
+  padding: 10px;
+  border: 2px solid #ccc;
+  border-radius: 10px;
+  transition: box-shadow 0.3s ease;
+  max-width: 80%;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  gap: 15px;
+  background-color: #e8e8e8;
 background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
 /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
-  }
-  
-  /* Strong shadow when stuck */
-  #selected-palette.stuck {
-    box-shadow: 16px 16px 15px rgba(0, 0, 0, 0.25);
-    border: 1px solid rgb(0, 0, 0);
-        border-radius: 7px;
-  }
-  
-  
+}
 
-  #palette-colors {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    overflow: visible;
-    padding: 10px;
-    /* transition: padding 0.3s ease; */
-    transition: max-height 0.3s ease, padding 0.3s ease;
-  }
+/* Strong shadow when stuck */
+#selected-palette.stuck {
+  box-shadow: 16px 16px 15px rgba(0, 0, 0, 0.25);
+  border: 1px solid rgb(0, 0, 0);
+      border-radius: 7px;
+}
+
+
+
+#palette-colors {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  overflow: visible;
+  padding: 10px;
+  /* transition: padding 0.3s ease; */
+  transition: max-height 0.3s ease, padding 0.3s ease;
+}
+
+
+#clear-palette {
+  margin-top: 20px;
+  padding: 8px 12px;
+  font-size: 0.9rem;
+  background: #8ae7db;
+  border: 1px solid #ccc;
+  border-radius: 15px;
+  cursor: pointer;
+  margin: auto;
+
+}
+
+#color-families {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
   
+}
 
-  #clear-palette {
-    margin-top: 20px;
-    padding: 8px 12px;
-    font-size: 0.9rem;
-    background: #8ae7db;
-    border: 1px solid #ccc;
-    border-radius: 15px;
-    cursor: pointer;
-    margin: auto;
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+footer {
+  text-align: center;
+  font-size: 0.9rem;
+  color: #777;
+  padding: 20px;
+}
 
+@media (max-width: 480px) {
+  .color-name {
+    font-size: 0.7rem;
   }
 
-  #color-families {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-    
-  }
-
-  @keyframes fadeInUp {
-    from {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  footer {
-    text-align: center;
-    font-size: 0.9rem;
-    color: #777;
-    padding: 20px;
-  }
-  
-  @media (max-width: 480px) {
-    .color-name {
-      font-size: 0.7rem;
-    }
-  
-    .swatch-wrapper {
-      padding: 6px;
-    }
-  
-    #main-header h1 {
-      font-size: 1.5rem;
-    }
-  }
-  .color-family {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid #ccc;
-    animation: fadeInUp 0.5s ease;
-
-  }
-  .swatch-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px 20px; /* add horizontal AND vertical gaps */
-  }
-  
-  .color-family h3 {
-    text-align: center;
-    margin: 10px 0 5px;
-    font-size: 1rem;
-    font-weight: bold;
-  }
-
-
   .swatch-wrapper {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    /* width: 60px; */
-    margin: 0 5px;
-    padding: 10px;
-    max-width: min-content;
-    /* overflow-wrap: break-word; */
+    padding: 6px;
+  }
+
+  #main-header h1 {
+    font-size: 1.5rem;
+  }
+}
+.color-family {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #ccc;
+  animation: fadeInUp 0.5s ease;
+
+}
+.swatch-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px 20px; /* add horizontal AND vertical gaps */
+}
+
+.color-family h3 {
+  text-align: center;
+  margin: 10px 0 5px;
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+
+.swatch-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  /* width: 60px; */
+  margin: 0 5px;
+  padding: 10px;
+  max-width: min-content;
+  /* overflow-wrap: break-word; */
+  
+
+}
+
+/* .color-swatch {
+  width: 55px;
+  height: 65px;
+  border-radius: 50%;
+  position: relative;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+} */
+.color-swatch::before {
+  content: '';
+  position: absolute;
+  top: 10%;
+  left: 20%;
+  width: 60%;
+  height: 40%;
+  border-radius: 50% / 30%;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.8),
+    rgba(255, 255, 255, 0) 70%
+  );
+  pointer-events: none;
+  filter: blur(4px);
+}
+
+.metallic-element[data-color="#FFD700"] {
+  background: linear-gradient(to bottom, #B88606, #79550E);
+  box-shadow:
+    inset 0 0 0 0 rgba(255, 255, 255, 0.3),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
+    inset 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+/* .color-swatch::after {
+  content: '';
+  position: absolute;
+  top: 2%;
+  left: 2%;
+  width: 96%;
+  height: 96%;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  pointer-events: none;
+  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.2);
+}
+ */
+ .color-swatch {
+  width: 100px;
+  height: 136px;
+  position: relative;
+  background: #ccc; /* fallback */
+  transition: transform 0.3s ease;
+
+  background: radial-gradient(circle at 30% 30%, #fff5, transparent 60%), #ddd;
+
+  -webkit-mask-image: url('images/balloon-mask.svg');
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+
+  mask-image: url('images/balloon-mask.svg');
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+
+  box-shadow:
+    inset 2px 2px 6px rgba(255, 255, 255, 0.6),
+    0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+
+
+.color-swatch::after {
+  content: '';
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 10px;
+  height: 6px;
+  background: inherit;
+  border-radius: 50% 50% 30% 30%;
+  box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
+}
+
+
+
+.color-swatch:hover,
+.color-swatch:active {
+  transform: scale(1.2);
+  box-shadow: 0 0 5px rgba(0,0,0,0.2);
+}
+
+.color-swatch.chosen {
+  outline: 3px solid #333;
+  outline-offset: 1px;
+  width: 90px;
+  height: 126px;
+  z-index: 10;
+}
+
+.color-background {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 2px solid rgba(0, 0, 0, 0.1); /* Light gray border */
+  box-shadow: 1 1 1;
+}
+.color-shine {
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  width: 20px;
+  height: auto;
+  max-width: 20px;
+  opacity: 0.5;
+  z-index: 10;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+
+}
+
+.color-name {
+  font-size: 0.85rem;
+  text-align: center;
+  margin-top: 5px;
+  word-break: keep-all;     /* Prevent breaking long words */
+  /* white-space: nowrap;      Keep names on a single line */
+  /* overflow: hidden;         /*Hide overflow text if necessary */
+  text-overflow: ellipsis;  /* Add ... when text is too long */
+  max-width: 100%;
+  background-color: #e8e8e8;
+  z-index: 1;
+}
+
+#palette-colors .color-swatch {
+  body {
+      margin: 0;
+      padding: 10px;
+      box-sizing: border-box;
+      /* font-family: sans-serif; */
+          font-family: "Autour One", serif; 
+          background-color: #e8e8e8;
+          background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
+          /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
+    }
+    #main-header {
+      text-align: center;
+      padding: 20px 10px;
+      background: #ffffffdd;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+      border-radius: 12px;
+      margin-bottom: 20px;
+    }
     
-
-  }
-
-  /* .color-swatch {
-    width: 55px;
-    height: 65px;
-    border-radius: 50%;
-    position: relative;
-    cursor: pointer;
-    transition: transform 0.2s ease;
-  } */
-  .color-swatch::before {
-    content: '';
-    position: absolute;
-    top: 10%;
-    left: 20%;
-    width: 60%;
-    height: 40%;
-    border-radius: 50% / 30%;
-    background: linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.8),
-      rgba(255, 255, 255, 0) 70%
-    );
-    pointer-events: none;
-    filter: blur(4px);
-  }
-
-  .metallic-element[data-color="#FFD700"] {
-    background: linear-gradient(to bottom, #B88606, #79550E);
-    box-shadow:
-      inset 0 0 0 0 rgba(255, 255, 255, 0.3),
-      inset 0 0 0 1px rgba(0, 0, 0, 0.3),
-      inset 0 0 10px rgba(0, 0, 0, 0.2);
-  }
-  
-  /* .color-swatch::after {
-    content: '';
-    position: absolute;
-    top: 2%;
-    left: 2%;
-    width: 96%;
-    height: 96%;
-    border-radius: 50%;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    pointer-events: none;
-    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.2);
-  }
-   */
-   .color-swatch {
-    width: 100px;
-    height: 136px;
-    position: relative;
-    background: #ccc; /* fallback */
-    transition: transform 0.3s ease;
-
-    background: radial-gradient(circle at 30% 30%, #fff5, transparent 60%), #ddd;
-  
-    -webkit-mask-image: url('images/balloon-mask.svg');
-    -webkit-mask-size: contain;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-  
-    mask-image: url('images/balloon-mask.svg');
-    mask-size: contain;
-    mask-repeat: no-repeat;
-    mask-position: center;
-  
-    box-shadow:
-      inset 2px 2px 6px rgba(255, 255, 255, 0.6),
-      0 4px 8px rgba(0, 0, 0, 0.2);
-  }
-  
-  
-  
-  .color-swatch::after {
-    content: '';
-    position: absolute;
-    bottom: -6px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 10px;
-    height: 6px;
-    background: inherit;
-    border-radius: 50% 50% 30% 30%;
-    box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
-  }
-  
-  
-
-  .color-swatch:hover,
-  .color-swatch:active {
-    transform: scale(1.2);
-    box-shadow: 0 0 5px rgba(0,0,0,0.2);
-  }
-
-  .color-swatch.chosen {
-    outline: 3px solid #333;
-    outline-offset: 1px;
-    width: 90px;
-    height: 126px;
-    z-index: 10;
-  }
-
-  .color-background {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: 2px solid rgba(0, 0, 0, 0.1); /* Light gray border */
-    box-shadow: 1 1 1;
-  }
-  .color-shine {
-    position: absolute;
-    top: 30%;
-    left: 40%;
-    width: 20px;
-    height: auto;
-    max-width: 20px;
-    opacity: 0.5;
-    z-index: 10;
-    pointer-events: none;
-    transform: translate(-50%, -50%);
-
-  }
-
-  .color-name {
-    font-size: 0.85rem;
-    text-align: center;
-    margin-top: 5px;
-    word-break: keep-all;     /* Prevent breaking long words */
-    /* white-space: nowrap;      Keep names on a single line */
-    /* overflow: hidden;         /*Hide overflow text if necessary */
-    text-overflow: ellipsis;  /* Add ... when text is too long */
-    max-width: 100%;
-    background-color: #e8e8e8;
-    z-index: 1;
-  }
-
-  #palette-colors .color-swatch {
-    body {
-        margin: 0;
-        padding: 10px;
-        box-sizing: border-box;
-        /* font-family: sans-serif; */
-            font-family: "Autour One", serif; 
-            background-color: #e8e8e8;
-            background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
-            /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
-      }
-      #main-header {
-        text-align: center;
-        padding: 20px 10px;
-        background: #ffffffdd;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-        border-radius: 12px;
-        margin-bottom: 20px;
-      }
-      
-      #main-header h1 {
-        font-size: 2rem;
-        margin-bottom: 5px;
-      }
-      
-      #main-header p {
-        font-size: 1rem;
-        color: #666;
-      }
-      
-      #selected-palette {
-        position: sticky;
-        top: 10px;
-        background: #fff;
-        z-index: 100;
-        padding: 10px;
-        border: 2px solid #ccc;
-        border-radius: 10px;
-        transition: box-shadow 0.3s ease;
-        max-width: 80%;
-        margin: auto;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-      
-        gap: 15px;
-        background-color: #e8e8e8;
-    background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
-    /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
-      }
-      
-      /* Strong shadow when stuck */
-      #selected-palette.stuck {
-        box-shadow: 16px 16px 15px rgba(0, 0, 0, 0.25);
-        border: 1px solid rgb(0, 0, 0);
-            border-radius: 7px;
-      }
-      
-      
+    #main-header h1 {
+      font-size: 2rem;
+      margin-bottom: 5px;
+    }
     
-      #palette-colors {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        overflow: visible;
-        padding: 10px;
-        /* transition: padding 0.3s ease; */
-        transition: max-height 0.3s ease, padding 0.3s ease;
-      }
+    #main-header p {
+      font-size: 1rem;
+      color: #666;
+    }
+    
+    #selected-palette {
+      position: sticky;
+      top: 10px;
+      background: #fff;
+      z-index: 100;
+      padding: 10px;
+      border: 2px solid #ccc;
+      border-radius: 10px;
+      transition: box-shadow 0.3s ease;
+      max-width: 80%;
+      margin: auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    
+      gap: 15px;
+      background-color: #e8e8e8;
+  background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
+  /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
+    }
+    
+    /* Strong shadow when stuck */
+    #selected-palette.stuck {
+      box-shadow: 16px 16px 15px rgba(0, 0, 0, 0.25);
+      border: 1px solid rgb(0, 0, 0);
+          border-radius: 7px;
+    }
+    
+    
+  
+    #palette-colors {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      overflow: visible;
+      padding: 10px;
+      /* transition: padding 0.3s ease; */
+      transition: max-height 0.3s ease, padding 0.3s ease;
+    }
+    
+  
+    #clear-palette {
+      margin-top: 20px;
+      padding: 8px 12px;
+      font-size: 0.9rem;
+      background: #8ae7db;
+      border: 1px solid #ccc;
+      border-radius: 15px;
+      cursor: pointer;
+      margin: auto;
+  
+    }
+  
+    #color-families {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
       
+    }
+  
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    footer {
+      text-align: center;
+      font-size: 0.9rem;
+      color: #777;
+      padding: 20px;
+    }
     
-      #clear-palette {
-        margin-top: 20px;
-        padding: 8px 12px;
-        font-size: 0.9rem;
-        background: #8ae7db;
-        border: 1px solid #ccc;
-        border-radius: 15px;
-        cursor: pointer;
-        margin: auto;
-    
+    @media (max-width: 480px) {
+      .color-name {
+        font-size: 0.7rem;
       }
     
-      #color-families {
-        display: flex;
-        flex-direction: column;
-        gap: 15px;
-        
-      }
-    
-      @keyframes fadeInUp {
-        from {
-          opacity: 0;
-          transform: translateY(10px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-      footer {
-        text-align: center;
-        font-size: 0.9rem;
-        color: #777;
-        padding: 20px;
-      }
-      
-      @media (max-width: 480px) {
-        .color-name {
-          font-size: 0.7rem;
-        }
-      
-        .swatch-wrapper {
-          padding: 6px;
-        }
-      
-        #main-header h1 {
-          font-size: 1.5rem;
-        }
-      }
-      .color-family {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 10px;
-        padding-bottom: 20px;
-        border-bottom: 1px solid #ccc;
-        animation: fadeInUp 0.5s ease;
-    
-      }
-      .swatch-container {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 10px 20px; /* add horizontal AND vertical gaps */
-      }
-      
-      .color-family h3 {
-        text-align: center;
-        margin: 10px 0 5px;
-        font-size: 1rem;
-        font-weight: bold;
-      }
-    
-    
       .swatch-wrapper {
-        display: inline-flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: space-around;
-        /* width: 60px; */
-        margin: 0 5px;
-        padding: 10px;
-        max-width: min-content;
-        /* overflow-wrap: break-word; */
-        
-    
+        padding: 6px;
       }
     
-      /* .color-swatch {
-        width: 55px;
-        height: 65px;
-        border-radius: 50%;
-        position: relative;
-        cursor: pointer;
-        transition: transform 0.2s ease;
-      } */
-      .color-swatch::before {
-        content: '';
-        position: absolute;
-        top: 10%;
-        left: 20%;
-        width: 60%;
-        height: 40%;
-        border-radius: 50% / 30%;
-        background: linear-gradient(
-          135deg,
-          rgba(255, 255, 255, 0.8),
-          rgba(255, 255, 255, 0) 70%
-        );
-        pointer-events: none;
-        filter: blur(4px);
+      #main-header h1 {
+        font-size: 1.5rem;
       }
-    
-      .metallic-element[data-color="#FFD700"] {
-        background: linear-gradient(to bottom, #B88606, #79550E);
-        box-shadow:
-          inset 0 0 0 0 rgba(255, 255, 255, 0.3),
-          inset 0 0 0 1px rgba(0, 0, 0, 0.3),
-          inset 0 0 10px rgba(0, 0, 0, 0.2);
-      }
-      
-      /* .color-swatch::after {
-        content: '';
-        position: absolute;
-        top: 2%;
-        left: 2%;
-        width: 96%;
-        height: 96%;
-        border-radius: 50%;
-        border: 1px solid rgba(255, 255, 255, 0.3);
-        pointer-events: none;
-        box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.2);
-      }
-       */
-       .color-swatch {
-        width: 100px;
-        height: 136px;
-        position: relative;
-        background: #ccc; /* fallback */
-        transition: transform 0.3s ease;
-    
-        background: radial-gradient(circle at 30% 30%, #fff5, transparent 60%), #ddd;
-      
-        -webkit-mask-image: url('images/balloon-mask.svg');
-        -webkit-mask-size: contain;
-        -webkit-mask-repeat: no-repeat;
-        -webkit-mask-position: center;
-      
-        mask-image: url('images/balloon-mask.svg');
-        mask-size: contain;
-        mask-repeat: no-repeat;
-        mask-position: center;
-      
-        box-shadow:
-          inset 2px 2px 6px rgba(255, 255, 255, 0.6),
-          0 4px 8px rgba(0, 0, 0, 0.2);
-      }
-      
-      
-      
-      .color-swatch::after {
-        content: '';
-        position: absolute;
-        bottom: -6px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 10px;
-        height: 6px;
-        background: inherit;
-        border-radius: 50% 50% 30% 30%;
-        box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
-      }
-      
-      
-    
-      .color-swatch:hover,
-      .color-swatch:active {
-        transform: scale(1.2);
-        box-shadow: 0 0 5px rgba(0,0,0,0.2);
-      }
-    
-      .color-swatch.chosen {
-        outline: 3px solid #333;
-        outline-offset: 1px;
-        width: 100px;
-        height: 136px;
-        z-index: 10;
-      }
-    
-      .color-background {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        border: 2px solid rgba(0, 0, 0, 0.1); /* Light gray border */
-        box-shadow: 1 1 1;
-      }
-      .color-shine {
-        position: absolute;
-        top: 30%;
-        left: 40%;
-        width: 20px;
-        height: auto;
-        max-width: 20px;
-        opacity: 0.5;
-        z-index: 10;
-        pointer-events: none;
-        transform: translate(-50%, -50%);
-    
-      }
-    
-      .color-name {
-        font-size: 0.85rem;
-        text-align: center;
-        margin-top: 5px;
-        word-break: keep-all;     /* Prevent breaking long words */
-        /* white-space: nowrap;      Keep names on a single line */
-        /* overflow: hidden;         /*Hide overflow text if necessary */
-        text-overflow: ellipsis;  /* Add ... when text is too long */
-        max-width: 100%;
-        background-color: #e8e8e8;
-        z-index: 1;
-      }
-    
-      #palette-colors .color-swatch {
-        width: 100px;
-        height: 136px;
-      }
-    
-      /* .checkmark-overlay {
-        position: absolute;
-        top: 4px;
-        right: 4px;
-        font-size: 16px;
-        font-weight: bold;
-        color: white;
-        background: rgba(0, 0, 0, 0.6);
-        border-radius: 50%;
-        width: 20px;
-        height: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 20;
-        pointer-events: none;
-      } */
-      
-      @media (max-width: 600px) {
-    
-        .swatch-wrapper {
-          width: 50px;
-        }
-    
-        .color-name {
-          font-size: 0.65rem;
-          max-width: 40px;
-          word-wrap: break-word;
-        }
-    
-        #selected-palette h2 {
-          font-size: 1.1rem;
-        }
-      }
-    
-      .color-name {
-        transition: all 0.3s ease;
-      }
-      
-      .color-name.highlighted-name {
-        text-decoration:underline;
-        font-weight: bold;
-        color: #111;
-      }
-    
-      @keyframes pop {
-        0% { transform: scale(1); }
-        50% { transform: scale(1.2); }
-        100% { transform: scale(1); }
-      }
-      
-      .color-background.pop {
-        animation: pop 0.25s ease;
-      }
-      
-      .color-background.chosen {
-        transform: scale(2.2);
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
-      }
-      .chosen{
-        z-index: 4;
-      }
-
-    /* Shared metallic style */
-    .metallic {
-        position: relative;
-        border: 1px solid rgba(255, 255, 255, 0.3);
-        /* box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.6),
-                    0 2px 4px rgba(0, 0, 0, 0.3); */
-        overflow: hidden;
-      }
-      
-      /* Highlight overlay */
-      .metallic1::after {
-        content: '';
-        position: absolute;
-        top: 15%;
-        left: 15%;
-        width: 70%;
-        height: 70%;
-        background: radial-gradient(circle at top left, rgba(255,255,255,0.3), transparent 70%);
-        transform: rotate(-20deg);
-        pointer-events: none;
-        border-radius: 50%;
-      }
-      
-      /* Specific chrome variants */
-      .chrome-gold {
-        background: linear-gradient(145deg, #fefcea, #b69978, #a18b67, #806748);
-      }
-      
-      .chrome-silver {
-        background: linear-gradient(145deg, #e0e0e0, #a9a9a9, #808080, #e0e0e0);
-      }
-      
-      .chrome-rosegold {
-        background: linear-gradient(145deg, #fbe3dc, #e6b7a9, #d19387, #fbe3dc);
-      }
-      
-      .chrome-champagne {
-        background: linear-gradient(145deg, #fff2cc, #f2e6b6, #d9c08e, #fff2cc);
-      }
-      
-      .chrome-blue {
-        background: linear-gradient(145deg, #d0f0ff, #4d7995, #2d576f, #d0f0ff);
-      }
-      
-      .chrome-purple {
-        background: linear-gradient(145deg, #e0ccff, #b08be1, #915bc4, #e0ccff);
-      }
-      
-      .chrome-green {
-        background: linear-gradient(145deg, #e2ffe2, #457066, #5c877d, #e2ffe2);
-      }
-      
-      
-      @keyframes balloonFloat {
-        0%, 100% { transform: translateY(0) rotate(-4deg); }
-        50% { transform: translateY(-25px) rotate(4deg); }
-      }
-      
-      .balloon-float {
-        animation-name: balloonFloat;
-        animation-timing-function: 4s ease-in-out;
-        animation-iteration-count: infinite;
-        transform-origin: bottom center;
-        position: relative;
-      }
-    
-      .color-background {
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-      }
-      /* --- SVG Balloon String --- */
-      .balloon-string-svg {
-        position: absolute;
-        top: 55px; /* match .color-swatch height */
-        left: 50%;
-        transform: translateX(-50%);
-        width: 20px;
-        height: 60px;
-        z-index: 0;
-        pointer-events: none;
-        overflow: visible;
-        transform-origin: top center;
-        animation: svgWiggle 2s ease-in-out infinite;
-      }
-      
-      
-      .balloon-float-group {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        animation-name: balloonFloat;
-        animation-duration: 4s;
-        animation-timing-function: ease-in-out;
-        animation-iteration-count: infinite;
-        transform-origin: bottom center;
-      }
-      
-      .wiggle-path {
-        stroke: #727171;
-        stroke-width: 2;
-        fill: none;
-        stroke-linecap: round;
-        stroke-dasharray: 1, 2;
-      }
-      
-      @keyframes svgWiggle {
-        0%, 100% {
-          transform: translateX(-50%) rotate(0deg);
-        }
-        25% {
-          transform: translateX(-50%) rotate(2deg);
-        }
-        50% {
-          transform: translateX(-50%) rotate(-2.5deg);
-        }
-        75% {
-          transform: translateX(-50%) rotate(1.5deg);
-        }
-      }
-    
-      #palette-controls {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        z-index: 200;
-      }
-      
-      /* Toggle Switch Styling */
-      .switch {
-        position: relative;
-        display: inline-block;
-        width: 40px;
-        height: 20px;
-      }
-      .switch input {
-        opacity: 0;
-        width: 0;
-        height: 0;
-      }
-      .slider {
-        position: absolute;
-        cursor: pointer;
-        top: 0; left: 0;
-        right: 0; bottom: 0;
-        background-color: #ccc;
-        transition: 0.4s;
-        border-radius: 20px;
-      }
-      .slider:before {
-        position: absolute;
-        content: "";
-        height: 14px;
-        width: 14px;
-        left: 3px;
-        bottom: 3px;
-        background-color: white;
-        transition: 0.4s;
-        border-radius: 50%;
-      }
-      input:checked + .slider {
-        background-color: #4caf50;
-      }
-      input:checked + .slider:before {
-        transform: translateX(20px);
-      }
-      
-      /* Shuffle Button */
-      #shuffle-palette {
-        font-size: 16px;
-        padding: 4px 8px;
-        border: none;
-        background: #f0f0f0;
-        border-radius: 6px;
-        cursor: pointer;
-      }
-       */
-  }
+    }
+    .color-family {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #ccc;
+      animation: fadeInUp 0.5s ease;
+  
+    }
+    .swatch-container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 10px 20px; /* add horizontal AND vertical gaps */
+    }
+    
+    .color-family h3 {
+      text-align: center;
+      margin: 10px 0 5px;
+      font-size: 1rem;
+      font-weight: bold;
+    }
   
-
-  /* .checkmark-overlay {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    font-size: 16px;
-    font-weight: bold;
-    color: white;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 20;
-    pointer-events: none;
-  } */
   
-  @media (max-width: 600px) {
-
     .swatch-wrapper {
-      width: 50px;
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-around;
+      /* width: 60px; */
+      margin: 0 5px;
+      padding: 10px;
+      max-width: min-content;
+      /* overflow-wrap: break-word; */
+      
+  
     }
-
+  
+    /* .color-swatch {
+      width: 55px;
+      height: 65px;
+      border-radius: 50%;
+      position: relative;
+      cursor: pointer;
+      transition: transform 0.2s ease;
+    } */
+    .color-swatch::before {
+      content: '';
+      position: absolute;
+      top: 10%;
+      left: 20%;
+      width: 60%;
+      height: 40%;
+      border-radius: 50% / 30%;
+      background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.8),
+        rgba(255, 255, 255, 0) 70%
+      );
+      pointer-events: none;
+      filter: blur(4px);
+    }
+  
+    .metallic-element[data-color="#FFD700"] {
+      background: linear-gradient(to bottom, #B88606, #79550E);
+      box-shadow:
+        inset 0 0 0 0 rgba(255, 255, 255, 0.3),
+        inset 0 0 0 1px rgba(0, 0, 0, 0.3),
+        inset 0 0 10px rgba(0, 0, 0, 0.2);
+    }
+    
+    /* .color-swatch::after {
+      content: '';
+      position: absolute;
+      top: 2%;
+      left: 2%;
+      width: 96%;
+      height: 96%;
+      border-radius: 50%;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      pointer-events: none;
+      box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.2);
+    }
+     */
+     .color-swatch {
+      width: 100px;
+      height: 136px;
+      position: relative;
+      background: #ccc; /* fallback */
+      transition: transform 0.3s ease;
+  
+      background: radial-gradient(circle at 30% 30%, #fff5, transparent 60%), #ddd;
+    
+      -webkit-mask-image: url('images/balloon-mask.svg');
+      -webkit-mask-size: contain;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+    
+      mask-image: url('images/balloon-mask.svg');
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      mask-position: center;
+    
+      box-shadow:
+        inset 2px 2px 6px rgba(255, 255, 255, 0.6),
+        0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+    
+    
+    
+    .color-swatch::after {
+      content: '';
+      position: absolute;
+      bottom: -6px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 10px;
+      height: 6px;
+      background: inherit;
+      border-radius: 50% 50% 30% 30%;
+      box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
+    }
+    
+    
+  
+    .color-swatch:hover,
+    .color-swatch:active {
+      transform: scale(1.2);
+      box-shadow: 0 0 5px rgba(0,0,0,0.2);
+    }
+  
+    .color-swatch.chosen {
+      outline: 3px solid #333;
+      outline-offset: 1px;
+      width: 100px;
+      height: 136px;
+      z-index: 10;
+    }
+  
+    .color-background {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      border: 2px solid rgba(0, 0, 0, 0.1); /* Light gray border */
+      box-shadow: 1 1 1;
+    }
+    .color-shine {
+      position: absolute;
+      top: 30%;
+      left: 50%;
+      width: 20px;
+      height: auto;
+      max-width: 20px;
+      opacity: 0.5;
+      z-index: 10;
+      pointer-events: none;
+      transform: translate(-50%, -50%);
+  
+    }
+  
     .color-name {
-      font-size: 0.65rem;
-      max-width: 40px;
-      word-wrap: break-word;
+      font-size: 0.85rem;
+      text-align: center;
+      margin-top: 5px;
+      word-break: keep-all;     /* Prevent breaking long words */
+      /* white-space: nowrap;      Keep names on a single line */
+      /* overflow: hidden;         /*Hide overflow text if necessary */
+      text-overflow: ellipsis;  /* Add ... when text is too long */
+      max-width: 100%;
+      background-color: #e8e8e8;
+      z-index: 1;
+    }
+  
+    #palette-colors .color-swatch {
+      width: 100px;
+      height: 136px;
+    }
+  
+    /* .checkmark-overlay {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      font-size: 16px;
+      font-weight: bold;
+      color: white;
+      background: rgba(0, 0, 0, 0.6);
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 20;
+      pointer-events: none;
+    } */
+    
+    @media (max-width: 600px) {
+  
+      .swatch-wrapper {
+        width: 50px;
+      }
+  
+      .color-name {
+        font-size: 0.65rem;
+        max-width: 40px;
+        word-wrap: break-word;
+      }
+  
+      #selected-palette h2 {
+        font-size: 1.1rem;
+      }
+    }
+  
+    .color-name {
+      transition: all 0.3s ease;
+    }
+    
+    .color-name.highlighted-name {
+      text-decoration:underline;
+      font-weight: bold;
+      color: #111;
+    }
+  
+    @keyframes pop {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.2); }
+      100% { transform: scale(1); }
+    }
+    
+    .color-background.pop {
+      animation: pop 0.25s ease;
+    }
+    
+    .color-background.chosen {
+      transform: scale(2.2);
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+    }
+    .chosen{
+      z-index: 4;
     }
 
-    #selected-palette h2 {
-      font-size: 1.1rem;
+  /* Shared metallic style */
+  .metallic {
+      position: relative;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      /* box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.6),
+                  0 2px 4px rgba(0, 0, 0, 0.3); */
+      overflow: hidden;
     }
+    
+    /* Highlight overlay */
+    .metallic1::after {
+      content: '';
+      position: absolute;
+      top: 15%;
+      left: 15%;
+      width: 70%;
+      height: 70%;
+      background: radial-gradient(circle at top left, rgba(255,255,255,0.3), transparent 70%);
+      transform: rotate(-20deg);
+      pointer-events: none;
+      border-radius: 50%;
+    }
+    
+    /* Specific chrome variants */
+    .chrome-gold {
+      background: linear-gradient(145deg, #fefcea, #b69978, #a18b67, #806748);
+    }
+    
+    .chrome-silver {
+      background: linear-gradient(145deg, #e0e0e0, #a9a9a9, #808080, #e0e0e0);
+    }
+    
+    .chrome-rosegold {
+      background: linear-gradient(145deg, #fbe3dc, #e6b7a9, #d19387, #fbe3dc);
+    }
+    
+    .chrome-champagne {
+      background: linear-gradient(145deg, #fff2cc, #f2e6b6, #d9c08e, #fff2cc);
+    }
+    
+    .chrome-blue {
+      background: linear-gradient(145deg, #d0f0ff, #4d7995, #2d576f, #d0f0ff);
+    }
+    
+    .chrome-purple {
+      background: linear-gradient(145deg, #e0ccff, #b08be1, #915bc4, #e0ccff);
+    }
+    
+    .chrome-green {
+      background: linear-gradient(145deg, #e2ffe2, #457066, #5c877d, #e2ffe2);
+    }
+    
+    
+    @keyframes balloonFloat {
+      0%, 100% { transform: translateY(0) rotate(-4deg); }
+      50% { transform: translateY(-25px) rotate(4deg); }
+    }
+    
+    .balloon-float {
+      animation-name: balloonFloat;
+      animation-timing-function: 4s ease-in-out;
+      animation-iteration-count: infinite;
+      transform-origin: bottom center;
+      position: relative;
+    }
+  
+    .color-background {
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    /* --- SVG Balloon String --- */
+    .balloon-string-svg {
+      position: absolute;
+      top: 60px; /* match .color-swatch height */
+      left: 50%;
+      transform: translateX(-50%);
+      width: 20px;
+      height: 60px;
+      z-index: 0;
+      pointer-events: none;
+      overflow: visible;
+      transform-origin: top center;
+      animation: svgWiggle 2s ease-in-out infinite;
+    }
+    
+    
+    .balloon-float-group {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      animation-name: balloonFloat;
+      animation-duration: 4s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      transform-origin: bottom center;
+    }
+    
+    .wiggle-path {
+      stroke: #727171;
+      stroke-width: 2;
+      fill: none;
+      stroke-linecap: round;
+      stroke-dasharray: 1, 2;
+    }
+    
+    @keyframes svgWiggle {
+      0%, 100% {
+        transform: translateX(-50%) rotate(0deg);
+      }
+      25% {
+        transform: translateX(-50%) rotate(2deg);
+      }
+      50% {
+        transform: translateX(-50%) rotate(-2.5deg);
+      }
+      75% {
+        transform: translateX(-50%) rotate(1.5deg);
+      }
+    }
+  
+    #palette-controls {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      z-index: 200;
+    }
+    
+    /* Toggle Switch Styling */
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 60px;
+      height: 20px;
+    }
+    .switch input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0; left: 0;
+      right: 0; bottom: 0;
+      background-color: #ccc;
+      transition: 0.4s;
+      border-radius: 20px;
+    }
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 14px;
+      width: 14px;
+      left: 3px;
+      bottom: 3px;
+      background-color: white;
+      transition: 0.4s;
+      border-radius: 50%;
+    }
+    input:checked + .slider {
+      background-color: #4caf50;
+    }
+    input:checked + .slider:before {
+      transform: translateX(20px);
+    }
+    
+    /* Shuffle Button */
+    #shuffle-palette {
+      font-size: 16px;
+      padding: 4px 8px;
+      border: none;
+      background: #f0f0f0;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+     */
+}
+
+
+/* .checkmark-overlay {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  font-size: 16px;
+  font-weight: bold;
+  color: white;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 20;
+  pointer-events: none;
+} */
+
+@media (max-width: 600px) {
+
+  .swatch-wrapper {
+    width: 50px;
   }
 
   .color-name {
-    transition: all 0.3s ease;
-  }
-  
-  .color-name.highlighted-name {
-    text-decoration:underline;
-    font-weight: bold;
-    color: #111;
+    font-size: 0.65rem;
+    max-width: 40px;
+    word-wrap: break-word;
   }
 
-  @keyframes pop {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.2); }
-    100% { transform: scale(1); }
-  }
-  
-  .color-background.pop {
-    animation: pop 0.25s ease;
-  }
-  
-  .color-background.chosen {
-    transform: scale(2.2);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
-  }
-  .chosen{
-    z-index: 4;
+  #selected-palette h2 {
+    font-size: 1.1rem;
   }
+}
+
+.color-name {
+  transition: all 0.3s ease;
+}
+
+.color-name.highlighted-name {
+  text-decoration:underline;
+  font-weight: bold;
+  color: #111;
+}
+
+@keyframes pop {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+.color-background.pop {
+  animation: pop 0.25s ease;
+}
+
+.color-background.chosen {
+  transform: scale(2.2);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+}
+.chosen{
+  z-index: 4;
+}
 
 /* Shared metallic style */
 .metallic {
-    position: relative;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    /* box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.6),
-                0 2px 4px rgba(0, 0, 0, 0.3); */
-    overflow: hidden;
-  }
-  
-  /* Highlight overlay */
-  .metallic1::after {
-    content: '';
-    position: absolute;
-    top: 15%;
-    left: 15%;
-    width: 70%;
-    height: 70%;
-    background: radial-gradient(circle at top left, rgba(255,255,255,0.3), transparent 70%);
-    transform: rotate(-20deg);
-    pointer-events: none;
-    border-radius: 50%;
-  }
-  
-  /* Specific chrome variants */
-  .chrome-gold {
-    background: linear-gradient(145deg, #fefcea, #b69978, #a18b67, #806748);
-  }
-  
-  .chrome-silver {
-    background: linear-gradient(145deg, #e0e0e0, #a9a9a9, #808080, #e0e0e0);
-  }
-  
-  .chrome-rosegold {
-    background: linear-gradient(145deg, #fbe3dc, #e6b7a9, #d19387, #fbe3dc);
-  }
-  
-  .chrome-champagne {
-    background: linear-gradient(145deg, #fff2cc, #f2e6b6, #d9c08e, #fff2cc);
-  }
-  
-  .chrome-blue {
-    background: linear-gradient(145deg, #d0f0ff, #4d7995, #2d576f, #d0f0ff);
-  }
-  
-  .chrome-purple {
-    background: linear-gradient(145deg, #e0ccff, #b08be1, #915bc4, #e0ccff);
-  }
-  
-  .chrome-green {
-    background: linear-gradient(145deg, #e2ffe2, #457066, #5c877d, #e2ffe2);
-  }
-  
-  
-  @keyframes balloonFloat {
-    0%, 100% { transform: translateY(0) rotate(-4deg); }
-    50% { transform: translateY(-25px) rotate(4deg); }
-  }
-  
-  .balloon-float {
-    animation-name: balloonFloat;
-    animation-timing-function: 4s ease-in-out;
-    animation-iteration-count: infinite;
-    transform-origin: bottom center;
-    position: relative;
-  }
+  position: relative;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  /* box-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.6),
+              0 2px 4px rgba(0, 0, 0, 0.3); */
+  overflow: hidden;
+}
 
-  .color-background {
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-  /* --- SVG Balloon String --- */
-  .balloon-string-svg {
-    position: absolute;
-    top: 109px; /* match .color-swatch height */
-    left: 50%;
-    transform: translateX(-50%);
-    width: 20px;
-    height: 60px;
-    z-index: -4;
-    pointer-events: none;
-    overflow: visible;
-    transform-origin: top center;
-    animation: svgWiggle 2s ease-in-out infinite;
-  }
-  
-  
-  .balloon-float-group {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    animation-name: balloonFloat;
-    animation-duration: 4s;
-    animation-timing-function: ease-in-out;
-    animation-iteration-count: infinite;
-    transform-origin: bottom center;
-  }
-  
-  .wiggle-path {
-    stroke: #727171;
-    stroke-width: 2;
-    fill: none;
-    stroke-linecap: round;
-    stroke-dasharray: 1, 2;
-  }
-  
-  @keyframes svgWiggle {
-    0%, 100% {
-      transform: translateX(-50%) rotate(0deg);
-    }
-    25% {
-      transform: translateX(-50%) rotate(2deg);
-    }
-    50% {
-      transform: translateX(-50%) rotate(-2.5deg);
-    }
-    75% {
-      transform: translateX(-50%) rotate(1.5deg);
-    }
-  }
+/* Highlight overlay */
+.metallic1::after {
+  content: '';
+  position: absolute;
+  top: 15%;
+  left: 15%;
+  width: 70%;
+  height: 70%;
+  background: radial-gradient(circle at top left, rgba(255,255,255,0.3), transparent 70%);
+  transform: rotate(-20deg);
+  pointer-events: none;
+  border-radius: 50%;
+}
 
-  #palette-controls {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    z-index: 200;
+/* Specific chrome variants */
+.chrome-gold {
+  background: linear-gradient(145deg, #fefcea, #b69978, #a18b67, #806748);
+}
+
+.chrome-silver {
+  background: linear-gradient(145deg, #e0e0e0, #a9a9a9, #808080, #e0e0e0);
+}
+
+.chrome-rosegold {
+  background: linear-gradient(145deg, #fbe3dc, #e6b7a9, #d19387, #fbe3dc);
+}
+
+.chrome-champagne {
+  background: linear-gradient(145deg, #fff2cc, #f2e6b6, #d9c08e, #fff2cc);
+}
+
+.chrome-blue {
+  background: linear-gradient(145deg, #d0f0ff, #4d7995, #2d576f, #d0f0ff);
+}
+
+.chrome-purple {
+  background: linear-gradient(145deg, #e0ccff, #b08be1, #915bc4, #e0ccff);
+}
+
+.chrome-green {
+  background: linear-gradient(145deg, #e2ffe2, #457066, #5c877d, #e2ffe2);
+}
+
+
+@keyframes balloonFloat {
+  0%, 100% { transform: translateY(0) rotate(-4deg); }
+  50% { transform: translateY(-25px) rotate(4deg); }
+}
+
+.balloon-float {
+  animation-name: balloonFloat;
+  animation-timing-function: 4s ease-in-out;
+  animation-iteration-count: infinite;
+  transform-origin: bottom center;
+  position: relative;
+}
+
+.color-background {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+/* --- SVG Balloon String --- */
+.balloon-string-svg {
+  position: absolute;
+  top: 98px; /* match .color-swatch height */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 20px;
+  height: 60px;
+  z-index: -4;
+  pointer-events: none;
+  overflow: visible;
+  transform-origin: top center;
+  animation: svgWiggle 2s ease-in-out infinite;
+}
+
+
+.balloon-float-group {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation-name: balloonFloat;
+  animation-duration: 4s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  transform-origin: bottom center;
+}
+
+.wiggle-path {
+  stroke: #727171;
+  stroke-width: 2;
+  fill: none;
+  stroke-linecap: round;
+  stroke-dasharray: 1, 2;
+}
+
+@keyframes svgWiggle {
+  0%, 100% {
+    transform: translateX(-50%) rotate(0deg);
   }
-  
-  /* Toggle Switch Styling */
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 40px;
-    height: 20px;
+  25% {
+    transform: translateX(-50%) rotate(2deg);
   }
-  .switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
+  50% {
+    transform: translateX(-50%) rotate(-2.5deg);
   }
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0; left: 0;
-    right: 0; bottom: 0;
-    background-color: #ccc;
-    transition: 0.4s;
-    border-radius: 20px;
+  75% {
+    transform: translateX(-50%) rotate(1.5deg);
   }
-  .slider:before {
-    position: absolute;
-    content: "";
-    height: 14px;
-    width: 14px;
-    left: 3px;
-    bottom: 3px;
-    background-color: white;
-    transition: 0.4s;
-    border-radius: 50%;
-  }
-  input:checked + .slider {
-    background-color: #4caf50;
-  }
-  input:checked + .slider:before {
-    transform: translateX(20px);
-  }
-  
-  /* Shuffle Button */
-  #shuffle-palette {
-    font-size: 16px;
-    padding: 4px 8px;
-    border: none;
-    background: #f0f0f0;
-    border-radius: 6px;
-    cursor: pointer;
-  }
-  
\ No newline at end of file
+}
+
+#palette-controls {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  z-index: 200;
+}
+
+/* Toggle Switch Styling */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0; left: 0;
+  right: 0; bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 20px;
+}
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 14px;
+  width: 14px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+input:checked + .slider {
+  background-color: #4caf50;
+}
+input:checked + .slider:before {
+  transform: translateX(20px);
+}
+
+/* Shuffle Button */
+#shuffle-palette {
+  font-size: 16px;
+  padding: 4px 8px;
+  border: none;
+  background: #f0f0f0;
+  border-radius: 6px;
+  cursor: pointer;
+}