/* =========================================
   BASE STYLES & LAYOUT
   ========================================= */
html,
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #0A0A18;
    color: #E8E8FF;
    overflow-x: hidden;
}

.app-root {
    width: 100%;
    padding-top: 16px;
    padding-bottom: 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

@media (max-width: 860px) {
    .app-root.wide-mode {
        zoom: calc(100vw / 860);
    }
}

@media (max-width: 650px) {
    .app-root:not(.wide-mode) {
        zoom: calc(100vw / 650);
    }
}

.content-section {
    width: 650px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.monsters-section {
    width: 650px;
    margin: 0 auto;
    transition: width 0.4s ease;
    box-sizing: border-box;
    padding: 0 16px;
}

.monsters-section.wide {
    width: 860px;
}

/* =========================================
   HEADER & TABS
   ========================================= */
.header-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -10px;
}

.lang-toggle {
    display: flex;
    gap: 4px;
    background-color: #16162A;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid #2A2A4A;
}

.lang-btn {
    background: transparent;
    border: none;
    color: #8888BB;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background 0.3s, color 0.3s;
}

.lang-btn.active {
    background-color: #7B3FF2;
    color: #FFFFFF;
}

.app-header {
    text-align: center;
    margin-bottom: 24px;
}

.header-icon {
    font-size: 48px;
    margin-bottom: 8px;
    color: #7B3FF2;
}

h1 {
    font-size: 22px;
    margin: 0;
}

p {
    font-size: 13px;
    color: #8888BB;
    margin: 4px 0 0;
}

/* CONTAINER DAS ABAS E DO BOTÃO RESET */
.main-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid #2A2A4A;
    padding-bottom: 8px;
    align-items: flex-end;
    /* Alinha a base da aba ativa com a base do botão reset */
}

.main-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: #8888BB;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 0;
    cursor: pointer;
    transition: color 0.3s;
}

.main-tab.active {
    color: #FFD700;
    border-bottom: 3px solid #FFD700;
    margin-bottom: -11px;
}

/* Game Mode Toggle */
.toggle-container {
    display: flex;
    background-color: #16162A;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
    border: 1px solid #2A2A4A;
}

.toggle-container input[type="radio"] {
    display: none;
}

.toggle-container label {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #8888BB;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.toggle-container input[type="radio"]:checked+label {
    background-color: #7B3FF2;
    color: #FFFFFF;
}

/* =========================================
   TURN ORDER & TOP TOOLBAR
   ========================================= */
.turn-order-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px !important;
    gap: 12px;
}

.turn-order-text {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 12px;
    color: #E8E8FF;
    background-color: #1E1E38;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px dashed #4A4A6A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Global Settings */
.global-settings {
    display: flex;
    justify-content: center;
    margin-bottom: 5px !important;
    gap: 12px;
}

.setting-group {
    background-color: #16162A;
    border: 1px dashed #7B3FF2;
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.setting-group.disabled-group {
    border-color: #4A4A6A;
    opacity: 0.5;
    pointer-events: none;
}

.toolbar-line {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 5px !important;
    background: #16162A;
    padding: 10px;
    border-radius: 8px;
    overflow: hidden;
}

/* Textos da Toolbar */
.setting-group-mini,
.setting-group label,
.toolbar-line label {
    font-size: 12px;
    color: #FFD700;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Inputs da Toolbar */
.toolbar-line input[type="number"],
.toolbar-line input[type="text"] {
    width: 70px !important;
    max-width: 70px !important;
    background-color: #1E1E38;
    color: #E8E8FF;
    border: 1px solid #4A4A6A;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: bold;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: center;
}

.toolbar-line input:focus {
    border-color: #7B3FF2;
    box-shadow: 0 0 6px rgba(123, 63, 242, 0.4);
}

.mini-select,
.mini-tick,
.tick-display,
#team-tower-percent {
    background-color: #1E1E38;
    color: #E8E8FF;
    border: 1px solid #4A4A6A;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: bold;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: center;
}

.mini-select:focus,
.mini-tick:focus,
.tick-display:focus,
#team-tower-percent:focus {
    border-color: #7B3FF2;
    box-shadow: 0 0 6px rgba(123, 63, 242, 0.4);
}

/* Dropdowns com a Seta Roxa */
.mini-select,
#team-tower-percent,
.setting-group select,
.leader-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 32px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B3FF2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

.leader-select {
    width: auto;
    max-width: 180px;
    padding: 6px 28px 6px 10px;
    font-size: 14px;
    font-weight: bold;
    color: #FFD700;
    background-color: #1E1E38;
    border: 1px solid #4A4A6A;
    border-radius: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-size: 16px;
}

#team-tower-percent.leader-select {
    text-align-last: center;
    padding-left: 28px;
}

