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

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

 .container {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 20px;
     padding: 24px 22px 22px;
     background: #252525;
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(138,86,155,.6), 0 0 0 1px rgba(255,255,255,.05) inset;
     width: min(540px, 92vw);
     box-sizing: border-box;
 }

 .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: 1px solid rgba(255,255,255,.1);
     outline: none;
     width: 100%;
     max-width: 240px;
     box-sizing: border-box;
     text-align: center;
     background: rgba(255,255,255,.06);
     color: #ffffff;
     transition: border-color .2s ease;
 }
 .input-box input:focus {
     border-color: rgba(168,85,247,.7);
 }

 .preview {
     font-family: "MinecraftSimple", sans-serif;
     font-size: 25px;
     padding: 12px 16px;
     background: rgba(255,255,255,.06);
     border: 1px solid rgba(255,255,255,.1);
     border-radius: 10px;
     text-shadow: 2px 2px 0 #000;
     min-width: 0;
     width: 100%;
     max-width: 240px;
     box-sizing: border-box;
     text-align: center;
 }

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

 .style-btn {
     padding: 6px 12px;
     background: rgba(255,255,255,.08);
     border: 1px solid rgba(255,255,255,.1);
     color: rgba(255,255,255,.8);
     border-radius: 6px;
     cursor: pointer;
     font-size: 14px;
     transition: background .15s ease;
 }
 .style-btn:hover { background: rgba(255,255,255,.14); }

 .style-btn.active {
     background: rgba(139,92,246,.6);
     border-color: rgba(139,92,246,.8);
     color: #fff;
 }

 .gradient-panel {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 14px;
     padding: 18px;
     background: rgba(255,255,255,.04);
     border: 1px solid rgba(255,255,255,.08);
     border-radius: 14px;
     min-width: min(240px, 100%);
     box-sizing: border-box;
 }

 .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 {
     width: 100%;
     margin-top: 4px;
     padding: 15px 20px;
     background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
     border: none;
     border-radius: 14px;
     color: white;
     font-size: 16px;
     font-weight: 700;
     cursor: pointer;
     box-shadow: 0 8px 24px rgba(147,51,234,.4);
     transition: filter .2s ease, transform .15s ease;
 }
 .bottom-btn:hover {
     filter: brightness(1.1);
     transform: translateY(-1px);
 }
 .bottom-btn:active { transform: translateY(1px); }

 /* --- ПРОМІЖНЕ МОДАЛЬНЕ (залишив ваші стилі як є) --- */
 #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: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
     color: white;
     padding: 14px 30px;
     font-size: 17px;
     font-weight: 600;
     border-radius: 7px;
     cursor: pointer;
     border: none;
     box-shadow: 0 8px 24px rgba(147,51,234,.4);
     transition: filter 0.2s ease, transform 0.15s ease;
 }

 button#donateButton6:hover {
     filter: brightness(1.12);
     transform: translateY(-1px);
 }


 @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,
     button#donateButton6 {
         width: 100%;
     }

     .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: 20px;
 }


/* ========================================
   enterExitModal — Кастомний Вхід / Вихід
   ======================================== */

.ee-container {
    max-width: 540px;
    width: 100%;
    position: relative;
}

.ee-close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 28px;
    font-weight: 700;
    color: #bbb;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    user-select: none;
    z-index: 5;
}

.ee-close-btn:hover {
    color: #fff;
}

.ee-title {
    color: #f0e9ff;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 16px;
    text-align: center;
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.55);
    padding-right: 24px;
}

.ee-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.ee-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #23232a;
    border-radius: 12px;
}

.ee-section-header {
    display: flex;
    align-items: center;
}

.ee-badge {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

.ee-badge-join {
    background: rgba(85, 255, 85, 0.12);
    color: #55ff55;
    border: 1px solid rgba(85, 255, 85, 0.3);
}

.ee-badge-leave {
    background: rgba(255, 85, 85, 0.12);
    color: #ff5555;
    border: 1px solid rgba(255, 85, 85, 0.3);
}

.ee-label {
    color: #c4b5d9;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.ee-hint {
    color: #6b5e80;
    font-weight: 400;
    font-size: 12px;
}

.ee-input {
    font-size: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #3d3a50;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    background: #2b2b34;
    color: #ffffff;
    transition: border-color 0.2s;
}

.ee-input:focus {
    border-color: #8b5cf6;
}

.ee-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ee-color-label {
    color: #c4b5d9;
    font-size: 13px;
    font-weight: 600;
}

.ee-color-picker {
    width: 50px;
    height: 34px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: none;
    padding: 2px;
}

.ee-preview-line {
    font-family: "MinecraftSimple", monospace;
    font-size: 15px;
    padding: 10px 14px;
    background: #16161c;
    border-radius: 8px;
    border-left: 3px solid currentColor;
    word-break: break-word;
    text-shadow: 1px 1px 0 #000;
}

.ee-divider {
    height: 10px;
}


/* ========================================
   platePreviewModal — Попередній перегляд
   ======================================== */

.plate-container {
    max-width: 480px;
    width: 100%;
    position: relative;
}

.plate-title {
    color: #f0e9ff;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 6px;
    text-align: center;
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.55);
    padding-right: 24px;
}

