/* ===========================
   INICIO: WIKI
   Descripción: Archivo comentado para identificar claramente el propósito general y los bloques internos de lógica/estilos.
=========================== */

    .orange-ambient-section {
        background: radial-gradient(circle at top, rgba(249, 115, 22, 0.07), transparent 58%), #000000;
    }
    .orange-ambient-panel {
        background: linear-gradient(170deg, rgba(16, 18, 24, 0.95), rgba(7, 9, 14, 0.95));
    }
    .wiki-select {
        color: #e2e8f0;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 0.75rem;
        background: linear-gradient(160deg, rgba(15, 23, 42, 0.85), rgba(2, 6, 23, 0.9));
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .wiki-select:hover {
        border-color: rgba(251, 146, 60, 0.45);
    }
    .wiki-select:focus {
        border-color: rgba(59, 130, 246, 0.85);
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
        outline: none;
    }
    .wiki-select option {
        color: #e2e8f0;
        background: #0b1220;
    }
    .card-accent-border {
        border-color: var(--card-accent, rgba(250, 204, 21, 0.45));
    }
    .card-accent-border-rounded {
        position: relative;
        border-color: transparent;
        border-image: none;
    }
    .card-accent-border-rounded::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        background: var(
            --card-accent-border-image,
            linear-gradient(120deg, var(--card-accent, rgba(250, 204, 21, 0.45)) 0%, var(--card-accent, rgba(250, 204, 21, 0.45)) 100%)
        );
        box-shadow: 0 0 18px var(--card-accent-shadow, rgba(250, 204, 21, 0.45));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
    .card-accent-text {
        color: var(--card-accent-text, #facc15);
    }
    .card-accent-glow {
        text-shadow: 0 1px 8px var(--card-accent-shadow, rgba(250, 204, 21, 0.35));
    }
    .card-accent-chip {
        border-color: var(--card-accent, rgba(250, 204, 21, 0.45));
        background-color: var(--card-accent-soft, rgba(250, 204, 21, 0.12));
        color: var(--card-accent-text, #facc15);
    }
    .card-color-frame {
        padding: 2px;
        border-radius: 0.8rem;
        background: var(--card-frame-border, rgba(255, 255, 255, 0.08));
    }
    .card-color-inner {
        background: rgba(0, 0, 0, 0.4);
        border-radius: 0.7rem;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .card-accent-gradient-text {
        background-image: var(--card-accent-gradient, linear-gradient(90deg, #facc15 0%, #facc15 100%));
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 0 8px var(--card-accent-shadow, rgba(250, 204, 21, 0.35)));
    }
    .card-meta-color {
        font-weight: 600;
    }
    .card-meta-color[data-color-token="red"] {
        color: #f87171;
        text-shadow: 0 0 10px rgba(239, 68, 68, 0.45);
    }
    .card-meta-color[data-color-token="blue"] {
        color: #60a5fa;
        text-shadow: 0 0 10px rgba(59, 130, 246, 0.45);
    }
    .card-meta-color[data-color-token="green"] {
        color: #4ade80;
        text-shadow: 0 0 10px rgba(34, 197, 94, 0.45);
    }
    .card-meta-color[data-color-token="yellow"] {
        color: #facc15;
        text-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
    }
    .card-meta-color[data-color-token="purple"] {
        color: #c084fc;
        text-shadow: 0 0 10px rgba(168, 85, 247, 0.45);
    }
    .card-meta-color[data-color-token="black"] {
        color: #e2e8f0;
        text-shadow: 0 0 10px rgba(148, 163, 184, 0.4);
    }
    .filter-panel {
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
        overflow: hidden;
        pointer-events: none;
        transition: max-height 0.45s ease, opacity 0.35s ease, transform 0.35s ease;
    }
    .filter-panel.is-open {
        max-height: 1400px;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    @media (prefers-reduced-motion: reduce) {
        .filter-panel {
            transition: none;
        }
    }
    .card-list-item {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .card-list-media {
        aspect-ratio: 3 / 4;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .card-list-media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .card-list-name {
        min-height: 2.75rem;
        line-height: 1.25rem;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .card-list-item:hover .card-list-name {
        color: var(--card-hover-text, #facc15);
    }
    .card-list-item:hover .card-color-frame {
        box-shadow: 0 0 18px var(--card-hover-shadow, rgba(250, 204, 21, 0.45));
    }
    .card-effect-text {
        line-height: 1.6;
        letter-spacing: 0.01em;
    }
    .effect-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.1rem 0.6rem;
        margin: 0 0.3rem 0.2rem 0;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border: 1px solid transparent;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
        vertical-align: middle;
        white-space: nowrap;
        border-radius: 0.45rem;
    }
    .effect-badge--keyword {
        background: linear-gradient(135deg, #f59e0b, #fb923c);
        border-color: #facc15;
        color: #1f1300;
        clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
        border-radius: 0;
    }
    .effect-badge--activate {
        background: linear-gradient(135deg, #1d4ed8, #3b82f6);
        border-color: #60a5fa;
        color: #ffffff;
        border-radius: 0.45rem;
    }
    .effect-badge--timing {
        background: linear-gradient(135deg, #1d4ed8, #3b82f6);
        border-color: #60a5fa;
        color: #ffffff;
        border-radius: 0.45rem;
    }
    .effect-badge--once {
        background: linear-gradient(135deg, #f87171, #fb7185);
        border-color: #fca5a5;
        color: #2b0b0b;
        border-radius: 999px;
        padding: 0.1rem 0.7rem;
    }
    .effect-badge--counter {
        background: linear-gradient(135deg, #ef4444, #f97316);
        border-color: #fecaca;
        color: #ffffff;
        border-radius: 0.45rem;
        padding: 0.2rem 0.55rem;
    }
    .effect-badge--counter::before {
        content: "⚡";
        margin-right: 0.35rem;
        font-size: 0.9em;
    }
    .effect-badge--don {
        background: linear-gradient(135deg, #e5e7eb, #f8fafc);
        border-color: #ffffff;
        color: #111827;
        border-radius: 0.45rem;
    }
    .effect-badge--trigger {
        background: #facc15;
        border-color: #fbbf24;
        color: #111827;
        border-radius: 0.45rem;
    }
    .effect-badge--rush-character {
        background: linear-gradient(135deg, #f59e0b, #fb923c);
        border-color: #facc15;
        color: #1f1300;
        clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
        border-radius: 0;
    }
    .leader-life-display {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .leader-life-icon {
        --life-color-primary: #9ca3af;
        --life-color-secondary: var(--life-color-primary);
        --life-text: #f8fafc;
        position: relative;
        width: 3.8rem;
        height: 3.8rem;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-weight: 800;
        color: var(--life-text);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
        background: linear-gradient(90deg, var(--life-color-primary) 0%, var(--life-color-primary) 50%, var(--life-color-secondary) 50%, var(--life-color-secondary) 100%);
        box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 255, 255, 0.25);
    }
    .leader-life-icon.hidden {
        display: none;
    }
    .leader-life-icon::before {
        content: '';
        position: absolute;
        inset: 0.35rem;
        border-radius: 999px;
        background: rgba(8, 15, 25, 0.95);
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    }
    .leader-life-value {
        position: relative;
        font-size: 1.2rem;
        line-height: 1;
    }
    .leader-life-label {
        display: block;
        font-size: 0.65rem;
        letter-spacing: 0.16em;
        margin-top: 0.2rem;
        color: #f8fafc;
    }
    .character-cost-display {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .character-cost-display.hidden {
        display: none;
    }
    .character-cost-icon {
        --cost-color-primary: #facc15;
        --cost-color-secondary: #fde047;
        --cost-text-color: #111827;
        position: relative;
        width: 3.55rem;
        height: 3.55rem;
        border-radius: 999px;
        display: grid;
        place-items: center;
        font-size: 1.8rem;
        font-weight: 900;
        line-height: 1;
        color: var(--cost-text-color);
        text-shadow: 0 1px 5px rgba(255, 255, 255, 0.5);
        background: linear-gradient(135deg, var(--cost-color-primary) 40%, var(--cost-color-secondary) 60%);
        border: 2px solid rgba(255, 255, 255, 0.75);
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), 0 0 12px rgba(0, 0, 0, 0.25);
    }
    .character-cost-icon::before {
        content: '';
        position: absolute;
        inset: 0.28rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        pointer-events: none;
    }
    .character-cost-value {
        position: relative;
        z-index: 1;
    }
    .card-hover-preview {
        position: fixed;
        z-index: 70;
        width: min(300px, 32vw);
        pointer-events: none;
        opacity: 0;
        transform: translate3d(20px, -50%, 0) scale(0.95);
        transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6));
    }
    .card-hover-preview.is-visible {
        opacity: 1;
        transform: translate3d(24px, -50%, 0) scale(1);
    }
    .card-hover-preview img {
        width: 100%;
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background: rgba(12, 12, 14, 0.9);
    }

    /* ===========================
       FIX MODAL WIKI (MÓVIL)
       - Sin cambiar estética
       - Solo estructura / scroll / cierre
    =========================== */

    /* Bloquea scroll del body al abrir modal */
    body.modal-open {
        overflow: hidden;
        touch-action: none;
    }

    /* En cualquier tamaño: que el contenido no se salga */
    #card-modal-content {
        max-height: 90vh;
        overflow: hidden; /* el scroll lo tendrá el contenido interno */
    }

    /* En móvil: el modal debe ser scrolleable por dentro */
    @media (max-width: 768px) {

        /* el fondo debe permitir que el modal esté centrado bien */
        #card-modal {
            align-items: center !important;
            justify-content: center !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

        #card-hover-preview {
            display: none !important;
        }

        /* el panel ocupa casi toda la pantalla */
        #card-modal-content {
            width: 100% !important;
            max-width: 100% !important;
            max-height: 88vh !important;

            /* IMPORTANTE: no tocamos colores ni bordes */
        }

        /* el botón X siempre visible arriba */
        #card-modal-close {
            position: absolute !important;
            right: 0.9rem !important;
            top: 0.9rem !important;
            z-index: 50 !important;

            /* evita que quede tapado */
            padding: 0.4rem 0.6rem !important;
            border-radius: 0.75rem !important;
            background: rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(8px);
        }

        /* El contenido interno debe scrollear */
        #card-details {
            overflow-y: auto !important;
            max-height: calc(88vh - 1.5rem) !important;
            padding-right: 0.25rem;
            -webkit-overflow-scrolling: touch;
        }

        /* Ajustes de layout dentro del modal para que respire */
        #card-details .grid {
            gap: 0.75rem !important;
        }

        /* Reduce un pelín paddings para que no se coma la pantalla */
        #card-modal-content {
            padding: 1.1rem !important;
        }

        /* La imagen no debe ser enorme en móvil */
        #card-image-frame {
            max-width: 220px;
            margin-left: auto;
            margin-right: auto;
        }

        /* El título no debe reventar */
        #card-name {
            font-size: 1.65rem !important;
            line-height: 1.15 !important;
        }
    }

/* ===========================
   FIN: WIKI
=========================== */

    .ts-wrapper {
        width: 100%;
        position: relative;
    }
    .ts-wrapper.single {
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: 0.75rem;
        background: rgba(2, 6, 23, 0.85);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        min-height: 2.35rem;
    }
    .ts-wrapper.single:hover {
        border-color: rgba(251, 146, 60, 0.45);
    }
    .ts-wrapper.single.focus {
        border-color: rgba(59, 130, 246, 0.9);
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4);
    }
    .ts-wrapper.single .ts-control,
    .ts-wrapper.single.input-active .ts-control,
    .ts-wrapper.single.has-items .ts-control,
    .ts-wrapper.single.dropdown-active .ts-control {
        background: transparent;
        border: 0;
        border-radius: 0.75rem;
        box-shadow: none;
        color: #f8fafc;
        padding: 0.42rem 0.62rem;
        min-height: 2.35rem;
    }
    .ts-wrapper.single .ts-control input {
        color: #f8fafc;
    }
    .ts-wrapper.single .ts-control > .item {
        color: #f8fafc;
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        background: transparent;
    }
    .ts-wrapper.single .ts-control > .item.active,
    .ts-wrapper.single .ts-control > .item:focus {
        color: #f8fafc;
        background: transparent;
    }
    .ts-wrapper.single .ts-control > .item + input::placeholder {
        color: #94a3b8;
        opacity: 1;
    }
    .ts-wrapper.single .ts-control:after {
        border-color: #cbd5e1 transparent transparent transparent;
        margin-top: 0;
        right: 0.75rem;
    }
    .ts-wrapper.single.dropdown-active .ts-control:after {
        border-color: transparent transparent #cbd5e1 transparent;
        margin-top: -5px;
    }
    .ts-wrapper.multi {
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: 0.75rem;
        background: rgba(2, 6, 23, 0.85);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        min-height: 2.35rem;
    }
    .ts-wrapper.multi:hover {
        border-color: rgba(251, 146, 60, 0.45);
    }
    .ts-wrapper.multi.focus {
        border-color: rgba(59, 130, 246, 0.9);
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4);
    }
    .ts-wrapper.multi .ts-control {
        background: transparent;
        border: 0;
        border-radius: 0.75rem;
        box-shadow: none;
        color: #f8fafc;
        padding: 0.37rem 0.62rem;
        min-height: 2.35rem;
        gap: 0.35rem;
    }
    .ts-wrapper.multi .ts-control input {
        color: #f8fafc;
        margin: 0;
    }
    .ts-wrapper.multi .ts-control input::placeholder {
        color: #94a3b8;
        opacity: 1;
    }
    .ts-wrapper.multi .ts-control > div {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin: 0.1rem 0;
        padding: 0.2rem 0.65rem 0.2rem 0.55rem;
        border-radius: 999px;
        background: linear-gradient(120deg, rgba(30, 41, 59, 0.9), rgba(51, 65, 85, 0.9));
        color: #e2e8f0;
        border: 1px solid rgba(148, 163, 184, 0.5);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(2, 6, 23, 0.5);
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        font-weight: 700;
        text-transform: uppercase;
    }
    .ts-wrapper.multi .ts-control > div.active {
        background: linear-gradient(120deg, rgba(249, 115, 22, 0.85), rgba(194, 65, 12, 0.9));
        border-color: rgba(251, 146, 60, 0.85);
        color: #fff7ed;
    }
    .ts-wrapper.plugin-remove_button .item .remove,
    .ts-wrapper.multi .ts-control > div .remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.2rem;
        height: 1.2rem;
        margin-left: 0.28rem;
        border-radius: 999px;
        border-left: 0;
        color: #fdba74;
        background: rgba(15, 23, 42, 0.7);
        font-size: 1.02rem;
        font-weight: 700;
        line-height: 1;
        overflow: hidden;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    .ts-wrapper.plugin-remove_button .item .remove:hover,
    .ts-wrapper.multi .ts-control > div .remove:hover {
        background: rgba(194, 65, 12, 0.8);
        color: #fff7ed;
    }
    .ts-wrapper .ts-dropdown,
    .ts-dropdown {
        margin-top: 0.3rem;
        background: linear-gradient(175deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
        color: #f8fafc;
        border: 1px solid rgba(148, 163, 184, 0.4);
        border-radius: 0.95rem;
        max-height: min(22rem, 55vh);
        overflow-y: auto;
        box-shadow: 0 18px 34px rgba(2, 6, 23, 0.62);
        z-index: 90;
    }
    .ts-wrapper .ts-dropdown-content,
    .ts-dropdown .ts-dropdown-content {
        padding: 0.3rem;
    }
    .ts-wrapper .ts-dropdown [data-selectable],
    .ts-dropdown [data-selectable] {
        padding: 0.52rem 0.78rem;
        border-radius: 0.55rem;
        font-size: 0.8rem;
        letter-spacing: 0.06em;
        font-weight: 600;
        text-transform: uppercase;
        transition: background-color 0.16s ease, color 0.16s ease;
    }
    .ts-wrapper .ts-dropdown .active,
    .ts-wrapper .ts-dropdown [data-selectable].active,
    .ts-dropdown .active,
    .ts-dropdown [data-selectable].active {
        background: rgba(249, 115, 22, 0.24);
        color: #fed7aa;
    }
    .ts-wrapper .ts-dropdown [data-selectable]:hover,
    .ts-dropdown [data-selectable]:hover {
        background: rgba(59, 130, 246, 0.2);
        color: #dbeafe;
    }