/* --- Друга модалка (суфікс) --- */

 @font-face {
     font-family: "MinecraftSimple";
     src: url("/font/fonts/MinecraftSimple.ttf") format("truetype");
     font-weight: normal;
     font-style: normal;
 }

 .container {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 20px;
     padding: 20px;
     background: #1a1a1f;
     border-radius: 16px;
 }

 .content {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     justify-content: center;
     width: 100%;
 }

 .input-box {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     flex: 1;
 }

 .input-box input {
     font-size: 18px;
     padding: 10px;
     border-radius: 8px;
     border: none;
     outline: none;
     width: 240px;
     text-align: center;
     background: #2b2b34;
     color: #ffffff;
 }

 .preview {
     font-family: "MinecraftSimple", sans-serif;
     font-size: 28px;
     padding: 12px 16px;
     background: #2d2d37;
     border: 2px solid #444;
     border-radius: 8px;
     text-shadow: 2px 2px 0 #000;
     min-width: 240px;
     text-align: center;
 }

 .styles {
     display: flex;
     gap: 8px;
     margin-top: 12px;
 }

 .style-btn {
     padding: 6px 12px;
     background: #3a3a46;
     color: #fff;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-size: 14px;
 }

 .style-btn.active {
     background: #8b5cf6;
 }

 .gradient-panel {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 14px;
     padding: 20px;
     background: #23232a;
     border-radius: 12px;
     min-width: 240px;
 }

 .gradient-inputs {
     display: flex;
     gap: 16px;
 }

 .gradient-inputs input[type="color"] {
     width: 60px;
     height: 40px;
     border: none;
     border-radius: 8px;
     cursor: pointer;
 }

 .gradient-panel input[type="range"] {
     width: 100%;
 }

 .bottom-btn {
     margin-top: 15px;
     padding: 12px 20px;
     background: #8b5cf6;
     border: none;
     border-radius: 10px;
     color: white;
     font-size: 16px;
     cursor: pointer;
 }

 /* --- ПРОМІЖНЕ МОДАЛЬНЕ (залишив ваші стилі як є) --- */
 #purposeModal {
     display: none;
     position: fixed;
     z-index: 1000;
     inset: 0;
     background: rgba(13, 13, 14, 0.5);
     backdrop-filter: blur(6px);
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.35s ease;
 }

 #purposeModal.show {
     opacity: 1;
     pointer-events: auto;
 }

 #purposeModal .modal-content {
     position: relative;
     background-color: #252525;
     padding: 30px 40px 40px;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(138, 86, 155, 0.8);
     width: 90%;
     max-width: 400px;
     color: #f3e9ff;
     transform: translateY(-40px);
     opacity: 0;
     animation: fadeSlideUp 0.4s forwards;
     user-select: none;
 }

 @keyframes fadeSlideUp {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 #purposeModal .close {
     position: absolute;
     top: 12px;
     right: 18px;
     font-size: 26px;
     font-weight: 700;
     color: #c7b9d9;
     cursor: pointer;
     transition: color 0.3s ease;
     user-select: none;
     pointer-events: auto;
 }

 #purposeModal .close:hover {
     color: #fff;
 }

 #purposeModal h2 {
     font-size: 24px;
     margin-bottom: 20px;
     font-weight: 700;
     letter-spacing: 0.05em;
     text-shadow: 0 0 8px #a993c7cc;
 }

 #purposeModal p {
     font-size: 16px;
     color: #d3c6e4;
     margin-bottom: 30px;
     line-height: 1.4;
     font-weight: 600;
 }

 .purpose-options {
     display: flex;
     flex-direction: column;
     gap: 14px;
     max-width: 320px;
     margin: 0 auto 32px;
     pointer-events: auto;
     position: relative;
     z-index: 10;
 }

 .purpose-options label {
     display: flex;
     align-items: center;
     background: #5e3b73;
     padding: 14px 22px;
     border-radius: 10px;
     font-size: 16px;
     font-weight: 600;
     color: #e7dfff;
     cursor: pointer;
     box-shadow: inset 0 0 8px #9078b8aa;
     transition: background-color 0.3s ease, box-shadow 0.3s ease;
     user-select: none;
     position: relative;
     z-index: 20;
 }

 .purpose-options label:hover {
     background: #7e59a1;
     box-shadow: inset 0 0 14px #b2a4d7cc;
 }

 .purpose-options input[type="radio"] {
     margin-right: 16px;
     width: 20px;
     height: 20px;
     cursor: pointer;
     accent-color: #b39ddb;
     position: relative;
     top: 1px;
     z-index: 30;
     flex-shrink: 0;
 }

 #purposeConfirmBtn {
     display: block;
     margin: 0 auto;
     padding: 14px 38px;
     font-size: 18px;
     font-weight: 700;
     background: linear-gradient(135deg, #705896, #432d57);
     color: #fff;
     border: none;
     border-radius: 14px;
     cursor: pointer;
     box-shadow: 0 6px 20px rgba(104, 88, 131, 0.8), inset 0 -5px 16px rgba(132, 92, 167, 0.9);
     transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
     user-select: none;
     width: 100%;
     max-width: 320px;
     pointer-events: auto;
 }

 #purposeConfirmBtn:hover {
     background: linear-gradient(135deg, #845ca7, #6b4587);
     transform: scale(1.06);
     box-shadow: 0 9px 28px rgba(132, 92, 167, 0.95), inset 0 -7px 22px rgba(107, 69, 135, 1);
 }

 #purposeConfirmBtn:active {
     transform: scale(0.95);
     box-shadow: 0 5px 12px rgba(132, 92, 167, 0.7), inset 0 -4px 12px rgba(107, 69, 135, 0.85);
     background: linear-gradient(135deg, #6b4587, #4d3463);
 }

 #purposeConfirmBtn:focus-visible {
     outline: 3px solid #d3c6f5;
     outline-offset: 3px;
 }

 /* --- АДАПТИВНІ ДОДАТКИ (не змінюють ваші базові значення, лише підлаштовують) --- */
 @media (max-width: 1200px) {
     .modal-content {
         width: 45%;
     }
 }

 @media (max-width: 992px) {
     .modal-content {
         width: 60%;
     }
 }

 button#donateButton6 {
     margin-top: 10px;
     background-color: #886ecb;
     color: white;
     padding: 14px 30px;
     font-size: 17px;
     font-weight: 600;
     border-radius: 7px;
     cursor: pointer;
     border: none;
     box-shadow: 0 5px 15px #6a52a0cc;
     transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }


 @media (max-width: 768px) {
     .nickname-container {
         flex-direction: column;
         gap: 15px;
         padding: 10px;
     }

     .image-container img {
         width: 220px;
         height: 220px;
         margin: 0 auto 15px;
     }

     input#nickname,
     button#donateButton {
         width: 90%;
     }

     .modal-content {
         width: 85%;
         padding: 22px;
     }
 }

 @media (max-width: 480px) {
     .modal-content {
         width: 95%;
         margin: 10% auto;
         padding: 15px;
     }

     h2 {
         font-size: 18px;
         padding-left: 10px;
         padding-right: 30px;
     }

     .image-container img {
         width: 180px;
         height: 180px;
     }

     input#nickname {
         font-size: 14px;
         padding: 10px 0;
     }

     button#donateButton {
         font-size: 14px;
         padding: 10px;
     }

     #error-message {
         font-size: 14px;
     }
 }

 #suffixModal {
     padding-top: 0px;
 }