* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: Helvetica, sans-serif;
 }

 body {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     background: #333;
     padding: 20px;
 }

 .main-container {
     display: flex;
     gap: 60px;
     align-items: center;
     justify-content: center;
 }

 .wheel-container {
     position: relative;
     width: 480px;
     height: 480px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .wheel-container .spinBtn {
     position: absolute;
     width: 60px;
     height: 60px;
     background: #fff;
     border-radius: 50%;
     z-index: 10;
     display: flex;
     justify-content: center;
     align-items: center;
     text-transform: uppercase;
     font-weight: 600;
     color: #333;
     letter-spacing: 0.1em;
     border: 4px solid rgba(0, 0, 0, .75);
     cursor: pointer;
     user-select: none;
 }

 .wheel-container .spinBtn::before {
     content: '';
     position: absolute;
     top: -28px;
     width: 20px;
     height: 30px;
     background-color: #fff;
     clip-path: polygon(50% 0%, 15% 100%, 85% 100%);
 }

 .wheel-container .wheel {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #333;
     border-radius: 50%;
     overflow: hidden;
     box-shadow: 0 0 0 5px #333,
         0 0 0 15px #fff,
         0 0 0 18px #111;
     transition: transform 3s ease-in-out;
 }

 .wheel-container .wheel .number {
     position: absolute;
     width: 50%;
     height: 50%;
     background: var(--clr);
     transform-origin: bottom right;
     transform: rotate(calc(45deg * var(--i)));
     clip-path: polygon(0 0, 56% 0, 100% 100%, 0 56%);
     display: flex;
     justify-content: center;
     align-items: center;
     user-select: none;
     cursor: pointer;
 }

 .wheel-container .wheel .number span {
     position: relative;
     transform: rotate(45deg);
     font-size: 2em;
     font-weight: 700;
     color: #fff;
     text-shadow: 3px 5px 2px rgba(0, 0, 0, .15);
     white-space: normal;
     word-break: break-word;
     max-width: 120px;
     text-align: center;
     line-height: 1.1;
     padding: 5px;
 }

 .winner {
     position: absolute;
     bottom: -120px;
     background-color: #fff;
     padding: 10px 20px;
     border-radius: 10px;
     font-size: 1.5em;
     font-weight: bold;
     color: #333;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease-in-out;
     opacity: 0;
     pointer-events: none;
 }

 .winner.show {
     opacity: 1;
 }

 /* Painel de Controle */
 .control-panel {
     background: #fff;
     padding: 25px;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     width: 380px;
 }

 .control-panel h2 {
     margin-bottom: 20px;
     color: #333;
     text-align: center;
 }

 .options-list {
     margin-bottom: 20px;
 }

 .option-item {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
     padding: 10px;
     background: #f5f5f5;
     border-radius: 8px;
 }

 .option-item input {
     flex: 1;
     padding: 8px 13px;
     border: 1px solid #ddd;
     border-radius: 4px;
     font-size: 16px;
 }

 .color-picker {
     width: 10px;
     height: 40px;
     border: 4px solid #ddd !important;
     border-radius: 8px;
     cursor: pointer;
     position: relative;
     background: var(--picker-color);
     transition: all 0.2s;
 }

 .color-picker:hover {
     transform: scale(1.1);
     border-color: #999;
 }

 .color-picker::before {
     content: '🎨';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 18px;
     pointer-events: none;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
 }

 .remove-btn {
     height: 40px;
     background: #ff4757;
     color: white;
     padding: 8px 12px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 15px;
     border: 4px solid #ddd !important;

 }

 .remove-btn:hover {
     background: #ff3838;
     transform: scale(1.05);
 }

 .add-option-btn {
     width: 100%;
     background: #2ed573;
     color: white;
     border: none;
     padding: 12px;
     border-radius: 8px;
     cursor: pointer;
     font-size: 16px;
     font-weight: bold;
     margin-bottom: 15px;
 }

 .add-option-btn:hover {
     background: #26d05f;
 }

 .add-option-btn:disabled {
     background: #ccc;
     cursor: not-allowed;
 }

 .distribution-info {
     background: #e8f4f8;
     padding: 15px;
     border-radius: 8px;
     font-size: 14px;
     color: #333;
     border-left: 4px solid #3742fa;
 }

 .distribution-info strong {
     color: #3742fa;
 }

 /* ========================================
   RESPONSIVIDADE
   ======================================== */

 /* Tablets e telas médias (até 1024px) */
 @media (max-width: 1024px) {
     .main-container {
         flex-direction: column;
         gap: 30px;
         padding: 20px;
     }

     .wheel-container {
         width: 400px;
         height: 400px;
     }

     .wheel-container .spinBtn {
         width: 60px;
         height: 60px;
         font-size: 14px;
     }

     .wheel-container .spinBtn::before {
         top: -28px;
         width: 20px;
         height: 30px;
     }

     .control-panel {
         width: 100%;
         max-width: 500px;
     }
 }

 /* Tablets pequenos e celulares grandes (até 768px) */
 @media (max-width: 768px) {
     body {
         padding: 10px;
     }

     .main-container {
         gap: 20px;
     }

     .wheel-container {
         width: 320px;
         height: 320px;
     }

     .wheel-container .spinBtn {
         width: 50px;
         height: 50px;
         font-size: 12px;
     }

     .wheel-container .spinBtn::before {
         top: -24px;
         width: 18px;
         height: 26px;
     }

     .wheel-container .wheel .number span {
         font-size: 1.5em;
         max-width: 90px;
     }

     .winner {
         bottom: -70px;
         font-size: 1.2em;
         padding: 8px 16px;
     }

     .control-panel {
         width: 100%;
         max-width: 100%;
         padding: 20px;
     }

     .control-panel h2 {
         font-size: 1.3em;
     }

     .option-item {
         flex-wrap: nowrap;
         min-height: 50px;
         padding: 8px;
         gap: 8px;
     }

     .option-item input[type="text"] {
         flex: 1;
         min-width: 0;
         font-size: 14px;
         padding: 6px 8px;
     }

    .color-picker {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
    }

    .remove-btn {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
    }

     .color-picker::before {
         font-size: 16px;
     }

     .add-option-btn {
         padding: 10px;
         font-size: 14px;
     }

     .distribution-info {
         font-size: 12px;
         padding: 12px;
     }
 }

 /* Celulares pequenos (até 480px) */
 @media (max-width: 480px) {
     .wheel-container {
         width: 280px;
         height: 280px;
     }

     .wheel-container .spinBtn {
         width: 45px;
         height: 45px;
         font-size: 11px;
         letter-spacing: 0.05em;
     }

     .wheel-container .spinBtn::before {
         top: -20px;
         width: 16px;
         height: 24px;
     }

     .wheel-container .wheel .number span {
         font-size: 1.2em;
         max-width: 70px;
     }

     .winner {
         bottom: -60px;
         font-size: 1em;
         padding: 6px 12px;
     }

     .control-panel {
         padding: 15px;
     }

     .control-panel h2 {
         font-size: 1.1em;
         margin-bottom: 15px;
     }

     .option-item {
         padding: 6px;
         gap: 6px;
         min-height: 45px;
     }

     .option-item input[type="text"] {
         flex: 1;
         min-width: 0;
         font-size: 13px;
         padding: 5px 6px;
     }

    .color-picker {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
    }

    .remove-btn {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
    }

     .color-picker::before {
         font-size: 15px;
     }

     .add-option-btn {
         padding: 8px;
         font-size: 13px;
     }

     .distribution-info {
         font-size: 11px;
         padding: 10px;
     }
 }

 /* Celulares muito pequenos (até 360px) */
 @media (max-width: 360px) {
     .wheel-container {
         width: 240px;
         height: 240px;
     }

     .wheel-container .spinBtn {
         width: 40px;
         height: 40px;
         font-size: 10px;
     }

     .wheel-container .spinBtn::before {
         top: -18px;
         width: 14px;
         height: 22px;
     }

     .wheel-container .wheel .number span {
         font-size: 1em;
         max-width: 60px;
     }

     .winner {
         font-size: 0.9em;
     }

     .control-panel {
         padding: 12px;
     }

     .option-item {
         padding: 5px;
         gap: 5px;
         min-height: 40px;
     }

     .option-item input[type="text"] {
         font-size: 12px;
         padding: 4px 5px;
     }

    .color-picker {
        width: 35px !important;
        min-width: 35px !important;
        max-width: 35px !important;
        height: 35px !important;
    }

    .remove-btn {
        width: 35px !important;
        min-width: 35px !important;
        max-width: 35px !important;
        height: 35px !important;
    }

    .color-picker::before {
        font-size: 14px;
    }
 }