.plate-subtitle {
    color: #7b6e99;
    font-size: 13px;
    text-align: center;
    margin: 0 0 16px;
}

.plate-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
}

.plate-info-label {
    color: #7b6e99;
    font-size: 13px;
    font-weight: 600;
}

.plate-nick-value {
    color: #e0d5f7;
    font-size: 15px;
    font-weight: 700;
    background: #2b2b34;
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid #3d3a50;
}

.plate-box {
    background: #0e0e12;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #2a2a35;
    margin-bottom: 20px;
}

.plate-box-header {
    background: #1a1a22;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #2a2a35;
}

.plate-box-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3a3a4a;
    display: inline-block;
    flex-shrink: 0;
}

.plate-box-title {
    color: #555;
    font-size: 11px;
    margin-left: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.plate-box-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plate-row {
    font-family: "MinecraftSimple", monospace;
    font-size: 16px;
    padding: 4px 0;
    text-shadow: 2px 2px 0 #000;
    word-break: break-word;
}

.plate-track-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1a1a22;
    border: 1px solid #2e2e3e;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.plate-track-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.plate-track-label {
    color: #a78bfa;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.plate-track-url {
    color: #c4b5d9;
    font-size: 12px;
    word-break: break-all;
    line-height: 1.4;
}

.plate-confirm-btn {
    width: 100%;
    font-size: 15px;
    padding: 14px;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    letter-spacing: 0.3px;
    transition: background 0.25s, transform 0.15s;
}

.plate-confirm-btn:hover {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    transform: scale(1.02);
}

@media (max-width: 600px) {
    .ee-container,
    .plate-container {
        max-width: 100%;
    }

    .ee-input {
        font-size: 14px;
    }

    .ee-preview-line,
    .plate-row {
        font-size: 13px;
    }
}

/* ── Фікс: кнопки у модалках нікнейму (перекриває чорний стиль .bucks-box button) ── */
.modal .input-button-container button,
#nicknameModal .input-button-container button,
#nicknameModal1 .input-button-container button,
#nicknameModal2 .input-button-container button,
#nicknameModal3 .input-button-container button,
#nicknameModal4 .input-button-container button,
#nicknameModal6 .input-button-container button,
#nicknameModalBundle .input-button-container button,
#discordIdModal .input-button-container button {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(147, 51, 234, .4) !important;
    transition: filter 0.2s ease, transform 0.15s ease !important;
}

.modal .input-button-container button:hover,
#nicknameModal .input-button-container button:hover,
#nicknameModal1 .input-button-container button:hover,
#nicknameModal2 .input-button-container button:hover,
#nicknameModal3 .input-button-container button:hover,
#nicknameModal4 .input-button-container button:hover,
#nicknameModal6 .input-button-container button:hover,
#nicknameModalBundle .input-button-container button:hover,
#discordIdModal .input-button-container button:hover {
    filter: brightness(1.12) !important;
    transform: translateY(-1px) !important;
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
}
/* ── suffixModal mobile fix ── */
@media (max-width: 540px) {
  .container {
    padding: 16px 14px 18px;
    gap: 14px;
  }

  .content {
    flex-direction: column;
    gap: 14px;
  }

  .input-box {
    width: 100%;
  }

  .input-box input,
  .preview {
    max-width: 100%;
    width: 100%;
    font-size: 16px;
  }

  .preview {
    font-size: 22px;
  }

  .gradient-panel {
    min-width: 0;
    width: 100%;
    padding: 14px;
  }

  .styles {
    flex-wrap: wrap;
    justify-content: center;
  }

  .bottom-btn {
    font-size: 14px;
    padding: 12px 16px;
  }
}