* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     body {
         font-family: 'Arial', sans-serif;
         background: black;
         min-height: 100vh;
         display: flex;
         flex-direction: column;
         overflow-x: hidden;
     }

     .game-container {
         flex: 1;
         display: flex;
         position: relative;
         min-height: 400px;
     }

     .shape-arena {
         flex: 1;
         position: relative;
         background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 100%);
         border-radius: 20px;
         margin: 20px;
         overflow: hidden;
         backdrop-filter: blur(10px);
         border: 1px solid rgba(255, 255, 255, 0.2);
     }

     /* Make the rules button inline and nicely spaced */
     .rules-button {
         position: static;
         /* Remove absolute positioning */
         margin-left: 14px;
         /* Space from the title */
         padding: 6px 14px;
         background: #0984e3;
         color: white;
         border: none;
         border-radius: 6px;
         font-weight: bold;
         cursor: pointer;
         font-size: 15px;
         transition: background 0.2s;
         box-shadow: 0 2px 8px rgba(9, 132, 227, 0.08);
         vertical-align: middle;
     }

     .rules-button:hover {
         background: #0652dd;
     }

     /* Rules Modal - Consistent Layout for All Screen Sizes */
     .rules-modal {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.8);
         display: flex;
         justify-content: center;
         align-items: center;
         z-index: 1000;
         opacity: 0;
         visibility: hidden;
         transition: all 0.3s ease;
         padding: 10px;
         box-sizing: border-box;
     }

     .rules-modal.show {
         opacity: 1;
         visibility: visible;
     }

     .rules-content-wide {
         background: white;
         border-radius: 16px;
         padding: 24px;
         width: 100%;
         max-width: 1000px;
         max-height: 95vh;
         overflow-y: auto;
         position: relative;
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
         box-sizing: border-box;
     }

     .modal-header {
         text-align: center;
         color: #2c3e50;
         margin-bottom: 24px;
         font-size: 2rem;
         font-weight: bold;
         padding-right: 40px;
     }

     /* Two Column Layout - Maintained on All Screens */
     .rules-columns {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 24px;
         align-items: start;
     }

     /* Left Column Styles */
     .rules-left-column h3 {
         color: #2c3e50;
         margin-bottom: 16px;
         font-size: 1.2rem;
         display: flex;
         align-items: center;
         gap: 8px;
     }

     .steps-section {
         margin-bottom: 24px;
     }

     .steps-list {
         padding-left: 20px;
         margin: 0;
     }

     .steps-list li {
         margin-bottom: 8px;
         line-height: 1.5;
         color: #34495e;
         font-size: 0.9rem;
     }

     /* Difficulty Table - Always Visible */
     .difficulty-table-desktop {
         display: block;
     }

     .table-wrapper {
         overflow-x: auto;
         border-radius: 8px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         background: white;
         max-height: 300px;
         overflow-y: auto;
     }

     .difficulty-table {
         width: 100%;
         border-collapse: collapse;
         font-size: 0.8rem;
         min-width: 100%;
     }

     .difficulty-table th,
     .difficulty-table td {
         padding: 8px 6px;
         text-align: left;
         border-bottom: 1px solid #e0e0e0;
         word-wrap: break-word;
     }

     .difficulty-table th {
         background: #f8f9fa;
         font-weight: bold;
         color: #2c3e50;
         position: sticky;
         top: 0;
         z-index: 1;
     }

     .difficulty-table tbody tr:hover {
         background: #f8f9fa;
     }

     /* Right Column Styles */
     .rules-right-column h3 {
         color: #2c3e50;
         margin-bottom: 16px;
         font-size: 1.2rem;
         display: flex;
         align-items: center;
         gap: 8px;
     }

     .colors-section {
         margin-bottom: 24px;
     }

     .color-list {
         list-style: none;
         padding: 0;
         margin: 0;
     }

     .color-list li {
         display: flex;
         align-items: center;
         margin-bottom: 10px;
         font-size: 0.9rem;
         color: #34495e;
         line-height: 1.4;
     }

     .color-indicator {
         width: 16px;
         height: 16px;
         border-radius: 50%;
         margin-right: 10px;
         flex-shrink: 0;
     }

     .color-indicator.red {
         background: #e74c3c;
     }

     .color-indicator.orange {
         background: #f39c12;
     }

     .color-indicator.yellow {
         background: #f1c40f;
     }

     .color-indicator.green {
         background: #27ae60;
     }

     .objective-section {
         margin-bottom: 14px;
     }

     .objective-box {
         background: #ecf0f1;
         padding: 6px;
         border-radius: 8px;
     }

     .objective-box p {
         margin-bottom: 14px;
         font-size: 1rem;
         color: #2c3e50;
         text-align: center;
     }

     .stats-mini {
         display: flex;
         flex-direction: column;
         gap: 8px;
     }

     .stats-mini span {
         background: white;
         padding: 8px 10px;
         border-radius: 6px;
         font-size: 0.85rem;
         color: #34495e;
         text-align: center;
     }

     .motivational-text {
         text-align: center;
         font-style: italic;
         color: #7f8c8d;
         margin-bottom: 16px;
         font-size: 0.9rem;
         line-height: 1.4;
     }

     .start-game-btn {
         width: 100%;
         padding: 14px;
         background: linear-gradient(135deg, #3498db, #2980b9);
         color: white;
         border: none;
         border-radius: 8px;
         font-size: 1.1rem;
         font-weight: bold;
         cursor: pointer;
         transition: all 0.3s ease;
     }

     .start-game-btn:hover {
         background: linear-gradient(135deg, #2980b9, #3498db);
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
     }

     .start-game-btn:active {
         transform: translateY(0);
     }

     @keyframes modalPop {
         0% {
             transform: scale(0.8);
             opacity: 0;
         }

         100% {
             transform: scale(1);
             opacity: 1;
         }
     }

     .rules-content h2 {
         margin-top: 0;
     }

     .rules-content ul {
         padding-left: 20px;
     }

     .rules-content li {
         margin-bottom: 10px;
         line-height: 1.5;
     }

     .close-btn {
         position: absolute;
         top: 16px;
         right: 20px;
         font-size: 28px;
         cursor: pointer;
         color: #666;
         z-index: 10;
         width: 32px;
         height: 32px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         transition: all 0.2s ease;
     }

     .close-btn:hover,
     .close-btn:focus {
         color: #ff6b6b;
         text-decoration: none;
     }

     .close-btn:hover {
         background: #f0f0f0;
         color: #333;
     }

     .goal-zone {
         position: absolute;
         top: 0;
         left: 50%;
         transform: translateX(-50%);
         width: 120px;
         height: 60px;
         background: white;
         /* Initially transparent */
         border-radius: 0 0 60px 60px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: black;
         font-weight: bold;
         font-size: 14px;
         box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3);

         transition: background 0.3s ease;

     }

     .goal-zone .goal-emoji {
         font-size: 2.8em;
         /* Adjust as needed */
         line-height: 1;
     }

     .goal-zone::before {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         background: transparent;
         /* Initially transparent */
         border-radius: 0 0 62px 62px;
         z-index: -1;
         animation: goalGlow 2s ease-in-out infinite alternate;
         transition: background 0.3s ease;
         /* Smooth transition for color change */
     }

     @keyframes goalGlow {
         0% {
             opacity: 0.5;
         }

         100% {
             opacity: 1;
         }
     }

     .moving-shape {
         position: absolute;
         bottom: 20px;
         left: 50%;
         transform: translateX(-50%);
         width: 60px;
         height: 60px;
         transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         z-index: 5;
         cursor: pointer;
     }

     /* Enhanced Cuboid */
     .shape-cuboid {
         width: 60px;
         height: 40px;
         background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
         border: 2px solid #06a085;
         border-radius: 8px;
         box-shadow:
             10px 10px 0 0 rgba(6, 160, 133, 0.8),
             0 10px 0 0 rgba(17, 153, 142, 0.6),
             10px 0 0 0 rgba(56, 239, 125, 0.4),
             0 0 20px rgba(17, 153, 142, 0.3);
         position: relative;
         transform: perspective(150px) rotateX(15deg) rotateY(-20deg);
         transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         animation: cuboid-pulse 2s ease-in-out infinite alternate;
     }

     @keyframes cuboid-pulse {
         0% {
             filter: brightness(1);
         }

         100% {
             filter: brightness(1.2);
         }
     }

     /* Enhanced Rectangular Prism */
     .shape-rectangular-prism {
         width: 70px;
         height: 35px;
         background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
         border: 2px solid #f093fb;
         border-radius: 6px;
         box-shadow:
             12px 8px 0 0 rgba(240, 147, 251, 0.8),
             0 8px 0 0 rgba(250, 112, 154, 0.6),
             12px 0 0 0 rgba(254, 225, 64, 0.4),
             0 0 25px rgba(250, 112, 154, 0.3);
         position: relative;
         transform: perspective(140px) rotateX(12deg) rotateY(-15deg);
         transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         animation: prism-shimmer 2.5s ease-in-out infinite;
     }

     @keyframes prism-shimmer {

         0%,
         100% {
             background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
             filter: hue-rotate(0deg);
         }

         50% {
             filter: hue-rotate(10deg) brightness(1.1);
         }
     }

     /* Enhanced Box */
     .shape-box {
         width: 50px;
         height: 50px;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         border: 2px solid #5a67d8;
         border-radius: 12px;
         box-shadow:
             8px 8px 0 0 rgba(90, 103, 216, 0.8),
             0 8px 0 0 rgba(102, 126, 234, 0.6),
             8px 0 0 0 rgba(118, 75, 162, 0.4),
             0 0 20px rgba(102, 126, 234, 0.3);
         position: relative;
         transform: perspective(120px) rotateX(10deg) rotateY(-10deg);
         transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         animation: box-wobble 3s ease-in-out infinite;
     }


     @keyframes box-wobble {

         0%,
         100% {
             transform: perspective(120px) rotateX(10deg) rotateY(-10deg);
         }

         25% {
             transform: perspective(120px) rotateX(12deg) rotateY(-8deg);
         }

         75% {
             transform: perspective(120px) rotateX(8deg) rotateY(-12deg);
         }
     }


     /* Responsive improvements */
     @media (max-width: 768px) {
         .moving-shape {
             width: 50px;
             height: 50px;
         }

         .shape-hexagon {
             width: 50px;
             height: 43px;
         }

         .shape-hexagon::before,
         .shape-hexagon::after {
             border-left-width: 25px;
             border-right-width: 25px;
         }

         .shape-cuboid {
             width: 50px;
             height: 35px;
         }

         .shape-rectangular-prism {
             width: 60px;
             height: 30px;
         }

         .shape-box {
             width: 45px;
             height: 45px;
         }
     }

     .cuboid-color {
         background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
     }

     .rectangular-prism-color {
         background: linear-gradient(120deg, #feca57 60%, #ff6b6b 100%) !important;
     }

     .box-color {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     }

     .celebration {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         pointer-events: none;
         z-index: 100;
     }

     .firework {
         position: absolute;
         width: 4px;
         height: 4px;
         border-radius: 50%;
         animation: firework 1s ease-out forwards;
     }

     @keyframes firework {
         0% {
             transform: scale(0);
             opacity: 1;
         }

         100% {
             transform: scale(20);
             opacity: 0;
         }
     }

     .success-message {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         background: rgba(255, 255, 255, 0.95);
         padding: 30px 40px;
         border-radius: 20px;
         text-align: center;
         font-size: 24px;
         font-weight: bold;
         color: #2c3e50;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
         animation: successPop 0.5s ease-out;
         z-index: 101;
     }

     @keyframes successPop {
         0% {
             transform: translate(-50%, -50%) scale(0.3);
             opacity: 0;
         }

         100% {
             transform: translate(-50%, -50%) scale(1);
             opacity: 1;
         }
     }

     @media (max-width: 768px) {
         .band-display {
             display: none;
         }
     }

     /* Band Display - Fully Responsive for All Screen Types */
     .band-display {
         position: fixed;
         top: clamp(0.5vh, 1vh, 2vh);
         right: clamp(0.5vw, 1vw, 2vw);
         width: clamp(220px, 20vw, 320px);
         max-height: clamp(50vh, 65vh, 80vh);
         background: linear-gradient(180deg, rgba(255, 255, 255, 0) 100%);
         z-index: 100;
         display: flex;
         flex-direction: column;
         gap: clamp(6px, 1.5vh, 15px);
         padding: clamp(15px, 16vh, 16px);
         overflow-y: auto;
         box-sizing: border-box;
     }

     /* Band Bars Section - Responsive */
     .band-bars-section {
         display: flex;
         flex-direction: column;
         gap: clamp(4px, 0.8vh, 8px);
         flex-shrink: 0;
         padding-right: 13px;
         padding-top: 13px;
     }

     .band-row {
         display: flex;
         align-items: center;
         gap: clamp(6px, 1.2vw, 12px);
         padding: clamp(3px, 0.5vh, 6px) 0;
     }

     .band-label {
         min-width: clamp(40px, 4vw, 55px);
         font-weight: 600;
         color: rgba(255, 255, 255, 0.95);
         font-size: clamp(0.75rem, 1.5vw, 0.9rem);
         flex-shrink: 0;
         text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
     }

     .band-bar-container {
         flex: 1;
         height: clamp(14px, 2vh, 20px);
         background: rgba(255, 255, 255, 0.15);
         border-radius: clamp(7px, 1vh, 10px);
         overflow: hidden;
         position: relative;
         border: 1px solid rgba(255, 255, 255, 0.1);
     }

     .band-bar {
         height: 100%;
         border-radius: clamp(7px, 1vh, 10px);
         transition: width 0.3s ease;
         position: relative;
     }

     .delta-bar {
         background: linear-gradient(90deg, #e74c3c, #c0392b);
         box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
     }

     .theta-bar {
         background: linear-gradient(90deg, #f39c12, #e67e22);
         box-shadow: 0 0 10px rgba(243, 156, 18, 0.4);
     }

     .alpha-bar {
         background: linear-gradient(90deg, #f1c40f, #f39c12);
         box-shadow: 0 0 10px rgba(241, 196, 15, 0.4);
     }

     .beta-bar {
         background: linear-gradient(90deg, #27ae60, #229954);
         box-shadow: 0 0 10px rgba(39, 174, 96, 0.4);
     }

     .gamma-bar {
         background: linear-gradient(90deg, #9b59b6, #8e44ad);
         box-shadow: 0 0 10px rgba(155, 89, 182, 0.4);
     }

     .band-value {
         min-width: clamp(30px, 3vw, 40px);
         text-align: right;
         font-weight: 600;
         color: rgba(255, 255, 255, 0.95);
         font-size: clamp(0.7rem, 1.3vw, 0.85rem);
         flex-shrink: 0;
         text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
     }

     /* Radar Section - Fully Responsive */
     .radar-section {
         display: flex;
         flex-direction: column;
         align-items: center;
         flex-shrink: 0;
     }

     .radar-container {
         width: 100%;
         max-width: clamp(200px, 18vw, 280px);
     }

     .radar-title {
         text-align: center;
         color: rgba(255, 255, 255, 0.95);
         font-size: clamp(0.9rem, 1.8vw, 1.1rem);
         font-weight: 700;
         margin-bottom: clamp(6px, 1.2vh, 12px);
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
         letter-spacing: 0.5px;
     }

     .radar-chart-container {
         width: 100%;
         height: clamp(180px, 20vh, 280px);
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .radar-chart {
         width: 100%;
         height: 100%;
         max-width: clamp(180px, 18vw, 280px);
         max-height: clamp(180px, 20vh, 280px);
     }

     /* Radar Chart Styles - Perfect Pentagon Layout */
     .radar-grid circle {
         fill: none;
         transition: stroke 0.3s ease;
     }

     .radar-axes line {
         transition: stroke 0.3s ease;
     }

     /* ✅ PROPERLY SPACED RADAR LABELS */
     .radar-label {
         font-size: clamp(11px, 1.5vw, 14px);
         font-weight: 700;

         letter-spacing: 0.3px;
         dominant-baseline: middle;
         transition: all 0.3s ease;
     }

     .delta-label {
         fill: #e74c3c;
     }

     .theta-label {
         fill: #f39c12;
     }

     .alpha-label {
         fill: #f1c40f;
     }

     .beta-label {
         fill: #27ae60;
     }

     .gamma-label {
         fill: #9b59b6;
     }

     .radar-polygon {
         fill: rgba(52, 152, 219, 0.25);
         stroke: #3498db;
         stroke-width: 2;
         transition: all 0.4s ease;
         filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.4));
     }

     .radar-point {
         transition: all 0.4s ease;
         stroke-width: 2;
         stroke: rgba(255, 255, 255, 0.9);
         filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
     }

     .delta-point {
         fill: #e74c3c;
     }

     .theta-point {
         fill: #f39c12;
     }

     .alpha-point {
         fill: #f1c40f;
     }

     .beta-point {
         fill: #27ae60;
     }

     .gamma-point {
         fill: #9b59b6;
     }

     /* Responsive adjustments */
     @media (max-width: 768px) {
         .radar-label {
             font-size: clamp(9px, 2vw, 12px);
         }
     }

     @media (max-width: 480px) {
         .radar-label {
             font-size: clamp(8px, 2.5vw, 10px);
         }
     }

     /* Large Desktop (1920px+) */
     @media (min-width: 1920px) {
         .band-display {
             width: clamp(320px, 16vw, 400px);
             max-height: 70vh;
         }

         .radar-label {
             font-size: clamp(14px, 1.2vw, 18px);
         }

         .radar-container {
             max-width: clamp(280px, 15vw, 350px);
         }

         .radar-chart-container {
             height: clamp(280px, 18vh, 350px);
         }
     }

     /* Desktop (1200px - 1919px) */
     @media (min-width: 1200px) and (max-width: 1919px) {
         .band-display {
             width: clamp(280px, 18vw, 340px);
             max-height: 65vh;
         }

         .radar-label {
             font-size: clamp(13px, 1.5vw, 16px);
         }
     }

     /* Laptop (1024px - 1199px) */
     @media (min-width: 1024px) and (max-width: 1199px) {
         .band-display {
             width: clamp(260px, 22vw, 300px);
             max-height: 60vh;
         }

         .radar-label {
             font-size: clamp(12px, 1.6vw, 15px);
         }
     }

     /* Tablet Landscape (768px - 1023px) */
     @media (min-width: 768px) and (max-width: 1023px) {
         .band-display {
             width: clamp(240px, 28vw, 280px);
             max-height: 55vh;
             top: clamp(1vh, 1.5vh, 2vh);
             right: clamp(1vw, 1.5vw, 2vw);
         }

         .radar-label {
             font-size: clamp(11px, 1.8vw, 14px);
         }

         .radar-container {
             max-width: clamp(180px, 20vw, 220px);
         }

         .radar-chart-container {
             height: clamp(160px, 18vh, 200px);
         }
     }

     /* Tablet Portrait (481px - 767px) */
     @media (min-width: 481px) and (max-width: 767px) {
         .band-display {
             width: clamp(220px, 35vw, 260px);
             max-height: 50vh;
             top: 1vh;
             right: 1vw;
         }

         .radar-label {
             font-size: clamp(10px, 2vw, 13px);
         }

         .radar-container {
             max-width: clamp(160px, 25vw, 200px);
         }

         .radar-chart-container {
             height: clamp(140px, 16vh, 180px);
         }
     }

     /* Mobile Landscape (426px - 480px) */
     @media (min-width: 426px) and (max-width: 480px) {
         .band-display {
             width: clamp(200px, 42vw, 240px);
             max-height: 45vh;
             padding: clamp(6px, 1.5vh, 10px);
             gap: clamp(4px, 1vh, 8px);
         }

         .radar-label {
             font-size: clamp(9px, 2.2vw, 12px);
         }

         .radar-container {
             max-width: clamp(140px, 30vw, 180px);
         }

         .radar-chart-container {
             height: clamp(120px, 14vh, 160px);
         }
     }

     /* Mobile Portrait (320px - 425px) */
     @media (min-width: 320px) and (max-width: 425px) {
         .band-display {
             width: clamp(180px, 50vw, 220px);
             max-height: 40vh;
             padding: clamp(5px, 1vh, 8px);
             gap: clamp(3px, 0.8vh, 6px);
             top: 0.5vh;
             right: 0.5vw;
         }

         .band-row {
             gap: clamp(4px, 1vw, 8px);
             padding: clamp(2px, 0.3vh, 4px) 0;
         }

         .band-label {
             min-width: clamp(35px, 8vw, 45px);
             font-size: clamp(0.65rem, 3vw, 0.8rem);
         }

         .band-value {
             min-width: clamp(25px, 6vw, 35px);
             font-size: clamp(0.6rem, 2.5vw, 0.75rem);
         }

         .radar-label {
             font-size: clamp(8px, 2.5vw, 11px);
         }

         .radar-container {
             max-width: clamp(120px, 35vw, 160px);
         }

         .radar-chart-container {
             height: clamp(100px, 12vh, 140px);
         }

         .radar-title {
             font-size: clamp(0.75rem, 3.5vw, 0.9rem);
             margin-bottom: clamp(3px, 0.8vh, 6px);
         }
     }

     /* Very Small Mobile (< 320px) */
     @media (max-width: 319px) {
         .band-display {
             width: clamp(160px, 55vw, 180px);
             max-height: 35vh;
             padding: 4px;
             gap: 3px;
         }

         .radar-label {
             font-size: clamp(7px, 3vw, 9px);
         }

         .radar-container {
             max-width: clamp(100px, 40vw, 130px);
         }

         .radar-chart-container {
             height: clamp(80px, 10vh, 110px);
         }
     }

     /* High DPI / Retina Display Support */
     @media (-webkit-min-device-pixel-ratio: 2),
     (min-resolution: 192dpi) {
         .band-display {
             border-width: 0.5px;
         }

         .radar-grid circle,
         .radar-axes line {
             stroke-width: 0.5;
         }
     }

     .control-panel {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         gap: 16px;
         justify-content: space-between;
         background: rgba(255, 255, 255, 0.05);
         backdrop-filter: blur(20px);
         border-radius: 16px;
         padding: 16px;
         align-items: stretch;
         margin: 0 auto;
         border: 1px solid rgba(255, 255, 255, 0.25);
         box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
         width: 95%;
         margin-bottom: 23px;
         max-width: none;
     }

     .panel-section {
         display: flex;
         flex-direction: column;
         gap: 16px;
         flex: 1;
         min-width: 0;
         background: rgba(255, 255, 255, 0.05);
         border-radius: 12px;
         padding: 16px;
         border: 1px solid rgba(255, 255, 255, 0.1);
     }

     .panel-divider {
         width: 6px;
         background: linear-gradient(to bottom,
                 transparent,
                 rgba(255, 255, 255, 0.3),
                 transparent);
         margin: 0 4px;
     }

     .section-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 6px;
     }

     .section-title {
         font-size: 16px;
         font-weight: 700;
         color: white;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
         letter-spacing: 0.5px;
     }

     .threshold-display {
         display: flex;
         align-items: center;
         gap: 6px;
         background: rgba(255, 255, 255, 0.1);
         padding: 4px 10px;
         border-radius: 16px;
         border: 1px solid rgba(255, 255, 255, 0.2);
     }

     .threshold-label {
         font-size: 16px;
         color: rgba(255, 255, 255, 0.8);
         font-weight: 500;
     }

     .threshold-controls {
         display: flex;
         align-items: center;
         gap: 12px;
         margin-left: 20px;
     }

     .slider-container {
         display: flex;
         align-items: center;
         gap: 8px;
     }

     .threshold-slider {
         width: 120px;
         height: 6px;
         border-radius: 3px;
         background: #ddd;
         outline: none;
         -webkit-appearance: none;
     }

     .threshold-slider::-webkit-slider-thumb {
         -webkit-appearance: none;
         appearance: none;
         width: 18px;
         height: 18px;
         border-radius: 50%;
         background: #48dbfb;
         cursor: pointer;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     }

     .threshold-slider::-moz-range-thumb {
         width: 18px;
         height: 18px;
         border-radius: 50%;
         background: #48dbfb;
         cursor: pointer;
         border: none;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     }

     .value-display {
         min-width: 40px;
         font-weight: bold;
         color: #48dbfb;
     }

     .difficulty-buttons {
         display: flex;
         flex-wrap: nowrap;
         justify-content: space-between;
         gap: 8px;
     }

     .difficulty-btn {
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
         gap: 8px;
         margin-top: 10px;
         background-color: rgba(255, 255, 255, 0.9);
         /* Solid light background */
         border-radius: 10px;
         padding: 10px 14px;
         min-width: 110px;
         height: 40px;
         font-size: 14px;
         font-weight: 600;
         border: 2px solid rgba(255, 255, 255, 0.2);
         color: #111;
         /* Black text */
         text-shadow: none;
         cursor: pointer;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
     }

     .difficulty-btn:hover {
         transform: translateY(-2px);
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
         background-color: white;
     }

     .difficulty-btn.active {
         background-color: #ffeaa7;
         /* Highlight active (light yellow) */
         border-color: #fab1a0;
         box-shadow: 0 0 0 3px rgba(255, 200, 100, 0.3);
     }

     .btn-icon {
         font-size: 18px;
     }

     .btn-text {
         font-size: 18px;
         font-weight: 580;
         color: #111;
         /* Black */
     }

     .btn-value {
         font-size: 13px;
         opacity: 0.8;
         font-weight: 500;
         color: #111;
     }

     .status-indicator {
         display: flex;
         align-items: center;
         gap: 8px;
         background: rgba(255, 255, 255, 0.08);
         padding: 6px 12px;
         border-radius: 20px;
         border: 1px solid rgba(255, 255, 255, 0.15);
     }

     .status-dot {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         background-color: #ff4757;
         box-shadow: 0 0 12px rgba(255, 71, 87, 0.6);
         animation: pulse 2s infinite;
     }

     @keyframes pulse {

         0%,
         100% {
             opacity: 1;
         }

         50% {
             opacity: 0.6;
         }
     }

     .status {
         color: white;
         font-size: 13px;
         font-weight: 600;
     }

     .control-button-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         /* one row, 4 buttons */
         gap: 8px;
         margin-top: 6px;
     }

     .control-btn {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 6px;
         padding: 10px 12px;
         font-size: 14px;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
         border-radius: 10px;
         border: 2px solid rgba(255, 255, 255, 0.2);
         font-weight: 600;
         cursor: pointer;
         transition: all 0.3s ease;
         text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
         position: relative;
         overflow: hidden;
     }

     .control-btn:hover:not(:disabled) {
         transform: translateY(-2px);
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
         border-color: rgba(255, 255, 255, 0.4);
     }

     .control-btn:disabled {
         opacity: 0.5;
         cursor: not-allowed;
         filter: grayscale(50%);
     }

     .connect-btn {
         background: #3191d0;
     }

     .disconnect-btn {
         background: #ff6b6b;
     }

     .start-btn {
         background: #00b894;
     }

     .stop-btn {
         background: #fdcb6e;
     }


     /* Make sure the progress bar is above the goal zone */
     .progress-indicator {
         position: absolute;
         left: 30px;
         /* Move it away from the center/goal */
         top: 80px;
         /* Place it below the goal zone */
         width: 20px;
         height: calc(100% - 120px);
         /* Adjust height to fit arena */
         background: #ccc;
         border-radius: 10px;
         overflow: hidden;
         z-index: 20;
         /* Higher than .goal-zone (default z-index: auto/0) */
     }

     .progress-fill {
         position: absolute;
         bottom: 0;
         width: 100%;
         height: 0%;
         background-color: #ee5253;
         transition: height 0.3s ease, background-color 0.3s ease;
         z-index: 21;
         /* Above the indicator */
     }

     .progress-percentage {
         position: absolute;
         left: 30px;
         /* Align with progress bar */
         top: 50px;
         /* Place above the progress bar and below the goal zone */
         width: 60px;
         text-align: center;
         font-size: 1.15rem;
         font-weight: bold;
         color: #10ac84;
         background: rgba(255, 255, 255, 0.95);
         border-radius: 12px;
         padding: 6px 0;
         z-index: 30;
         /* Ensure it's above everything else */
         box-shadow: 0 2px 8px rgba(16, 172, 132, 0.10);
         pointer-events: none;
     }


     .goal-counter {
         margin: 14px;
         position: absolute;
         top: 20px;
         left: 20px;
         background: rgba(255, 255, 255, 0.1);
         backdrop-filter: blur(10px);
         border-radius: 15px;
         padding: 15px;
         border: 1px solid rgba(255, 255, 255, 0.2);
         color: white;
         font-weight: bold;
         z-index: 20;
     }

     .winning-message {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         background: rgba(255, 255, 255, 0.95);
         padding: 40px 60px;
         border-radius: 20px;
         text-align: center;
         font-size: 32px;
         font-weight: bold;
         color: #2c3e50;
         box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
         animation: successPop 0.5s ease-out;
         z-index: 102;
     }

     /* Medium Devices (Tablets) */
     @media (max-width: 1024px) {
         .control-panel {
             flex-direction: column;
             gap: 12px;
         }

         .control-button-grid {
             grid-template-columns: repeat(2, 1fr);
         }

         .band-display {
             width: 100%;
             max-width: 100%;
             right: auto;
             left: 0;
             top: auto;
             bottom: 0;
             margin: 0;
             border-radius: 0;
             padding: 10px;
         }
     }


     /* Small Devices (Mobile Phones) */
     @media (max-width: 600px) {
         .game-container {
             flex-direction: column;
         }

         .shape-arena {
             margin: 10px;
         }

         .goal-zone {
             width: 80px;
             height: 40px;
             font-size: 12px;
         }

         .moving-shape {
             width: 40px;
             height: 40px;
         }

         .control-panel {
             padding: 12px;
             border-radius: 10px;
         }

         .control-button-grid {
             grid-template-columns: repeat(2, 1fr);
         }

         .difficulty-btn {
             min-width: 90px;
             height: 40px;
             font-size: 12px;
         }

         .band-label,
         .band-value {
             font-size: 10px;
         }

         .winning-message,
         .success-message {
             font-size: 20px;
             padding: 20px;
         }
     }

     /* Show .band-display only on screens wider than 1028px */
     @media (max-width: 1028px) {
         .band-display {
             display: none !important;
         }
     }

     @media (min-width: 1030px) and (max-width: 1357px) {
         .difficulty-buttons {
             flex-wrap: wrap;
             gap: 6px;
             justify-content: flex-start;
         }

         .difficulty-btn {
             min-width: 90px;
             font-size: 13px;
             padding: 8px 10px;
             margin-top: 6px;
         }
     }

     @keyframes mergeIntoGoal {
         0% {
             transform: scale(1);
             opacity: 1;
         }

         100% {
             transform: scale(0.1);
             opacity: 0;
         }
     }

     .shape-merging {
         animation: mergeIntoGoal 0.6s ease-out forwards;
     }