.monster-slot .leader-select {
    color: #E8E8FF;
    border-color: #2A2A4A;
    background-size: 14px;
    background-position: right 6px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8E8FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.leader-select option {
    background-color: #16162A;
    color: #E8E8FF;
    padding: 8px;
}

/* =========================================
   MONSTER SLOTS & CAMADAS (HEAD E BODY)
   ========================================= */
.monsters-container {
    display: flex;
    gap: 12px;
    padding: 45px 0 16px 0;
    width: 100%;
    box-sizing: border-box;
}

/* O Slot Pai (Esqueleto Invisível) */
.monster-slot {
    width: 198px;
    flex: 0 0 198px;
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-top: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* O Cabeçalho (Onde fica a Aba) */
.monster-slot-head {
    position: absolute;
    top: -42px;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 1;
}

/* O Bloco visual da aba do líder */
.leader-block {
    width: 100%;
    height: 100%;
    background: #1E1E38;
    border: 1px solid #4A4A6A;
    border-top: 4px solid #4A4A6A;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 5px;
    padding-bottom: 20px;
    pointer-events: auto;
}

/* O Corpo do Card (Visual e Conteúdo) */
.monster-slot-body {
    position: relative;
    z-index: 2;
    background-color: #16162A;
    border-radius: 12px;
    border-top: 4px solid #4A4A6A;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* =========================================
   ESTADOS E CORES DA LÍDER SPD
   ========================================= */
.leader-text {
    color: #8888BB !important;
    transition: color 0.3s;
}

.disabled-leader {
    opacity: 0.3;
    pointer-events: none !important;
    filter: grayscale(100%);
}

.disabled-leader .leader-text {
    color: #4A4A6A !important;
}

.monster-slot.selected .monster-slot-body {
    border-top: 4px solid #7B3FF2 !important;
}

.monster-slot.is-leader .monster-slot-body {
    border-top: 4px solid #FFD700 !important;
}

.monster-slot.is-leader .leader-block {
    border: 1px solid #FFD700;
    border-top: 4px solid #FFD700;
}

.monster-slot.is-leader .leader-text {
    color: #FFD700 !important;
}

.monster-slot.selected .slot-order {
    background: #FFD700;
    color: #000000;
}

.leader-block .custom-checkbox-wrapper {
    margin-top: 0;
    width: auto;
}

/* =========================================
   ELEMENTOS INTERNOS DO CARD
   ========================================= */
.remove-monster-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    background-color: #FF5252;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
}

.slot-element-icon {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #16162A;
    background-size: 15px;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 10;
}

.element-water {
    border: 2px solid #42A5F5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342A5F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
}

.element-fire {
    border: 2px solid #FF5252;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2c0 0-5 6.5-5 11a5 5 0 0 0 10 0c0-4.5-5-11-5-11Z'/%3E%3C/svg%3E");
}

.element-wind {
    border: 2px solid #FFCA28;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFCA28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 1 10-10c0 4-3 7-7 7a5 5 0 1 1 5-5'/%3E%3C/svg%3E");
}

.element-light {
    border: 2px solid #FFEE58;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFEE58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41m11.32-11.32l1.41-1.41'/%3E%3C/svg%3E");
}

.element-dark {
    border: 2px solid #AB47BC;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AB47BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

.slot-order {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #2A2A4A;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    transition: all 0.3s ease;
    z-index: 10 !important;
}

.monster-image-btn {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-color: #1E1E38;
    border: 2px dashed #4A4A6A;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top: 8px;
    margin-bottom: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.monster-image-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.monster-name {
    font-size: 13px;
    text-align: center;
    height: 24px;
    margin-bottom: 6px;
    font-weight: bold;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.req-spd-display {
    font-size: 15px;
    color: #FF5252;
    font-weight: bold;
    margin-bottom: 4px;
    text-align: center;
    width: 100%;
    line-height: 1.2;
}

.base-spd-display,
.total-spd-display {
    font-size: 12px;
    color: #FFD700;
    font-weight: bold;
    margin-bottom: 2px;
    text-align: center;
    width: 100%;
}

.input-label {
    font-size: 10px;
    color: #8888BB;
    width: 100%;
    text-align: left;
    margin-bottom: 2px;
    text-transform: uppercase;
}

/* =========================================
   CAIXAS DE ENTRADA DO CARD (INPUTS E SPIN)
   ========================================= */
.custom-number-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 5px;
}

.slot-input {
    width: 100%;
    padding: 6px 28px 6px 10px;
    border-radius: 6px;
    border: 1px solid #4A4A6A;
    background-color: #1E1E38;
    color: #E8E8FF;
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin: 0;
}

.slot-input:focus {
    border-color: #7B3FF2;
    box-shadow: 0 0 6px rgba(123, 63, 242, 0.4);
}

.slot-input:disabled {
    background-color: #16162A !important;
    border-color: transparent !important;
    color: #4A4A6A !important;
    -webkit-text-fill-color: #4A4A6A !important;
    cursor: not-allowed;
}

.slot-input[type="number"]::-webkit-inner-spin-button,
.slot-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.slot-input[type="number"] {
    -moz-appearance: textfield;
}

.custom-spinners {
    position: absolute;
    right: 3px;
    top: 3px;
    bottom: 3px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 20px;
}

.spin-up,
.spin-down {
    flex: 1;
    background-color: #2A2A4A;
    border-radius: 4px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    transition: background-color 0.2s;
}

.spin-up:hover,
.spin-down:hover {
    background-color: #4A4A6A;
}

.spin-up {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B3FF2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}

.spin-down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B3FF2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.disabled-section .spin-up,
.disabled-section .spin-down {
    cursor: not-allowed;
    opacity: 0.2;
}

/* =========================================
   RODAPÉ, MODAL E CHECKBOXES
   ========================================= */
button#calculate-btn,
.main-calc-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    background-color: #7B3FF2;
    color: white;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 16px;
}

.info-footer {
    margin-top: 24px;
    font-size: 12px;
    color: #8888BB;
    line-height: 1.5;
}

.footer-credits {
    margin-top: 15px;
    font-size: 0.85em;
    text-align: center;
    color: #FFFFFF;
}

.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 24, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.search-box {
    background-color: #16162A;
    width: 90%;
    max-width: 450px;
    height: 80vh;
    border-radius: 16px;
    border: 1px solid #4A4A6A;
    display: flex;
    flex-direction: column;
    padding: 16px;
    box-sizing: border-box;
}

.result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #1E1E38;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 8px;
}

.result-icon {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
}

.search-box input {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #4A4A6A;
    background-color: #1E1E38;
    color: #E8E8FF;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 12px;
    outline: none;
}

.search-box input:focus {
    border-color: #7B3FF2;
}

.search-results {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.search-results::-webkit-scrollbar {
    width: 6px;
}

.search-results::-webkit-scrollbar-track {
    background: #16162A;
}

.search-results::-webkit-scrollbar-thumb {
    background: #4A4A6A;
    border-radius: 4px;
}

.result-name {
    font-size: 14px;
    font-weight: bold;
    color: #E8E8FF;
}

button#close-search {
    margin-top: 16px;
    padding: 12px;
    background-color: #2A2A4A;
    color: #E8E8FF;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
    width: 100%;
}

button#close-search:hover {
    background-color: #FF5252;
    color: white;
}

.custom-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
    cursor: pointer;
    justify-content: center;
}

