CSS improvements for arcomage.net. Make card bigger and nicer

arcomage-big-cards.js

// ==UserScript==
// @name         Big cards for arcomage.net
// @namespace    http://arcomage.net
// @version      0.2
// @description  edit some css to fit game on one screen on mobile phones and add draggable for cards
// @author       nik.parotikov@gmail.com
// @match        arcomage.net/?location=Game*
// @match        arcomage.net/?location=Deck*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=arcomage.net
// @grant        GM_addStyle
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @require      https://raw.githubusercontent.com/heyman/jquery-draggable-touch/master/jquery.draggableTouch.js
// ==/UserScript==

(function() {
    'use strict';
    var $ = window.jQuery;
    function GM_addStyle(css) {
        const style = document.getElementById("GM_addStyleBy8626") || (function() {
            const style = document.createElement('style');
            style.type = 'text/css';
            style.id = "GM_addStyleBy8626";
            document.head.appendChild(style);
            return style;
        })();
        const sheet = style.sheet;
        sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
    }
    GM_addStyle(".card { width: 129px; height: 225px; padding: 5px; transition: all .2s ease-in-out;}");
    GM_addStyle(".game__hand  .card:hover { z-index: 9999!important; transform:scale(1.3)!important }");
    // GM_addStyle(".game__hand  .card:not(:hover) { transform:scale(0.7)!important }");

    GM_addStyle(".card__image img { width: 95%; height: 100%; }");
    GM_addStyle(".card__effect { line-height: 12px; font-size: 12px; font-family:-webkit-pictograph; }");
    GM_addStyle(".card__header { position: relative; z-index: 3; }");
    // GM_addStyle(".card__image { position: relative; top: -15px; z-index: 2; }");
    GM_addStyle(".card__keywords { position: relative; top: -40px; z-index: 3; }");
    GM_addStyle(".card__title { background-color: transparent; border: none; font-size: 16px; margin-top:4px}");
    GM_addStyle(".flag-space { position: absolute; top:-20px; left:calc(50% - 12px);  }");
    GM_addStyle(".card-flag { position: absolute; top:0px; left:calc(50% - 30px);  }");
    GM_addStyle(".game__card-log { width: 146px;  }");
    GM_addStyle(".card__keywords { position: absolute; top: 84px; }");
    GM_addStyle(".card__keywords img { width: 12px;  }");
    GM_addStyle(".game__hand .card, .game__hand .hidden-card { margin: 0px; }");
    GM_addStyle(".hidden-card { width: 131px; height: 237px; }");
    $('.flag-space').each(function(index) {
        $(this).insertAfter($(this).siblings('div').first().find('.card').find('.card__header').find('.icon-rarity'));
    });
    $('.card-flag').each(function(index) {
        $(this).insertAfter($(this).siblings('div').first().find('.card').find('.card__header').find('.icon-rarity'));
    });
    $('.card__keywords').each(function(index) {
        $(this).insertAfter($(this).siblings('.card__image').first().find('img'));
    });
    var is_mobile = false;
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) & window.innerWidth > window.innerHeight) {
        console.log('лежа');
        is_mobile = true;
    }

    $('.my-hand').insertAfter($('.game__hand').not('.my-hand'));
    $('.game__hand').not('.my-hand').insertAfter('.game__board > .row:first');
    $('header').insertAfter('.game'); //blue menu
    $('.game__board > .row:first').insertAfter('.game__board');
    // $('.card__title').insertBefore('.icon-rarity');


    //собираем карты в красивую руку
    var left_offset = function (index) {
        return (index / 4 - 1) * 350;
    }
    var rotate_offset = function(index) {
        return (index / 4 - 1 ) * 40;
    }
    var top_offset = function(index) {
        return Math.abs((index / 4 - 1 )) * 40;
    }
    $('.my-hand').css('position','absolute').css('left','45%').css('bottom', '10px');
    $('.my-hand .card').each(function(index) {
        $(this).css('transform','rotate(' + rotate_offset(index) + 'deg)').css('position', 'absolute').css('left', left_offset(index) + 'px').css('top', top_offset(index) + 'px').css('z-index', '1');
    })

    //попытка вытащить прирост токенов наружу
    $('.token-list:first > .token-counter > .keyword-insignia').each(function(index) {
        var token = $(this).attr("alt");
        console.log(token);
        var text = $('img[alt="' + token+ '"]').data( 'original-title' );
        console.log(text + '123');
        // console.log('.my-hand > img[alt="' + token+ '"]');
    })



})();