.custom-checkbox-wrapper input {
    display: none;
}

.checkmark {
    width: 18px;
    height: 18px;
    background-color: #1E1E38;
    border: 2px solid #2A2A4A;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.custom-checkbox-wrapper input:checked+.checkmark {
    background-color: #7B3FF2;
    border-color: #7B3FF2;
}

.custom-checkbox-wrapper input:checked+.checkmark::after {
    content: '✔';
    color: white;
    font-size: 12px;
}

.checkbox-label {
    font-size: 11px;
    color: #8888BB;
    text-align: left;
}

.help-icon {
    background: #2A2A4A;
    border-radius: 50%;
    padding: 0 4px;
    cursor: help;
}

.disabled-section {
    opacity: 0.3;
    pointer-events: none;
}

/* =======================================
   ESTILOS DO BOTÃO RESET (MOVIDO PARA ABAS)
======================================= */
.reset-all-btn {
    background-color: #16162A;
    color: #FF5252;
    /* Cor vermelha vibrante para destacar como ação destrutiva */
    border: 1px solid #FF5252;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 32px;
    /* Encaixe óptico perfeito com as abas */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    /* Empurra o botão pro extremo direito das abas */
    margin-bottom: 2px;
}

.reset-all-btn:hover {
    background-color: #FF5252;
    color: #FFF;
    box-shadow: 0 0 8px rgba(255, 82, 82, 0.5);
    /* Glow alert */
}

/* =======================================
   ESTILOS DO DRAG & DROP
======================================= */
.monster-slot.dragging {
    opacity: 0.5;
    border: 2px dashed #7B3FF2 !important;
    transform: scale(0.98);
    border-radius: 12px;
}

.monster-slot.drag-over {
    border: 2px solid #00E676 !important;
    background-color: rgba(0, 230, 118, 0.1) !important;
    border-radius: 12px;
}

/* =======================================
   AJUSTES MOBILE E LAYOUT GERAL
======================================= */
@media (max-width: 850px) {
    .toolbar-line {
        justify-content: center;
    }

    .monsters-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
    }

    .monster-slot {
        flex: 0 0 198px;
    }

    /* Seta roxa personalizada para TODOS os selects do projeto */
    select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B3FF2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 14px;
        cursor: pointer;
        padding-right: 32px;
    }

    /* Garante que o select da toolbar (mini-select) mantenha o tamanho certo */
    .mini-select {
        width: 75px !important;
    }

    /* Garante que o select dos monstros (como o de skill up) ocupe o espaço corretamente */
    .slot-input {
        width: 100%;
    }
}