
<!--

 ██████╗██████╗  █████╗ ███████╗████████╗██╗     ██╗███████╗████████╗██████╗ ██╗
██╔════╝██╔══██╗██╔══██╗██╔════╝╚══██╔══╝██║     ██║██╔════╝╚══██╔══╝██╔══██╗██║
██║     ██████╔╝███████║█████╗     ██║   ██║     ██║███████╗   ██║   ██████╔╝██║
██║     ██╔══██╗██╔══██║██╔══╝     ██║   ██║     ██║╚════██║   ██║   ██╔═══╝ ██║
╚██████╗██║  ██║██║  ██║██║        ██║   ███████╗██║███████║   ██║██╗██║     ███████╗
 ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝        ╚═╝   ╚══════╝╚═╝╚══════╝   ╚═╝╚═╝╚═╝     ╚══════╝

                                ██████╗ ██╗   ██╗
                                ██╔══██╗╚██╗ ██╔╝
                                ██████╔╝ ╚████╔╝
                                ██╔══██╗  ╚██╔╝
                                ██████╔╝   ██║
                                ╚═════╝    ╚═╝

                ██╗   ██╗███████╗██████╗  ██████╗  ██████╗ ███╗   ██╗
                ██║   ██║██╔════╝██╔══██╗██╔═══██╗██╔═══██╗████╗  ██║
                ██║   ██║█████╗  ██████╔╝██║   ██║██║   ██║██╔██╗ ██║
                ╚██╗ ██╔╝██╔══╝  ██╔══██╗██║   ██║██║   ██║██║╚██╗██║
                 ╚████╔╝ ███████╗██║  ██║╚██████╔╝╚██████╔╝██║ ╚████║
                  ╚═══╝  ╚══════╝╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═══╝

 ██╗██████╗  █████╗ ████████╗██████╗ ██╗   ██╗██╗  ██╗  ██████╗ ██╗   ██╗████████╗███████╗██╗     ██╗
██╔╝██╔══██╗██╔══██╗╚══██╔══╝██╔══██╗╚██╗ ██╔╝██║ ██╔╝  ██╔══██╗╚██╗ ██╔╝╚══██╔══╝██╔════╝██║     ╚██╗
██║ ██████╔╝███████║   ██║   ██████╔╝ ╚████╔╝ █████╔╝   ██████╔╝ ╚████╔╝    ██║   █████╗  ██║      ██║
██║ ██╔═══╝ ██╔══██║   ██║   ██╔══██╗  ╚██╔╝  ██╔═██╗   ██╔═══╝   ╚██╔╝     ██║   ██╔══╝  ██║      ██║
╚██╗██║     ██║  ██║   ██║   ██║  ██║   ██║   ██║  ██╗  ██║        ██║      ██║   ███████╗███████╗██╔╝
 ╚═╝╚═╝     ╚═╝  ╚═╝   ╚═╝   ╚═╝  ╚═╝   ╚═╝   ╚═╝  ╚═╝  ╚═╝        ╚═╝      ╚═╝   ╚══════╝╚══════╝╚═╝


-->
<!DOCTYPE html>
<html lang="pl" data-theme="dark">

<!--<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>CraftList.pl – Generator Rang Minecraft (Pixel Art)</title>
    <meta name="description" content="CraftList.pl – najlepsza lista serwerów Minecraft. Dodaj swój serwer, przeglądaj serwery SkyBlock, Survival i kreatywne. Znajdź najlepszy serwer dla siebie!">
    <meta name="keywords" content="generator rang minecraft, pixel art, itemsadder, rank generator, craftlist, minecraft rangi">
    <meta name="google-adsense-account" content="ca-pub-7176552154318713">
    <base href="/" />


    <link rel="icon" type="image/png" href="/assets/img/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/assets/img/favicon/favicon.svg" />
    <link rel="shortcut icon" href="/assets/img/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="Craftlist.pl" />
    <link rel="manifest" href="/assets/img/favicon/site.webmanifest" />


    <link href="https://fonts.googleapis.com" rel="preconnect">
    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">


    <link href="/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="/assets/vendor/aos/aos.css" rel="stylesheet">
    <link href="/assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="/assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">


    <link href="/assets/css/main.css?v=12" rel="stylesheet">

</head>-->

<!DOCTYPE html>
<html lang="pl" data-theme="dark">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>CraftList.pl – Generator Rang Minecraft (Pixel Art)</title>
    <meta name="description" content="CraftList.pl – najlepsza lista serwerów Minecraft. Dodaj swój serwer, przeglądaj serwery SkyBlock, Survival i kreatywne. Znajdź najlepszy serwer dla siebie!">
    <meta name="keywords" content="generator rang minecraft, pixel art, itemsadder, rank generator, craftlist, minecraft rangi">
    <meta name="google-adsense-account" content="ca-pub-7176552154318713">

    <!-- Open Graph -->
    <meta property="og:title" content="CraftList.pl – Generator Rang Minecraft (Pixel Art)">
    <meta property="og:description" content="CraftList.pl – najlepsza lista serwerów Minecraft.">
    <meta property="og:type" content="website">
    
    <base href="/" />

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="/assets/img/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/assets/img/favicon/favicon.svg" />
    <link rel="shortcut icon" href="/assets/img/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="Craftlist.pl" />
    <link rel="manifest" href="/assets/img/favicon/site.webmanifest" />

    <!-- Preload krytycznych CSS -->
    <link rel="preload" href="/assets/vendor/bootstrap/css/bootstrap.min.css" as="style">
    <link rel="preload" href="/assets/css/main.css?v=215" as="style">

    <!-- Fonts (asynchronicznie) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Montserrat:wght@400;500;700&family=Poppins:wght@400;500;700&display=swap"
        rel="stylesheet"
        media="print"
        onload="this.media='all'">
    <noscript>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Montserrat:wght@400;500;700&family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
    </noscript>

    <!-- Vendor CSS (ładuj async/prioritize) -->
    <link href="/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" media="print" onload="this.media='all'">
    <link href="/assets/vendor/aos/aos.css" rel="stylesheet" media="print" onload="this.media='all'">
    <link href="/assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet" media="print" onload="this.media='all'">
    <link href="/assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" media="print" onload="this.media='all'">

    <!-- Main CSS -->
    <link href="/assets/css/main.css?v=215" rel="stylesheet">
</head><body class="index-page">

    <amp-auto-ads type="adsense"
        data-ad-client="ca-pub-7176552154318713">
    </amp-auto-ads>

    <header id="header" class="header fixed-top backdrop-blur"><!-- End Top Bar -->

        <div class="branding d-flex align-items-cente backdrop-blur">

            <div class="container position-relative d-flex align-items-center justify-content-between">
                <a href="glowna" class="logo d-flex align-items-center">
                    <!-- Uncomment the line below if you also wish to use an image logo -->
                    <!-- <img src="assets/img/logo.png" alt=""> -->
                    <h1 class="sitename">Craft<span>List</span>.pl</h1>
                </a>

                <nav id="navmenu" class="navmenu">
    <ul>
        <li><a href="/glowna">Strona Główna<br></a></li>
        <!--<li><a href="#SerweryPremium">Premium serwery</a></li>
        <li><a href="/serwer_szukaj">Szukaj serwera</a></li>
        <li><a href="/serwer_losuj" class="gradient-blink">Losuj serwer</a></li>
        <li><a href="/serwer_dodaj">Dodaj serwer</a></li>-->
        <li class="dropdown"><a href="#" class="no-link"><span>Serwery</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
            <ul>
                <li><a href="/serwer_szukaj">Szukaj serwera</a></li>
                <li><a href="/serwer_losuj" class="gradient-blink-dark">Losuj serwer</a></li>
                <li><a href="/serwer_dodaj">Dodaj serwer</a></li>
            </ul>
        </li>
        <li class="dropdown"><a href="#" class="no-link"><span>Skrypty</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
            <ul>
                <li><a href="/gen-rang">Generator rang</a></li>
                <li><a href="/reg-raport">Sprawdzanie logów serwera</a></li>
            </ul>

        </li>
        <li><a href="https://craftlist.pl/blog">Blog</a></li>
        <li><a href="https://craftlist.pl/faq">FAQ</a></li>
        <!--<li class="dropdown"><a href="#"><span>Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
            <ul>
                <li><a href="#">Dropdown 1</a></li>
                <li class="dropdown"><a href="#"><span>Deep Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
                    <ul>
                        <li><a href="#">Deep Dropdown 1</a></li>
                        <li><a href="#">Deep Dropdown 2</a></li>
                        <li><a href="#">Deep Dropdown 3</a></li>
                        <li><a href="#">Deep Dropdown 4</a></li>
                        <li><a href="#">Deep Dropdown 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Dropdown 2</a></li>
                <li><a href="#">Dropdown 3</a></li>
                <li><a href="#">Dropdown 4</a></li>
            </ul>
        </li>-->


                    <li class="dropdown"><a href="#" class="no-link"><span>Zaloguj się!</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
                <ul>
                    <li><a href="https://craftlist.pl/logowanie">Discord</a></li>
                    <!--<li><a href="#">Zaloguj się - Strona</a></li>
                <li><a href="#">Zarejestruj się - Strona</a></li>-->
                </ul>
            </li>
                <li><a href="https://discord.gg/tsBn4yxYx3"><button type="button" class="btn btn-primary position-relative" style="font-family: 'Roboto';padding: 9px 13px 9px 9px;">
                    <i class="bi bi-discord"></i>
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                        297                        <span class="visually-hidden">Ilość osób online</span>
                    </span>
                </button></a></li>
    </ul>

    <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>
            </div>

        </div>

    </header>

    <main class="main">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>

<!-- Pixel / Minecraft fonts – lista fontów ładowana automatycznie z tabeli FONT_CONFIG (patrz <script> na dole) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<style>
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; }
details[open] > summary .toggle-icon { transform: rotate(90deg); }
.toggle-icon { transition: transform .2s; display: inline-block; }
.ctrl-group { background: rgba(255,255,255,.03); border: 1px solid #2a2a4a; border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
#tagCanvas { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── Styl bazowy (karty presetów) ──────────────────────────────── */
.style-card { cursor:pointer; border:2px solid #2a2a4a; border-radius:12px; padding:14px 10px;
    background:#12122a; transition:.18s; text-align:center; }
.style-card:hover { border-color:#4b6bff; transform:translateY(-2px); }
.style-card.active { border-color:#4b6bff; box-shadow:0 0 0 3px rgba(75,107,255,.25); background:#161636; }
.style-card .sc-title { font-weight:700; font-size:13px; color:#eef; margin-top:8px; }
.style-card .sc-sub { font-size:10px; color:#8a8ab0; }
.style-card canvas { image-rendering:pixelated; max-width:100%; height:44px; }

/* ── Grid picker (emoji + itemy) ───────────────────────────────── */
.picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:6px;
    max-height:320px; overflow-y:auto; padding:4px; }
.picker-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    background:#161636; border:1px solid #262650; border-radius:8px; cursor:pointer;
    font-size:22px; transition:.12s; }
.picker-cell:hover { background:#23234f; border-color:#4b6bff; transform:scale(1.08); }
.picker-cell img { width:80%; height:80%; image-rendering:pixelated; }
.picker-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.picker-tab { font-size:11px; padding:4px 10px; border-radius:20px; cursor:pointer;
    background:#161636; border:1px solid #262650; color:#aab; }
.picker-tab.active { background:#4b6bff; border-color:#4b6bff; color:#fff; }

/* ── Paint Studio ──────────────────────────────────────────────── */
.paint-toolbar { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.paint-tool { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px;
    background:#12122a; border:1px solid #262650; border-radius:8px; cursor:pointer; color:#aab;
    font-size:9px; transition:.12s; }
.paint-tool:hover { background:#1c1c40; color:#fff; }
.paint-tool.active { background:#e03b5a; border-color:#e03b5a; color:#fff; }
.paint-tool i { font-size:16px; }
#paintCanvas { image-rendering:pixelated; background:
    repeating-conic-gradient(#20203c 0% 25%, #16162c 0% 50%) 0 0 / 24px 24px;
    border:1px solid #30306a; border-radius:6px; cursor:crosshair; touch-action:none; }
.swatch { width:26px; height:26px; border-radius:6px; border:2px solid #2a2a4a; cursor:pointer; }
.swatch.active { border-color:#fff; box-shadow:0 0 0 2px #4b6bff; }
</style>

<section id="generator-rang" class="hero contact section">

    <div class="container section-title" data-aos="fade-up">
        <h2>Generator Rang Minecraft</h2>
        <p>Pixel Art rangi dla twojego serwera + automatyczny config ItemsAdder</p>
    </div>

    <div class="container pb-5" data-aos="fade-up" data-aos-delay="100">
        <div class="row gy-4 mb-4">

            <!-- ══ LEWA: Konfiguracja ══════════════════════════════════════════ -->
            <div class="col-lg-6">
                <div class="php-email-form h-100" style="padding:24px;">
                    <h5 class="mb-4 text-light"><i class="bi bi-sliders me-2"></i>Konfiguracja rangi</h5>

                    <!-- Nazwa -->
                    <div class="mb-3">
                        <label class="form-label">Nazwa rangi</label>
                        <input type="text" id="textInput" class="form-control"
                               placeholder="np. VIP, ADMIN, MOD" value="VIP"
                               maxlength="20" autocomplete="off">
                    </div>

                    <!-- Styl bazowy – szybkie presety wyglądu -->
                    <div class="mb-4">
                        <label class="form-label">Styl bazowy</label>
                        <div class="row g-2" id="styleCards">
                            <div class="col-4">
                                <div class="style-card active" data-style="classic">
                                    <canvas width="120" height="44" data-style-preview="classic"></canvas>
                                    <div class="sc-title">Classic Box</div>
                                    <div class="sc-sub">Gradient + pixel border</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="style-card" data-style="pixel">
                                    <canvas width="120" height="44" data-style-preview="pixel"></canvas>
                                    <div class="sc-title">Pixel Art</div>
                                    <div class="sc-sub">Neon glitch pixel</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="style-card" data-style="pill">
                                    <canvas width="120" height="44" data-style-preview="pill"></canvas>
                                    <div class="sc-title">Modern Pill</div>
                                    <div class="sc-sub">Zaokrąglone, czyste</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ── Styl tekstu ────────────────────────────────────── -->
                    <details class="mb-2">
                        <summary class="fw-bold text-light mb-3" style="cursor:pointer;user-select:none;">
                            <i class="bi bi-type me-2"></i>Styl tekstu
                            <i class="bi bi-chevron-right toggle-icon ms-1" style="font-size:11px;"></i>
                        </summary>
                        <div class="ctrl-group">
                            <!-- Czcionka -->
                            <div class="mb-3">
                                <label class="form-label">Czcionka</label>
                                <select id="fontSelect" class="form-select">
                                    <!-- Opcje generowane automatycznie z tabeli FONT_CONFIG -->
                                </select>
                                <small class="text-muted d-block mt-1">Wszystkie w stylu Minecraft / pixel art</small>

                                <!-- Zaawansowane ustawienia fontu (nadpisanie FONT_CONFIG) -->
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="checkbox" id="fontAdvEnabled">
                                    <label class="form-check-label small" for="fontAdvEnabled">Dostosuj ustawienia fontu</label>
                                </div>
                                <div id="fontAdvControls" class="mt-2" style="display:none;">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="advPixelEnabled">
                                        <label class="form-check-label small" for="advPixelEnabled">Pixelizacja (quantize)</label>
                                    </div>
                                    <div class="mb-2" id="advQuantizeRow">
                                        <label class="form-label small d-flex justify-content-between">
                                            <span>Próg pixelizacji</span>
                                            <span class="text-muted" id="advQuantizeVal">80</span>
                                        </label>
                                        <input type="range" id="advQuantizeRange" class="form-range" min="1" max="255" value="80">
                                    </div>
                                    <div class="row">
                                        <div class="col-6 mb-2">
                                            <label class="form-label small d-flex justify-content-between">
                                                <span>Rozmiar (size)</span>
                                                <span class="text-muted" id="advSizeVal">18 px</span>
                                            </label>
                                            <input type="range" id="advSizeRange" class="form-range" min="6" max="48" value="18">
                                        </div>
                                        <div class="col-6 mb-2">
                                            <label class="form-label small">Grubość (weight)</label>
                                            <select id="advWeightSelect" class="form-select form-select-sm">
                                                <option value="400">Normal (400)</option>
                                                <option value="700">Bold (700)</option>
                                            </select>
                                        </div>
                                        <div class="col-6 mb-2">
                                            <label class="form-label small d-flex justify-content-between">
                                                <span></span>Odstęp liter</span>
                                                <span class="text-muted" id="advLetterSpVal">0 px</span>
                                            </label>
                                            <input type="range" id="advLetterSpRange" class="form-range" min="-5" max="10" value="0">
                                        </div>
                                        <div class="col-6 mb-2">
                                            <label class="form-label small d-flex justify-content-between">
                                                <span>Baseline (pion)</span>
                                                <span class="text-muted" id="advBaselineVal">0 px</span>
                                            </label>
                                            <input type="range" id="advBaselineRange" class="form-range" min="-10" max="10" value="0">
                                        </div>
                                        <div class="col-6 mb-2">
                                            <label class="form-label small d-flex justify-content-between">
                                                <span>Margines L</span>
                                                <span class="text-muted" id="advPadLVal">0 px</span>
                                            </label>
                                            <input type="range" id="advPadLRange" class="form-range" min="0" max="30" value="0">
                                        </div>
                                        <div class="col-6 mb-2">
                                            <label class="form-label small d-flex justify-content-between">
                                                <span>Margines R</span>
                                                <span class="text-muted" id="advPadRVal">0 px</span>
                                            </label>
                                            <input type="range" id="advPadRRange" class="form-range" min="0" max="30" value="0">
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="advResetBtn">
                                        <i class="bi bi-arrow-counterclockwise me-1"></i>Przywróć domyślne
                                    </button>
                                </div>
                            </div>
                            <!-- Kolory tekstu -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label">Kolor (od)</label>
                                    <input type="color" id="textColorStart" class="form-control form-control-color w-100" value="#ffffff">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label">Kolor (do)</label>
                                    <input type="color" id="textColorEnd" class="form-control form-control-color w-100" value="#c2c2c2">
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" id="noTextGradient" checked>
                                        <label class="form-check-label small" for="noTextGradient">Jednolity kolor</label>
                                    </div>
                                </div>
                            </div>
                            <!-- Kierunek gradientu tekstu -->
                            <div class="mb-3" id="txtGradDirRow">
                                <label class="form-label small">Kierunek gradientu tekstu</label>
                                <div class="d-flex gap-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="txtGradDir" id="txtGradH" value="h" checked>
                                        <label class="form-check-label small" for="txtGradH">→ Poziomo</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="txtGradDir" id="txtGradV" value="v">
                                        <label class="form-check-label small" for="txtGradV">↓ Pionowo</label>
                                    </div>
                                </div>
                            </div>
                            <!-- Obramówka tekstu -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Obramówka</span>
                                        <span class="text-muted small" id="txtOutVal">0 px</span>
                                    </label>
                                    <input type="range" id="txtOutRange" class="form-range" min="0" max="2" value="0">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label">Kolor obramówki</label>
                                    <input type="color" id="txtOutColor" class="form-control form-control-color w-100" value="#000000">
                                </div>
                            </div>
                            <!-- Cień tekstu -->
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="txtShdEnabled">
                                <label class="form-check-label small fw-bold" for="txtShdEnabled">Cień tekstu</label>
                            </div>
                            <div id="txtShdControls" style="display:none;">
                                <div class="row">
                                    <div class="col-4 mb-2">
                                        <label class="form-label d-flex justify-content-between">
                                            <span class="small">Offset X</span>
                                            <span class="text-muted small" id="txtShdXVal">2</span>
                                        </label>
                                        <input type="range" id="txtShdX" class="form-range" min="-4" max="4" value="1">
                                    </div>
                                    <div class="col-4 mb-2">
                                        <label class="form-label d-flex justify-content-between">
                                            <span class="small">Offset Y</span>
                                            <span class="text-muted small" id="txtShdYVal">2</span>
                                        </label>
                                        <input type="range" id="txtShdY" class="form-range" min="-4" max="4" value="1">
                                    </div>
                                    <div class="col-4 mb-2">
                                        <label class="form-label small">Kolor</label>
                                        <input type="color" id="txtShdColor" class="form-control form-control-color w-100" value="#000000">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </details>

                    <!-- ── Styl tła ───────────────────────────────────────── -->
                    <details class="mb-2">
                        <summary class="fw-bold text-light mb-3" style="cursor:pointer;user-select:none;">
                            <i class="bi bi-square-fill me-2"></i>Styl tła
                            <i class="bi bi-chevron-right toggle-icon ms-1" style="font-size:11px;"></i>
                        </summary>
                        <div class="ctrl-group">
                            <!-- Kolory tła -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label">Tło (od)</label>
                                    <input type="color" id="bgColorStart" class="form-control form-control-color w-100" value="#424b8f">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label">Tło (do)</label>
                                    <input type="color" id="bgColorEnd" class="form-control form-control-color w-100" value="#333d84">
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" id="noBgGradient">
                                        <label class="form-check-label small" for="noBgGradient">Jednolite tło</label>
                                    </div>
                                </div>
                            </div>
                            <!-- Kierunek gradientu tła -->
                            <div class="mb-3">
                                <label class="form-label small">Kierunek gradientu tła</label>
                                <div class="d-flex gap-3 flex-wrap">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="bgGradDir" id="bgGradH" value="h" checked>
                                        <label class="form-check-label small" for="bgGradH">→ Poziomo</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="bgGradDir" id="bgGradV" value="v">
                                        <label class="form-check-label small" for="bgGradV">↓ Pionowo</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="bgGradDir" id="bgGradD" value="d">
                                        <label class="form-check-label small" for="bgGradD">↘ Ukośnie</label>
                                    </div>
                                </div>
                            </div>
                            <!-- Padding -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Padding poziomy</span>
                                        <span class="text-muted small" id="padHVal">10 px</span>
                                    </label>
                                    <input type="range" id="padHRange" class="form-range" min="1" max="10" value="3">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Padding pionowy</span>
                                        <span class="text-muted small" id="padVVal">6 px</span>
                                    </label>
                                    <input type="range" id="padVRange" class="form-range" min="0" max="6" value="2">
                                </div>
                            </div>
                            <!-- Zaokrąglenie -->
                            <div class="mb-3">
                                <label class="form-label d-flex justify-content-between">
                                    <span>Zaokrąglenie rogów</span>
                                    <span class="text-muted small" id="radiusVal">0 px</span>
                                </label>
                                <input type="range" id="radiusRange" class="form-range" min="0" max="4" value="0">
                                <small class="text-muted">0 = pixel-perfect kwadratowe narożniki</small>
                            </div>
                            <!-- Obramówka tła -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Obramówka</span>
                                        <span class="text-muted small" id="bgOutVal">2 px</span>
                                    </label>
                                    <input type="range" id="bgOutRange" class="form-range" min="0" max="3" value="1">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label">Kolor obramówki</label>
                                    <input type="color" id="bgOutColor" class="form-control form-control-color w-100" value="#252c5f">
                                </div>
                            </div>
                            <!-- Cień tła -->
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="bgShdEnabled" checked>
                                <label class="form-check-label small fw-bold" for="bgShdEnabled">Cień tła</label>
                            </div>
                            <div id="bgShdControls">
                                <div class="row">
                                    <div class="col-4 mb-2">
                                        <label class="form-label d-flex justify-content-between">
                                            <span class="small">Offset X</span>
                                            <span class="text-muted small" id="bgShdXVal">3</span>
                                        </label>
                                        <input type="range" id="bgShdX" class="form-range" min="-5" max="5" value="2">
                                    </div>
                                    <div class="col-4 mb-2">
                                        <label class="form-label d-flex justify-content-between">
                                            <span class="small">Offset Y</span>
                                            <span class="text-muted small" id="bgShdYVal">3</span>
                                        </label>
                                        <input type="range" id="bgShdY" class="form-range" min="-5" max="5" value="2">
                                    </div>
                                    <div class="col-4 mb-2">
                                        <label class="form-label small">Kolor</label>
                                        <input type="color" id="bgShdColor" class="form-control form-control-color w-100" value="#000000">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </details>

                    <!-- ── Ikona ──────────────────────────────────────────── -->
                    <details class="mb-2">
                        <summary class="fw-bold text-light mb-3" style="cursor:pointer;user-select:none;">
                            <i class="bi bi-emoji-smile me-2"></i>Ikona
                            <i class="bi bi-chevron-right toggle-icon ms-1" style="font-size:11px;"></i>
                        </summary>
                        <div class="ctrl-group">
                            <!-- Szybkie źródła ikony -->
                            <div class="d-flex gap-2 flex-wrap mb-3">
                                <button type="button" class="btn btn-sm btn-outline-info flex-fill" id="openEmojiPicker">
                                    <i class="bi bi-emoji-smile me-1"></i>Emoji
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-warning flex-fill" id="openItemPicker">
                                    <i class="bi bi-box-seam me-1"></i>Przedmioty MC
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger flex-fill" id="openPaintStudio">
                                    <i class="bi bi-brush me-1"></i>Paint Studio
                                </button>
                            </div>
                            <div class="d-flex align-items-center gap-2 mb-3 p-2 rounded" style="background:#12122a;border:1px solid #262650;">
                                <span class="small text-muted">Wybrana ikona:</span>
                                <span id="iconPreviewChip" style="min-width:28px;min-height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;background:#0d0d1a;border-radius:6px;padding:2px 6px;">—</span>
                                <span class="small text-light flex-grow-1" id="iconPreviewName">Brak</span>
                                <button type="button" class="btn btn-sm btn-outline-secondary" id="iconClearBtn"><i class="bi bi-x"></i></button>
                            </div>
                            <div class="row">
                                <div class="col-6 mb-3" style="display:none;">
                                    <label class="form-label">Emoji</label>
                                    <select id="iconSelect" class="form-select">
                                        <option value="">— Brak —</option>
                                        <optgroup label="Władza / Tytuły">
                                            <option value="👑">👑 Korona</option>
                                            <option value="🛡️">🛡️ Tarcza</option>
                                            <option value="⚔️">⚔️ Miecze</option>
                                            <option value="⚡">⚡ Błyskawica</option>
                                            <option value="🗡️">🗡️ Sztylet</option>
                                            <option value="🏹">🏹 Łuk</option>
                                            <option value="🪓">🪓 Topór</option>
                                            <option value="⚙️">⚙️ Trybik</option>
                                            <option value="🔮">🔮 Kryształ</option>
                                            <option value="🪄">🪄 Różdżka</option>
                                        </optgroup>
                                        <optgroup label="Nagrody">
                                            <option value="💎">💎 Diament</option>
                                            <option value="⭐">⭐ Gwiazda</option>
                                            <option value="🏆">🏆 Puchar</option>
                                            <option value="🥇">🥇 Złoto</option>
                                            <option value="🥈">🥈 Srebro</option>
                                            <option value="🥉">🥉 Brąz</option>
                                            <option value="🔥">🔥 Ogień</option>
                                            <option value="🎯">🎯 Cel</option>
                                        </optgroup>
                                        <optgroup label="Natura / Żywioły">
                                            <option value="❄️">❄️ Lód</option>
                                            <option value="🌙">🌙 Księżyc</option>
                                            <option value="☀️">☀️ Słońce</option>
                                            <option value="🌌">🌌 Galaktyka</option>
                                            <option value="🐉">🐉 Smok</option>
                                            <option value="🦅">🦅 Orzeł</option>
                                            <option value="🐺">🐺 Wilk</option>
                                            <option value="🦊">🦊 Lis</option>
                                            <option value="☠️">☠️ Czaszka</option>
                                            <option value="🧛">🧛 Wampir</option>
                                        </optgroup>
                                        <optgroup label="Minecraft">
                                            <option value="⛏️">⛏️ Kilof</option>
                                            <option value="📜">📜 Pergamin</option>
                                            <option value="🏰">🏰 Zamek</option>
                                            <option value="🌋">🌋 Wulkan</option>
                                            <option value="🍀">🍀 Koniczyna</option>
                                            <option value="🍄">🍄 Grzyb</option>
                                        </optgroup>
                                    </select>
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label">Własny obrazek</label>
                                    <input type="file" id="uploadImage" class="form-control"
                                           accept="image/png,image/webp,image/jpeg">
                                    <div class="d-flex gap-2 mt-2 align-items-center">
                                        <button id="clearImageBtn" class="btn btn-sm btn-outline-danger">
                                            <i class="bi bi-x me-1"></i>Usuń
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <!-- Pozycja ikony -->
                            <div class="mb-3">
                                <label class="form-label small">Pozycja ikony</label>
                                <div class="d-flex gap-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="iconPos" id="iconPosL" value="left" checked>
                                        <label class="form-check-label small" for="iconPosL">⬅ Przed tekstem (lewo)</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="iconPos" id="iconPosR" value="right">
                                        <label class="form-check-label small" for="iconPosR">Za tekstem (prawo) ➡</label>
                                    </div>
                                </div>
                            </div>
                            <!-- Rozmiar + odstęp ikony -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Rozmiar ikony</span>
                                        <span class="text-muted small" id="iconSizeVal">100%</span>
                                    </label>
                                    <input type="range" id="iconSizeRange" class="form-range" min="50" max="200" value="100">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Odstęp od tekstu</span>
                                        <span class="text-muted small" id="iconGapVal">2 px</span>
                                    </label>
                                    <input type="range" id="iconGapRange" class="form-range" min="0" max="12" value="2">
                                </div>
                            </div>
                            <!-- Przesunięcie ikony X/Y -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Przesunięcie X</span>
                                        <span class="text-muted small" id="iconOffXVal">0</span>
                                    </label>
                                    <input type="range" id="iconOffXRange" class="form-range" min="-8" max="8" value="0">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Przesunięcie Y</span>
                                        <span class="text-muted small" id="iconOffYVal">0</span>
                                    </label>
                                    <input type="range" id="iconOffYRange" class="form-range" min="-8" max="8" value="0">
                                </div>
                            </div>
                            <small class="text-muted d-block mt-1">
                                <i class="bi bi-info-circle me-1"></i>
                                Własny obrazek zastępuje emoji. Ikona jest renderowana ostro.
                            </small>
                        </div>
                    </details>

                    <hr class="my-3">

                    <!-- Presety -->
                    <label class="form-label fw-bold">Presety <small class="text-muted fw-normal">(localStorage)</small></label>
                    <div class="d-flex gap-2 flex-wrap align-items-center">
                        <input type="text" id="presetName" class="form-control"
                               style="max-width:160px;" placeholder="Nazwa presetu" autocomplete="off">
                        <button class="btn btn-sm btn-success" id="savePresetBtn">
                            <i class="bi bi-floppy me-1"></i>Zapisz
                        </button>
                        <button class="btn btn-sm btn-outline-info" id="loadPresetsBtn">
                            <i class="bi bi-folder2-open me-1"></i>Moje presety
                        </button>
                    </div>
                </div>
            </div>

            <!-- ══ PRAWA: Podgląd + ItemsAdder ════════════════════════════════ -->
            <div class="col-lg-6" style="position:sticky;top:80px;align-self:start;">
                <div class="d-flex flex-column gap-4">

                <!-- Podgląd -->
                <div class="php-email-form" style="padding:24px;">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="d-flex align-items-center gap-2">
                            <h5 class="mb-0 text-light"><i class="bi bi-eye me-2"></i>Podgląd</h5>
                            <span id="fontsLoadStatus" class="badge bg-warning text-dark" style="font-size:10px;">
                                <i class="bi bi-hourglass-split me-1"></i>Ładowanie fontów...
                            </span>
                        </div>
                        <small id="pngSizeInfo" class="text-muted" style="font-family:monospace;"></small>
                    </div>
                    <!-- Szachownica = tło transparencji -->
                    <div id="previewStage" class="d-flex justify-content-center align-items-center rounded mb-2"
                         style="min-height:80px; overflow:auto;
                                background: repeating-conic-gradient(#1c1c38 0% 25%, #111128 0% 50%)
                                            0 0 / 16px 16px;
                                padding:20px;">
                        <canvas id="tagCanvas" style="max-width:100%; display:block;"></canvas>
                    </div>
                    <!-- Sterowanie podglądem: zoom + tło -->
                    <div class="d-flex align-items-center gap-2 flex-wrap mb-3">
                        <div class="d-flex align-items-center gap-1 flex-grow-1" style="min-width:160px;">
                            <i class="bi bi-zoom-in text-muted"></i>
                            <input type="range" id="zoomRange" class="form-range flex-grow-1" min="2" max="14" value="5">
                            <span class="text-muted small text-nowrap" id="zoomVal" style="min-width:34px;">5×</span>
                        </div>
                        <div class="btn-group btn-group-sm" role="group" aria-label="Tło podglądu">
                            <button type="button" class="btn btn-outline-secondary active" data-preview-bg="checker" title="Szachownica">
                                <i class="bi bi-grid-3x3"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-preview-bg="dark" title="Ciemne">
                                <i class="bi bi-moon-fill"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" data-preview-bg="light" title="Jasne">
                                <i class="bi bi-sun-fill"></i>
                            </button>
                        </div>
                    </div>
                    <!-- Rendery – podgląd rangi w realnych miejscach Minecrafta -->
                    <div class="mb-3">
                        <div class="picker-tabs" id="renderTabs">
                            <span class="picker-tab active" data-render="chat">💬 Czat</span>
                            <span class="picker-tab" data-render="tab">📋 TAB lista</span>
                            <span class="picker-tab" data-render="lore">📜 Lore przedmiotu</span>
                            <span class="picker-tab" data-render="npc">🧍 NPC / Hologram</span>
                        </div>

                        <!-- Czat -->
                        <div class="render-pane" data-render-pane="chat"
                             style="background:#1a1a1a;border:1px solid #333;border-radius:6px;padding:8px 12px;
                                    font-family:'Courier New',monospace;font-size:13px;line-height:2;">
                            <div class="text-muted mb-1" style="font-size:10px;letter-spacing:.5px;text-transform:uppercase;">W Minecraft (czat):</div>
                            <div style="color:#aaa;">
                                <img class="rankImg" alt="" style="image-rendering:pixelated;height:18px;vertical-align:middle;margin-right:3px;">
                                <span style="color:#ddd;">Gracz</span><span style="color:#aaa;">: Cześć wszystkim!</span>
                            </div>
                        </div>

                        <!-- TAB lista -->
                        <div class="render-pane" data-render-pane="tab" style="display:none;">
                            <div style="background:linear-gradient(#0b0b16cc,#0b0b16cc),repeating-linear-gradient(45deg,#3a3a3a,#3a3a3a 2px,#333 2px,#333 4px);
                                        border-radius:6px;padding:10px;font-family:'Courier New',monospace;font-size:12px;line-height:1.9;">
                                <div class="text-center mb-1" style="color:#ffd34d;font-weight:700;">Gracze online (7)</div>
                                <div style="color:#ddd;"><img class="rankImg" style="image-rendering:pixelated;height:16px;vertical-align:middle;margin-right:4px;"> Notch</div>
                                <div style="color:#ddd;"><img class="rankImg" style="image-rendering:pixelated;height:16px;vertical-align:middle;margin-right:4px;"> Jeb_</div>
                                <div style="color:#ddd;"><img class="rankImg" style="image-rendering:pixelated;height:16px;vertical-align:middle;margin-right:4px;"> Steve_The_Gamer</div>
                                <div style="color:#ddd;"><img class="rankImg" style="image-rendering:pixelated;height:16px;vertical-align:middle;margin-right:4px;"> SkyBlockPro</div>
                            </div>
                        </div>

                        <!-- Lore przedmiotu -->
                        <div class="render-pane" data-render-pane="lore" style="display:none;">
                            <div style="background:#1a0a1e;border:1px solid #3a1a44;border-radius:6px;padding:12px;
                                        font-family:'Courier New',monospace;font-size:13px;line-height:1.8;">
                                <div style="margin-bottom:4px;"><img class="rankImg" style="image-rendering:pixelated;height:18px;vertical-align:middle;margin-right:4px;"><span style="color:#5ff;">Legendarny Miecz</span></div>
                                <div style="color:#5a5;">Ostrość V</div>
                                <div style="color:#5a5;">Nienaruszalność III</div>
                                <div style="color:#888;">minecraft:netherite_sword</div>
                            </div>
                        </div>

                        <!-- NPC / Hologram -->
                        <div class="render-pane" data-render-pane="npc" style="display:none;">
                            <div style="background:radial-gradient(circle at 50% 30%,#2a3a1a,#0d1206);border:1px solid #33421a;
                                        border-radius:6px;padding:18px;text-align:center;">
                                <div style="display:inline-block;background:#00000066;padding:4px 10px;border-radius:4px;">
                                    <img class="rankImg" style="image-rendering:pixelated;height:22px;vertical-align:middle;">
                                </div>
                                <div style="color:#cfe;font-family:'Courier New',monospace;font-size:11px;margin-top:8px;">▲ Hologram nad NPC / na skrzynce</div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex gap-2 flex-wrap">
                        <button onclick="downloadCurrentPNG()" class="btn btn-primary btn-sm">
                            <i class="bi bi-download me-1"></i>Pobierz PNG
                        </button>
                        <button onclick="addToProject()" class="btn btn-success btn-sm">
                            <i class="bi bi-plus-circle me-1"></i>Dodaj do projektu
                        </button>
                        <button onclick="resetAll()" class="btn btn-outline-secondary btn-sm ms-auto">
                            <i class="bi bi-arrow-counterclockwise me-1"></i>Reset
                        </button>
                    </div>
                </div>

                <!-- ItemsAdder config -->
                <div class="php-email-form" style="padding:24px;">
                    <h5 class="mb-3 text-light">
                        <i class="bi bi-code-slash me-2"></i>Przykładowy Config ItemsAdder'a
                        <br><code>Cały config znajdziesz w RAR, gdy pobierzesz cały projekt</code>
                    </h5>
                    <div class="mb-2">
                        <label class="form-label small">Namespace serwera</label>
                        <input type="text" id="iaNamespace" class="form-control form-control-sm"
                               value="my_server" placeholder="np. my_server" autocomplete="off">
                        <small class="text-muted">Folder w <code>plugins/ItemsAdder/contents/</code></small>
                    </div>
                    <div class="position-relative mb-2">
                        <pre id="iaConfigOutput" class="rounded p-3 mb-0"
                             style="background:#0d1117;color:#79c0ff;max-height:220px;overflow-y:auto;
                                    border:1px solid #30363d;font-size:11px;line-height:1.65;
                                    font-family:'Courier New',monospace;white-space:pre;"></pre>
                        <button class="btn btn-sm btn-outline-light position-absolute"
                                style="top:8px;right:8px;opacity:.75;"
                                onclick="copyIAConfig()" title="Kopiuj YAML">
                            <i class="bi bi-clipboard"></i>
                        </button>
                    </div>
                    <div class="p-2 rounded d-flex align-items-center gap-2 flex-wrap"
                         style="background:#161b22;border:1px solid #30363d;font-size:12px;">
                        <strong class="text-light text-nowrap">LuckPerms:</strong>
                        <code id="iaLpCmd" class="text-warning" style="word-break:break-all;flex:1;"></code>
                        <button class="btn btn-sm btn-outline-secondary flex-shrink-0"
                                style="font-size:10px;padding:2px 8px;" onclick="copyLPCmd()">
                            <i class="bi bi-clipboard me-1"></i>Kopiuj
                        </button>
                    </div>
                </div>
            </div><!-- /sticky wrapper -->
            </div>
        </div>

        <!-- ══ Projekt ════════════════════════════════════════════════════════ -->
        <div class="row">
            <div class="col-12">
                <div class="php-email-form" style="padding:24px;">
                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                        <h5 class="text-light mb-0">
                            <i class="bi bi-collection me-2"></i>Projekt
                            <span class="badge bg-primary ms-2" id="projectBadge">0</span>
                        </h5>
                        <div class="d-flex gap-2">
                            <button onclick="clearProject()" class="btn btn-sm btn-outline-danger">
                                <i class="bi bi-trash me-1"></i>Wyczyść projekt
                            </button>
                            <button onclick="exportProject()" class="btn btn-sm btn-warning">
                                <i class="bi bi-file-zip me-1"></i>Eksportuj ZIP
                            </button>
                        </div>
                    </div>
                    <p class="text-muted small mb-2">
                        <i class="bi bi-info-circle me-1"></i>
                        ZIP zawiera PNG-i i <code>ranks.yml</code> – wrzuć do
                        <code>plugins/ItemsAdder/contents/</code> i uruchom <code>/iazip</code>.
                    </p>
                    <div id="projectList" class="d-flex gap-3 flex-wrap mt-3">
                        <p class="text-muted small mb-0 py-2">
                            <i class="bi bi-inbox me-1"></i>
                            Projekt jest pusty.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ══ MODAL: Emoji picker ═══════════════════════════════════════════════ -->
    <div class="modal fade" id="emojiModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="background:#0f0f24;border:1px solid #2a2a4a;">
                <div class="modal-header border-0">
                    <h5 class="modal-title text-light"><i class="bi bi-emoji-smile me-2"></i>Wybierz emoji</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="emojiSearch" class="form-control mb-3" placeholder="Szukaj emoji po ang. nazwie (np. crown, fire, sword, star)..." autocomplete="off">
                    <div class="picker-tabs" id="emojiTabs"></div>
                    <div class="picker-grid" id="emojiGrid"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- ══ MODAL: Przedmioty Minecraft ═══════════════════════════════════════ -->
    <div class="modal fade" id="itemModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content" style="background:#0f0f24;border:1px solid #2a2a4a;">
                <div class="modal-header border-0">
                    <h5 class="modal-title text-light"><i class="bi bi-box-seam me-2"></i>Przedmioty Minecraft</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="itemSearch" class="form-control mb-3" placeholder="Szukaj przedmiotu (np. diamond, sword, apple)..." autocomplete="off">
                    <div class="picker-grid" id="itemGrid"></div>
                    <small class="text-muted d-block mt-2"><i class="bi bi-info-circle me-1"></i>Tekstury z oficjalnego zestawu Minecraft (CDN). Kliknij, aby ustawić jako ikonę.</small>
                </div>
            </div>
        </div>
    </div>

    <!-- ══ MODAL: Paint Studio ═══════════════════════════════════════════════ -->
    <div class="modal fade" id="paintModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content" style="background:#0f0f24;border:1px solid #2a2a4a;">
                <div class="modal-header border-0">
                    <h5 class="modal-title text-light"><i class="bi bi-brush me-2"></i>Paint Studio – edytor pikseli</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <!-- Narzędzia -->
                        <div class="col-md-4 col-lg-3">
                            <div class="text-muted small mb-2" style="letter-spacing:.5px;">NARZĘDZIA</div>
                            <div class="paint-toolbar mb-3" id="paintTools">
                                <div class="paint-tool active" data-tool="brush"><i class="bi bi-brush"></i>Pędzel</div>
                                <div class="paint-tool" data-tool="eraser"><i class="bi bi-eraser"></i>Gumka</div>
                                <div class="paint-tool" data-tool="line"><i class="bi bi-slash-lg"></i>Linia</div>
                                <div class="paint-tool" data-tool="rect"><i class="bi bi-square"></i>Prostok.</div>
                                <div class="paint-tool" data-tool="fill"><i class="bi bi-paint-bucket"></i>Wypełn.</div>
                                <div class="paint-tool" data-tool="pick"><i class="bi bi-eyedropper"></i>Pipeta</div>
                                <div class="paint-tool" data-tool="move"><i class="bi bi-arrows-move"></i>Przesuń</div>
                                <div class="paint-tool" data-tool="mirror"><i class="bi bi-symmetry-vertical"></i>Lustro</div>
                                <div class="paint-tool" data-tool="stamp"><i class="bi bi-type"></i>Tekst</div>
                                <div class="paint-tool" data-tool="clear"><i class="bi bi-trash"></i>Wyczyść</div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label small d-flex justify-content-between">
                                    <span>Rozmiar pędzla</span><span id="brushSizeVal" class="text-muted">1 px</span>
                                </label>
                                <input type="range" id="brushSize" class="form-range" min="1" max="8" value="1">
                            </div>

                            <div class="mb-3">
                                <label class="form-label small">Kolor</label>
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <input type="color" id="paintColor" class="form-control form-control-color" value="#4b6bff">
                                    <div class="form-check ms-1">
                                        <input class="form-check-input" type="checkbox" id="mirrorEnabled">
                                        <label class="form-check-label small" for="mirrorEnabled">Symetria</label>
                                    </div>
                                </div>
                                <div class="d-flex flex-wrap gap-1" id="paletteSwatches"></div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label small d-flex justify-content-between">
                                    <span>Rozmiar płótna</span><span id="gridSizeVal" class="text-muted">16×16</span>
                                </label>
                                <select id="paintGridSize" class="form-select form-select-sm">
                                    <option value="8">8 × 8</option>
                                    <option value="16" selected>16 × 16</option>
                                    <option value="24">24 × 24</option>
                                    <option value="32">32 × 32</option>
                                </select>
                            </div>

                            <div class="d-flex gap-2">
                                <button class="btn btn-sm btn-outline-light flex-fill" id="paintUndo"><i class="bi bi-arrow-counterclockwise"></i></button>
                                <button class="btn btn-sm btn-outline-light flex-fill" id="paintRedo"><i class="bi bi-arrow-clockwise"></i></button>
                                <label class="btn btn-sm btn-outline-info flex-fill mb-0" title="Importuj obraz">
                                    <i class="bi bi-upload"></i>
                                    <input type="file" id="paintImport" accept="image/*" hidden>
                                </label>
                            </div>
                        </div>

                        <!-- Płótno -->
                        <div class="col-md-8 col-lg-6 d-flex flex-column align-items-center justify-content-center">
                            <canvas id="paintCanvas" width="512" height="512" style="width:100%;max-width:420px;"></canvas>
                            <div class="d-flex align-items-center gap-2 mt-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="paintShowGrid" checked>
                                    <label class="form-check-label small" for="paintShowGrid">Siatka</label>
                                </div>
                                <span class="text-muted small" id="paintCoords">—</span>
                            </div>
                        </div>

                        <!-- Podgląd + Tekst do stempla -->
                        <div class="col-lg-3">
                            <div class="text-muted small mb-2">PODGLĄD 1:1</div>
                            <canvas id="paintPreview" width="64" height="64" style="image-rendering:pixelated;width:64px;height:64px;background:#0d0d1a;border:1px solid #262650;border-radius:6px;"></canvas>
                            <div class="mt-3" id="stampTextRow" style="display:none;">
                                <label class="form-label small">Tekst do wstawienia</label>
                                <input type="text" id="stampText" class="form-control form-control-sm mb-2" value="A" maxlength="12">
                                <small class="text-muted d-block">Kliknij na płótnie, aby wstawić.</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Anuluj</button>
                    <button type="button" class="btn btn-success" id="paintApply"><i class="bi bi-check-lg me-1"></i>Użyj jako ikonę</button>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
/* ════════════════════════════════════════════════════════════════════════
   Generator Rang (Pixel Art) – CraftList.pl
   ════════════════════════════════════════════════════════════════════════ */

// ── Skala podglądu: 1 px gry = PREVIEW_SCALE px wyświetlanych ────────────────
// Nearest-neighbor upscale = pixel art, dokładnie jak Minecraft GUI scale 3x
// Sterowana suwakiem zoomu (#zoomRange); wartość startowa 5×.
let PREVIEW_SCALE = 5;  // Upscale – pixel art; zmieniane suwakiem zoomu

/* ════════════════════════════════════════════════════════════════════════
   TABELA CZCIONEK  ←  JEDYNE MIEJSCE, KTÓRE EDYTUJESZ, ABY DODAĆ FONT
   ────────────────────────────────────────────────────────────────────────
   Dodaj tu jeden wpis, a font AUTOMATYCZNIE:
     • pobierze się z Google Fonts (link generowany z pola „gf”),
     • pojawi się na liście wyboru (w grupie z pola „group”),
     • użyje swoich ustawień renderowania (rozmiar, pixelizacja, marginesy).

   Pola każdego wpisu (klucz = dokładna nazwa rodziny czcionki):
     label     – tekst widoczny na liście wyboru.
     group     – nazwa grupy (optgroup) na liście. Fonty z tą samą grupą
                 trafiają razem; kolejność grup = kolejność pierwszego wystąpienia.
     gf        – parametr rodziny dla Google Fonts (część po „family=”),
                 np. 'Tiny5' albo 'Doto:wght@400..700'. Spacje jako '+'.
                 Ustaw null, jeśli font nie pochodzi z Google Fonts.
     source    – 'online' (domyślnie) = font z Google Fonts (pole „gf”),
                 'local'  = font z pliku na serwerze (pole „url”).
     url       – ŚCIEŻKA do pliku fontu, gdy source='local'. Wrzuć plik
                 .ttf / .otf / .woff / .woff2 do folderu (np. 'assets/fonts/')
                 i podaj tu ścieżkę, np. 'assets/fonts/MojFont.ttf'.
                 Klucz wpisu = dowolna, unikalna nazwa rodziny (font-family),
                 pod którą font zostanie zarejestrowany w przeglądarce.
     size      – rozmiar czcionki w px gry (większy = czytelniejszy na czacie).
     weight    – grubość 400 (normal) / 700 (bold). Tylko taka, jaką font ma.
     quantize  – PIXELIZACJA: próg alpha 0-255 (wyżej = ostrzejszy pixel),
                 albo false = wyłącz (gładki font – dla dot-matrix / 3D / glitch).
     letterSp  – odstęp między literami w px (może być ujemny).
     padL/padR – dodatkowy margines z lewej / prawej strony (px).
     baseline  – przesunięcie tekstu w pionie (px; + = w dół, - = w górę).
   ════════════════════════════════════════════════════════════════════════ */
const G_OK = '✅ Czytelne (polecane na czat)';
const G_FX = '🎨 Dekoracyjne / efektowne';
const G_LOCAL = '📁 Lokalne (własne pliki)';

const FONT_CONFIG = {
    // ── Czytelne / polecane ──────────────────────────────────────────────
    'Pixelify Sans':    { label: 'Pixelify Sans – nowoczesny pixel',   group: G_OK, gf: 'Pixelify+Sans:wght@700', size: 18, weight: 700, quantize: 80,    letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Tiny5':            { label: 'Tiny5 – minimalistyczny pixel',      group: G_OK, gf: 'Tiny5',                  size: 16, weight: 400, quantize: 80,    letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Silkscreen':       { label: 'Silkscreen – czysty blocky pixel',   group: G_OK, gf: 'Silkscreen:wght@700',    size: 16, weight: 700, quantize: 90,    letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Press Start 2P':   { label: 'Press Start 2P – klasyczny Minecraft',group: G_OK, gf: 'Press+Start+2P',         size: 16, weight: 400, quantize: 90,    letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Jersey 10':        { label: 'Jersey 10 – gładki pixel',           group: G_OK, gf: 'Jersey+10',              size: 20, weight: 400, quantize: 70,    letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Jersey 15':        { label: 'Jersey 15 – pixel średni',           group: G_OK, gf: 'Jersey+15',              size: 20, weight: 400, quantize: 70,    letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Jersey 20':        { label: 'Jersey 20 – pixel wyraźny',          group: G_OK, gf: 'Jersey+20',              size: 20, weight: 400, quantize: 70,    letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Jersey 25':        { label: 'Jersey 25 – pixel grubszy',          group: G_OK, gf: 'Jersey+25',              size: 22, weight: 400, quantize: 60,    letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Micro 5':          { label: 'Micro 5 – micro pixel',              group: G_OK, gf: 'Micro+5',                size: 26, weight: 400, quantize: 70,    letterSp: 1, padL: 0, padR: 0, baseline: 0 },
    'VT323':            { label: 'VT323 – retro terminal 8-bit',       group: G_OK, gf: 'VT323',                  size: 22, weight: 400, quantize: false, letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'DotGothic16':      { label: 'DotGothic16 – pixel japoński',       group: G_OK, gf: 'DotGothic16',            size: 18, weight: 400, quantize: 80,    letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Handjet':          { label: 'Handjet – pixel modularny',          group: G_OK, gf: 'Handjet:wght@700',       size: 22, weight: 700, quantize: false, letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Bytesized':        { label: 'Bytesized – 8-bit blocky',           group: G_OK, gf: 'Bytesized',              size: 24, weight: 400, quantize: 70,    letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Workbench':        { label: 'Workbench – techniczny pixel',       group: G_OK, gf: 'Workbench',              size: 22, weight: 400, quantize: false, letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Doto':             { label: 'Doto – dot-matrix',                  group: G_OK, gf: 'Doto:wght@400..700',     size: 22, weight: 700, quantize: false, letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    // ── Dekoracyjne / efektowne ──────────────────────────────────────────
    'Monofett':         { label: 'Monofett – graffiti pixel',          group: G_FX, gf: 'Monofett',               size: 22, weight: 400, quantize: 90,    letterSp: 1, padL: 0, padR: 0, baseline: 0 },
    'Blaka':            { label: 'Blaka – gruby marker',               group: G_FX, gf: 'Blaka',                  size: 22, weight: 400, quantize: false, letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Sixtyfour':        { label: 'Sixtyfour – retro 3D',               group: G_FX, gf: 'Sixtyfour',              size: 16, weight: 400, quantize: false, letterSp: 2, padL: 0, padR: 2, baseline: 0 },
    'Rubik Pixels':     { label: 'Rubik Pixels – kwadraciki',          group: G_FX, gf: 'Rubik+Pixels',           size: 20, weight: 400, quantize: 90,    letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Rubik Iso':        { label: 'Rubik Iso – izometryczny 3D',        group: G_FX, gf: 'Rubik+Iso',              size: 22, weight: 400, quantize: false, letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Rubik Glitch':     { label: 'Rubik Glitch – glitch efekt',        group: G_FX, gf: 'Rubik+Glitch',           size: 20, weight: 400, quantize: false, letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Rubik Maze':       { label: 'Rubik Maze – labirynt',              group: G_FX, gf: 'Rubik+Maze',             size: 20, weight: 400, quantize: false, letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Rubik Microbe':    { label: 'Rubik Microbe – bąbelki',            group: G_FX, gf: 'Rubik+Microbe',          size: 20, weight: 400, quantize: false, letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'Rubik Broken Fax': { label: 'Rubik Broken Fax – zakłócenia',      group: G_FX, gf: 'Rubik+Broken+Fax',       size: 20, weight: 400, quantize: false, letterSp: 0, padL: 0, padR: 0, baseline: 0 },

    // ── Lokalne / własne pliki ───────────────────────────────────────────
    // Wrzuć plik fontu do folderu (np. assets/fonts/) i odkomentuj / dodaj wpis.
    // Klucz = nazwa rodziny, source: 'local', url = ścieżka do pliku.
    // 'Moj Font': { label: 'Mój Font – opis', group: G_LOCAL, source: 'local', url: 'assets/fonts/MojFont.ttf', size: 18, weight: 400, quantize: 80, letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'MinePolski':    { label: 'MinePolski',         group: G_LOCAL, source: 'local', url: 'assets/font/MinePolski.otf',         size: 18, weight: 400, quantize: false, letterSp: 0, padL: 2, padR: 0, baseline: 0 },
    'Minecraft PL':  { label: 'Minecraft PL',       group: G_LOCAL, source: 'local', url: 'assets/font/minecraft_pl_font.ttf',  size: 18, weight: 400, quantize: false, letterSp: 0, padL: 2, padR: 0, baseline: 0 },
    'Minecraft':  { label: 'Minecraft',             group: G_LOCAL, source: 'local', url: 'assets/font/Minecraft.ttf',          size: 18, weight: 400, quantize: false, letterSp: 0, padL: 2, padR: 0, baseline: 0 },
    'Minecraft-2':  { label: 'Minecraft-2',         group: G_LOCAL, source: 'local', url: 'assets/font/Minecraft-2.ttf',        size: 18, weight: 400, quantize: false, letterSp: 0, padL: 2, padR: 0, baseline: 0 },
    'Silom':  { label: 'Silom',                 group: G_LOCAL, source: 'local', url: 'assets/font/Silom.ttf',          size: 18, weight: 400, quantize: false, letterSp: 0, padL: 0, padR: 0, baseline: 0 },
    'SilomBol':  { label: 'SilomBol',           group: G_LOCAL, source: 'local', url: 'assets/font/SilomBol.ttf',        size: 18, weight: 400, quantize: false, letterSp: 0, padL: 3, padR: 0, baseline: 0 },
};
// Ustawienia domyślne, gdy font nie ma wpisu powyżej
const DEFAULT_FONT_CFG = { size: 18, weight: 700, quantize: 80, letterSp: 0, padL: 0, padR: 0, baseline: 0 };

// ── Auto-ładowanie fontów z tabeli (jedno źródło prawdy) ───────────────────
//   • source:'online' (lub brak) → pobiera z Google Fonts (pole „gf”),
//   • source:'local'             → rejestruje font z pliku (pole „url”) przez FontFace.
(function loadFonts() {
    // 1) Google Fonts – tylko wpisy online z wypełnionym „gf”
    const fams = Object.entries(FONT_CONFIG)
        .filter(([, c]) => (c.source || 'online') === 'online' && c.gf)
        .map(([, c]) => 'family=' + c.gf);
    if (fams.length) {
        const link = document.createElement('link');
        link.rel  = 'stylesheet';
        link.href = 'https://fonts.googleapis.com/css2?' + fams.join('&') + '&display=swap';
        document.head.appendChild(link);
    }

    // 2) Fonty lokalne – rejestracja przez FontFace API z pliku (pole „url”)
    for (const [name, c] of Object.entries(FONT_CONFIG)) {
        if (c.source !== 'local' || !c.url) continue;
        try {
            const ff = new FontFace(name, `url("${c.url}")`, { weight: String(c.weight || 400) });
            ff.load()
              .then(loaded => { document.fonts.add(loaded); if (typeof drawTag === 'function') drawTag(); })
              .catch(err => console.warn('Nie udało się załadować lokalnego fontu „' + name + '” (' + c.url + ')', err));
        } catch (err) {
            console.warn('Błędny wpis lokalnego fontu „' + name + '”', err);
        }
    }
})();

// ── Auto-generowanie listy wyboru z tabeli (jedno źródło prawdy) ───────────
(function buildFontSelect() {
    const sel = document.getElementById('fontSelect');
    if (!sel) return;
    const groups = {};
    for (const [name, c] of Object.entries(FONT_CONFIG)) {
        const g = c.group || 'Inne';
        (groups[g] = groups[g] || []).push([name, c.label || name]);
    }
    sel.innerHTML = '';
    let first = true;
    for (const [gName, items] of Object.entries(groups)) {
        const og = document.createElement('optgroup');
        og.label = gName;
        for (const [val, lbl] of items) {
            const op = document.createElement('option');
            op.value = val;
            op.textContent = lbl;
            if (first) { op.selected = true; first = false; }
            og.appendChild(op);
        }
        sel.appendChild(og);
    }
})();

// ── DOM refs ──────────────────────────────────────────────────────────────────
const canvas     = document.getElementById('tagCanvas');
const ctx        = canvas.getContext('2d');
const elText     = document.getElementById('textInput');
const elBgS      = document.getElementById('bgColorStart');
const elBgE      = document.getElementById('bgColorEnd');
const elNoBg     = document.getElementById('noBgGradient');
const elTxtS     = document.getElementById('textColorStart');
const elTxtE     = document.getElementById('textColorEnd');
const elNoTxt    = document.getElementById('noTextGradient');
const elRadius   = document.getElementById('radiusRange');
const elIcon     = document.getElementById('iconSelect');
const elFont     = document.getElementById('fontSelect');
const elUpload   = document.getElementById('uploadImage');
const elClearImg = document.getElementById('clearImageBtn');
const elNs       = document.getElementById('iaNamespace');
const elIaOut    = document.getElementById('iaConfigOutput');
const elLpCmd    = document.getElementById('iaLpCmd');
const elFontsLoadStatus = document.getElementById('fontsLoadStatus');

let uploadedImage = null;
let project       = JSON.parse(localStorage.getItem('rankProject') || '[]');

// ── Zaawansowane ustawienia fontu (nadpisanie FONT_CONFIG) ──────────────────────
// Domyślnie render bierze wartości z tabeli FONT_CONFIG. Gdy użytkownik włączy
// „Dostosuj ustawienia fontu”, quantize / letterSp / padL / padR / baseline są
// pobierane z suwaków na stronie (bez ruszania tabeli w kodzie).
function currentFontDefaults() {
    const sel = elFont.value || 'Pixelify Sans';
    return Object.assign({}, DEFAULT_FONT_CFG, FONT_CONFIG[sel] || {});
}
function getEffectiveFontCfg(selectedFont) {
    const base = Object.assign({}, DEFAULT_FONT_CFG, FONT_CONFIG[selectedFont] || {});
    if (!document.getElementById('fontAdvEnabled')?.checked) return base;
    const pixOn = document.getElementById('advPixelEnabled').checked;
    base.quantize = pixOn ? parseInt(document.getElementById('advQuantizeRange').value) : false;
    base.size     = parseInt(document.getElementById('advSizeRange').value);
    base.weight   = parseInt(document.getElementById('advWeightSelect').value);
    base.letterSp = parseInt(document.getElementById('advLetterSpRange').value);
    base.baseline = parseInt(document.getElementById('advBaselineRange').value);
    base.padL     = parseInt(document.getElementById('advPadLRange').value);
    base.padR     = parseInt(document.getElementById('advPadRRange').value);
    return base;
}
function updateFontAdvLabels() {
    document.getElementById('advQuantizeVal').textContent = document.getElementById('advQuantizeRange').value;
    document.getElementById('advSizeVal').textContent     = document.getElementById('advSizeRange').value + ' px';
    document.getElementById('advLetterSpVal').textContent = document.getElementById('advLetterSpRange').value + ' px';
    document.getElementById('advBaselineVal').textContent = document.getElementById('advBaselineRange').value + ' px';
    document.getElementById('advPadLVal').textContent     = document.getElementById('advPadLRange').value + ' px';
    document.getElementById('advPadRVal').textContent     = document.getElementById('advPadRRange').value + ' px';
    document.getElementById('advQuantizeRow').style.display = document.getElementById('advPixelEnabled').checked ? '' : 'none';
    document.getElementById('fontAdvControls').style.display = document.getElementById('fontAdvEnabled').checked ? '' : 'none';
}
function syncFontAdvToDefaults() {
    const d = currentFontDefaults();
    const pixOn = d.quantize !== false;
    document.getElementById('advPixelEnabled').checked = pixOn;
    document.getElementById('advQuantizeRange').value  = pixOn ? d.quantize : 80;
    document.getElementById('advSizeRange').value      = d.size;
    document.getElementById('advWeightSelect').value   = String(d.weight);
    document.getElementById('advLetterSpRange').value  = d.letterSp;
    document.getElementById('advBaselineRange').value  = d.baseline;
    document.getElementById('advPadLRange').value      = d.padL;
    document.getElementById('advPadRRange').value      = d.padR;
    updateFontAdvLabels();
}

// ── Helpers ────────────────────────────────────────────────────────────────────
function hexToRgb(hex) {
    const n = parseInt(hex.replace('#', ''), 16);
    return [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];
}
function slugify(s) {
    return (s || '').toLowerCase()
        .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
        .replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '') || 'rank';
}
function escapeHtml(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
function roundedRectPath(cx, x, y, w, h, r) {
    r = Math.max(0, Math.min(r, w / 2, h / 2));
    cx.beginPath();
    cx.moveTo(x + r, y);         cx.lineTo(x + w - r, y);
    cx.arcTo(x + w, y,   x + w, y + r,     r);
    cx.lineTo(x + w, y + h - r); cx.arcTo(x + w, y + h, x + w - r, y + h, r);
    cx.lineTo(x + r, y + h);     cx.arcTo(x, y + h,   x, y + h - r,   r);
    cx.lineTo(x, y + r);         cx.arcTo(x, y,       x + r, y,       r);
    cx.closePath();
}

// ── Główna funkcja renderująca ─────────────────────────────────────────────────
function drawTag() {
    // Zoom podglądu z suwaka (nie wpływa na eksportowany PNG – ten jest 1:1)
    const zEl = document.getElementById('zoomRange');
    if (zEl) PREVIEW_SCALE = parseInt(zEl.value) || 5;

    const text      = (elText.value || 'RANGA');
    const icon      = elIcon.value;
    const hasImg    = !!uploadedImage;
    const hasIcon   = hasImg || !!icon;
    const solidBg   = elNoBg.checked;
    const solidTxt  = elNoTxt.checked;

    const padH      = parseInt(document.getElementById('padHRange').value);
    const padV      = parseInt(document.getElementById('padVRange').value);
    const radius    = parseInt(elRadius.value);
    const bgGradDir = document.querySelector('input[name="bgGradDir"]:checked')?.value || 'h';
    const txtGradDir = document.querySelector('input[name="txtGradDir"]:checked')?.value || 'h';

    const bgOutW    = parseInt(document.getElementById('bgOutRange').value);
    const bgOutC    = document.getElementById('bgOutColor').value;
    const bgShdEn   = document.getElementById('bgShdEnabled').checked;
    const bgShdX    = parseInt(document.getElementById('bgShdX').value);
    const bgShdY    = parseInt(document.getElementById('bgShdY').value);
    const bgShdC    = document.getElementById('bgShdColor').value;

    const txtOutW   = parseInt(document.getElementById('txtOutRange').value);
    const txtOutC   = document.getElementById('txtOutColor').value;
    const txtShdEn  = document.getElementById('txtShdEnabled').checked;
    const txtShdX   = parseInt(document.getElementById('txtShdX').value);
    const txtShdY   = parseInt(document.getElementById('txtShdY').value);
    const txtShdC   = document.getElementById('txtShdColor').value;

    // ── Opcje ikony ────────────────────────────────────────────────
    const iconPos   = document.querySelector('input[name="iconPos"]:checked')?.value || 'left';
    const iconScale = parseInt(document.getElementById('iconSizeRange').value) / 100;
    const iconGap   = parseInt(document.getElementById('iconGapRange').value);
    const iconOffX  = parseInt(document.getElementById('iconOffXRange').value);
    const iconOffY  = parseInt(document.getElementById('iconOffYRange').value);

    // ── Font – konfiguracja z tabeli FONT_CONFIG (patrz góra skryptu) ─────
    // Każdy font ma własny rozmiar, grubość, pixelizację i marginesy, aby
    // ranga była czytelna na czacie Minecraft (render small → upscale NN).
    const selectedFont = elFont.value || 'Pixelify Sans';
    const cfg          = getEffectiveFontCfg(selectedFont);
    const FONT_PX      = cfg.size;
    const FONT         = `${cfg.weight} ${FONT_PX}px "${selectedFont}", monospace`;

    // ── Upewnij się, że wybrany font jest naprawdę załadowany ────────────────
    // Canvas (fillText) NIE wyzwala leniwego pobierania Google Fonts (display=swap),
    // więc przy pierwszym wyborze font rysowałby się fallbackiem. Jawnie go ładujemy
    // i po pobraniu przerysowujemy podgląd.
    const FONT_CHECK = `${cfg.weight} ${FONT_PX}px "${selectedFont}"`;
    if (!document.fonts.check(FONT_CHECK, text)) {
        document.fonts.load(FONT_CHECK, text).then(() => drawTag()).catch(() => {});
    }

    // Pomiar metryk w pikselach gry
    const mCtx    = document.createElement('canvas').getContext('2d');
    mCtx.font     = FONT;
    mCtx.letterSpacing = cfg.letterSp + 'px';
    const metrics = mCtx.measureText(text || 'M');
    const textW   = Math.ceil(metrics.width);
    const txtAsc  = metrics.actualBoundingBoxAscent;
    const txtDes  = metrics.actualBoundingBoxDescent;
    const textH   = Math.ceil(txtAsc + txtDes);

    // ── Wymiary (1 jednostka = 1 px Minecrafta) ──────────────────────────────
    const imgSize  = hasIcon ? Math.max(Math.round(textH * iconScale), 4) : 0;
    const imgGap   = hasIcon ? iconGap : 0;
    const innerW   = textW + padH * 2 + imgSize + imgGap + cfg.padL + cfg.padR;
    const innerH   = Math.max(textH, imgSize) + padV * 2;

    // SPAD = dokładne miejsce na cień (nie sztywne 12px)
    const SPAD     = bgShdEn ? Math.max(Math.abs(bgShdX), Math.abs(bgShdY)) + 1 : 0;
    const compW    = innerW + bgOutW * 2 + SPAD * 2;
    const compH    = innerH + bgOutW * 2 + SPAD * 2;
    const origX    = bgOutW + SPAD;
    const origY    = bgOutW + SPAD;
    const midY     = origY + innerH / 2;
    const drawBase = midY + (txtAsc - txtDes) / 2 + cfg.baseline;

    // ── Game canvas – KAŻDY PX = 1 PX MINECRAFT ─────────────────────────────
    const gameCanvas  = document.createElement('canvas');
    gameCanvas.width  = compW;
    gameCanvas.height = compH;
    const gc = gameCanvas.getContext('2d');
    gc.imageSmoothingEnabled = false;
    gc.letterSpacing = cfg.letterSp + 'px';

    // ── 1. Cień tła – twardy offset, 0 blur (jak Minecraft) ─────────────────
    if (bgShdEn) {
        roundedRectPath(gc, origX + bgShdX, origY + bgShdY, innerW, innerH, radius);
        gc.fillStyle = bgShdC;
        gc.fill();
    }

    // ── 2. Obramówka tła ─────────────────────────────────────────────────────
    if (bgOutW > 0) {
        roundedRectPath(gc,
            origX - bgOutW, origY - bgOutW,
            innerW + bgOutW * 2, innerH + bgOutW * 2,
            radius + bgOutW
        );
        gc.fillStyle = bgOutC;
        gc.fill();
    }

    // ── 3. Wypełnienie tła ────────────────────────────────────────────────────
    gc.save();
    roundedRectPath(gc, origX, origY, innerW, innerH, radius);
    gc.clip();
    if (solidBg) {
        gc.fillStyle = elBgS.value;
    } else {
        let grad;
        if (bgGradDir === 'h')
            grad = gc.createLinearGradient(origX, 0, origX + innerW, 0);
        else if (bgGradDir === 'v')
            grad = gc.createLinearGradient(0, origY, 0, origY + innerH);
        else
            grad = gc.createLinearGradient(origX, origY, origX + innerW, origY + innerH);
        grad.addColorStop(0, elBgS.value);
        grad.addColorStop(1, elBgE.value);
        gc.fillStyle = grad;
    }
    gc.fillRect(0, 0, compW, compH);
    gc.restore();

    // ── 4. Rozmieszczenie ikony i tekstu (pozycja lewo / prawo) ───────────
    const contentX = origX + padH + cfg.padL;
    let iconX, textX;
    if (hasIcon && iconPos === 'right') {
        textX = contentX;
        iconX = contentX + textW + imgGap;
    } else {
        iconX = contentX;                                   // ikona z lewej (lub brak)
        textX = contentX + (hasIcon ? imgSize + imgGap : 0);
    }

    if (hasIcon) {
        const drawY = Math.round(midY - imgSize / 2) + iconOffY;
        const ix    = iconX + iconOffX;
        gc.save();
        if (hasImg) {
            gc.imageSmoothingEnabled = false;  // ostry pixel art dla własnego obrazka
            gc.drawImage(uploadedImage, ix, drawY, imgSize, imgSize);
        } else {
            gc.font         = `${imgSize}px "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif`;
            gc.letterSpacing = '0px';  // emoji bez odstępów
            gc.textBaseline = 'middle';
            gc.textAlign    = 'left';
            gc.fillText(icon, ix, midY + iconOffY);
        }
        gc.restore();
    }
    const curX = textX;  // pozycja startowa tekstu

    // ── 5. Cień tekstu ────────────────────────────────────────────────────────
    if (txtShdEn) {
        gc.save();
        gc.font         = FONT;
        gc.textBaseline = 'alphabetic';
        gc.textAlign    = 'left';
        gc.fillStyle    = txtShdC;
        gc.fillText(text, curX + txtShdX, drawBase + txtShdY);
        gc.restore();
    }

    // ── 6. Obramówka tekstu ───────────────────────────────────────────────────
    if (txtOutW > 0) {
        gc.save();
        gc.font         = FONT;
        gc.textBaseline = 'alphabetic';
        gc.textAlign    = 'left';
        gc.strokeStyle  = txtOutC;
        gc.lineWidth    = txtOutW * 2;
        gc.lineJoin     = 'round';
        gc.strokeText(text, curX, drawBase);
        gc.restore();
    }

    // ── 7. Wypełnienie tekstu ─────────────────────────────────────────────────
    gc.save();
    gc.font         = FONT;
    gc.textBaseline = 'alphabetic';
    gc.textAlign    = 'left';
    if (solidTxt) {
        gc.fillStyle = elTxtS.value;
    } else {
        let tg;
        if (txtGradDir === 'h')
            tg = gc.createLinearGradient(curX, 0, curX + textW, 0);
        else
            tg = gc.createLinearGradient(0, drawBase - txtAsc, 0, drawBase + txtDes);
        tg.addColorStop(0, elTxtS.value);
        tg.addColorStop(1, elTxtE.value);
        gc.fillStyle = tg;
    }
    gc.fillText(text, curX, drawBase);
    gc.restore();

    // ── 8. Pixel quantization – każdy px = 0 lub 255 alpha ───────────────────
    // Usuwa sub-pixel AA z czcionki: dokładnie tak działa Minecraft font renderer
    // (każdy texel w bitmap font jest albo w pełni wypełniony albo przezroczysty).
    // Sterowane per-font przez cfg.quantize (false = pomiń, zachowaj gładkość).
    if (cfg.quantize !== false) {
        const id  = gc.getImageData(0, 0, compW, compH);
        const pd  = id.data;
        const thr = cfg.quantize;
        for (let i = 3; i < pd.length; i += 4) {
            pd[i] = pd[i] < thr ? 0 : 255;
        }
        gc.putImageData(id, 0, 0);
    }

    // ── 9. Upscale do podglądu – nearest-neighbor = pixel art jak Minecraft ───
    canvas.width  = compW * PREVIEW_SCALE;
    canvas.height = compH * PREVIEW_SCALE;
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(gameCanvas, 0, 0, canvas.width, canvas.height);

    // Zachowaj game canvas do eksportu PNG (rzeczywisty rozmiar ItemsAdder)
    canvas._gameCanvas = gameCanvas;

    // Aktualizacja mockupów renderów (czat / TAB / lore / NPC) i info o rozmiarze
    const rankSrc = canvas.toDataURL();
    document.querySelectorAll('.rankImg').forEach(img => { img.src = rankSrc; });
    const si = document.getElementById('pngSizeInfo');
    if (si) si.textContent = compW + '\u00d7' + compH + '\u00a0px';

    updateIconChip();
    updateIAConfig();
}

// ── ItemsAdder ────────────────────────────────────────────────────────────────
function updateIAConfig() {
    const ns  = (elNs.value.trim().replace(/[^a-z0-9_]/gi, '').toLowerCase()) || 'my_server';
    const key = slugify(elText.value);
    const yaml =
`info:
  namespace: ${ns}

font_images:
  rank_${key}:
    path: "font/ranks/rank_${key}.png"
    y_position: -8
    ascent: 8
    height: 9
    show_in_list: true
    placeholder: ":rank_${key}:"

# Plik PNG umieść pod:
# plugins/ItemsAdder/contents/${ns}/
#   resourcepack/assets/${ns}/textures/font/ranks/rank_${key}.png`;
    elIaOut.textContent = yaml;
    elLpCmd.textContent  = `/lp group ${key} meta setprefix "%img_rank_${key}% "`;
}
function copyIAConfig() {
    navigator.clipboard.writeText(elIaOut.textContent)
        .then(() => Swal.fire({ icon:'success', title:'Skopiowano YAML!', timer:1200, showConfirmButton:false }));
}
function copyLPCmd() {
    navigator.clipboard.writeText(elLpCmd.textContent)
        .then(() => Swal.fire({ icon:'success', title:'Skopiowano!', timer:1200, showConfirmButton:false }));
}

// ── Pobierz PNG ───────────────────────────────────────────────────────────────
function downloadCurrentPNG() {
    // Pobierz mały game canvas (1px = 1px Minecrafta), nie upscaled podgląd
    const src = canvas._gameCanvas
        ? canvas._gameCanvas.toDataURL('image/png')
        : canvas.toDataURL('image/png');
    const a = document.createElement('a');
    a.download = `rank_${slugify(elText.value) || 'rank'}.png`;
    a.href     = src;
    a.click();
}

// ── Ustawienia ────────────────────────────────────────────────────────────────
function getSettings() {
    return {
        text:         elText.value,
        bgS:          elBgS.value,          bgE:          elBgE.value,
        noBg:         elNoBg.checked,       txtS:         elTxtS.value,
        txtE:         elTxtE.value,         noTxt:        elNoTxt.checked,
        radius:       elRadius.value,       icon:         elIcon.value,
        font:         elFont.value,
        iconPos:      document.querySelector('input[name="iconPos"]:checked')?.value || 'left',
        iconSize:     document.getElementById('iconSizeRange').value,
        iconGap:      document.getElementById('iconGapRange').value,
        iconOffX:     document.getElementById('iconOffXRange').value,
        iconOffY:     document.getElementById('iconOffYRange').value,
        padH:         document.getElementById('padHRange').value,
        padV:         document.getElementById('padVRange').value,
        bgGradDir:    document.querySelector('input[name="bgGradDir"]:checked')?.value || 'h',
        txtGradDir:   document.querySelector('input[name="txtGradDir"]:checked')?.value || 'h',
        bgOutW:       document.getElementById('bgOutRange').value,
        bgOutC:       document.getElementById('bgOutColor').value,
        bgShdEn:      document.getElementById('bgShdEnabled').checked,
        bgShdX:       document.getElementById('bgShdX').value,
        bgShdY:       document.getElementById('bgShdY').value,
        bgShdC:       document.getElementById('bgShdColor').value,
        txtOutW:      document.getElementById('txtOutRange').value,
        txtOutC:      document.getElementById('txtOutColor').value,
        txtShdEn:     document.getElementById('txtShdEnabled').checked,
        txtShdX:      document.getElementById('txtShdX').value,
        txtShdY:      document.getElementById('txtShdY').value,
        txtShdC:      document.getElementById('txtShdColor').value,
    };
}
function setEl(id, val, type = 'value') {
    const el = document.getElementById(id);
    if (!el) return;
    if (type === 'checked') el.checked = val ?? false;
    else el.value = val ?? el.value;
}
function applySettings(s) {
    elText.value = s.text ?? '';
    elBgS.value  = s.bgS ?? elBgS.value;   elBgE.value  = s.bgE ?? elBgE.value;
    elNoBg.checked = s.noBg ?? false;
    elTxtS.value = s.txtS ?? elTxtS.value;  elTxtE.value = s.txtE ?? elTxtE.value;
    elNoTxt.checked = s.noTxt ?? true;
    elRadius.value = s.radius ?? 0;         elIcon.value = s.icon ?? '';
    if (s.font) elFont.value = s.font;
    setEl('iconSizeRange', s.iconSize); setEl('iconGapRange', s.iconGap);
    setEl('iconOffXRange', s.iconOffX); setEl('iconOffYRange', s.iconOffY);
    if (s.iconPos) { const r = document.getElementById(s.iconPos === 'right' ? 'iconPosR' : 'iconPosL'); if (r) r.checked = true; }
    setEl('padHRange', s.padH); setEl('padVRange', s.padV);
    setEl('bgOutRange', s.bgOutW);        setEl('bgOutColor', s.bgOutC);
    setEl('bgShdEnabled', s.bgShdEn, 'checked');
    setEl('bgShdX', s.bgShdX);           setEl('bgShdY', s.bgShdY);  setEl('bgShdColor', s.bgShdC);
    setEl('txtOutRange', s.txtOutW);      setEl('txtOutColor', s.txtOutC);
    setEl('txtShdEnabled', s.txtShdEn, 'checked');
    setEl('txtShdX', s.txtShdX);          setEl('txtShdY', s.txtShdY); setEl('txtShdColor', s.txtShdC);
    // Radio buttons
    if (s.bgGradDir)  { const r = document.getElementById('bgGrad'  + s.bgGradDir.toUpperCase());  if (r) r.checked = true; }
    if (s.txtGradDir) { const r = document.getElementById('txtGrad' + s.txtGradDir.toUpperCase()); if (r) r.checked = true; }
    updateAllLabels();
    updateShadowVisibility();
    drawTag();
}

// ── Projekt ────────────────────────────────────────────────────────────────────
function addToProject() {
    const settings    = getSettings();
    const dataUrl     = canvas.toDataURL('image/png');   // upscaled – do miniatur
    const gameDataUrl = canvas._gameCanvas               // mały PNG – do eksportu
        ? canvas._gameCanvas.toDataURL('image/png')
        : dataUrl;
    const key      = slugify(settings.text);
    const idx      = project.findIndex(r => slugify(r.settings.text) === key);
    if (idx >= 0) {
        project[idx] = { ...project[idx], settings, dataUrl, gameDataUrl };
        Swal.fire({ icon:'info', title:`Zaktualizowano „${settings.text}"`, timer:1500, showConfirmButton:false });
    } else {
        project.push({ id: Date.now(), settings, dataUrl, gameDataUrl });
        Swal.fire({ icon:'success', title:`Dodano „${settings.text}"!`, timer:1500, showConfirmButton:false });
    }
    saveProject(); renderProject();
}
function editRank(id) {
    const r = project.find(r => r.id === id);
    if (r) { applySettings(r.settings); window.scrollTo({ top:0, behavior:'smooth' }); }
}
function removeFromProject(id) { project = project.filter(r => r.id !== id); saveProject(); renderProject(); }
function clearProject() {
    if (!project.length) return;
    Swal.fire({ icon:'warning', title:'Wyczyścić projekt?', showCancelButton:true,
        confirmButtonText:'Tak', cancelButtonText:'Anuluj', confirmButtonColor:'#dc3545' })
        .then(r => { if (r.isConfirmed) { project = []; saveProject(); renderProject(); } });
}
function saveProject() { localStorage.setItem('rankProject', JSON.stringify(project)); }
function renderProject() {
    const el = document.getElementById('projectList');
    document.getElementById('projectBadge').textContent = project.length;
    if (!project.length) {
        el.innerHTML = '<p class="text-muted small mb-0 py-2"><i class="bi bi-inbox me-1"></i>Projekt jest pusty.</p>';
        return;
    }
    el.innerHTML = project.map(r => `
        <div class="d-flex flex-column align-items-center gap-2 p-2 rounded"
             style="background:#10102a;border:1px solid #2a2a4a;max-width:220px;">
            <img src="${r.dataUrl}" alt="${escapeHtml(r.settings.text)}"
                 style="max-width:200px;border-radius:4px;">
            <small class="text-light fw-bold text-truncate w-100 text-center">${escapeHtml(r.settings.text)}</small>
            <div class="d-flex gap-1">
                <button class="btn btn-sm btn-outline-primary" style="font-size:11px;padding:2px 8px;"
                        onclick="editRank(${r.id})"><i class="bi bi-pencil"></i></button>
                <button class="btn btn-sm btn-outline-danger" style="font-size:11px;padding:2px 8px;"
                        onclick="removeFromProject(${r.id})"><i class="bi bi-trash"></i></button>
            </div>
        </div>`).join('');
}

// ── Eksport ZIP ───────────────────────────────────────────────────────────────
async function exportProject() {
    if (!project.length) { Swal.fire({ icon:'warning', title:'Projekt jest pusty!' }); return; }
    const ns  = (elNs.value.trim().replace(/[^a-z0-9_]/gi,'').toLowerCase()) || 'my_server';
    const zip = new JSZip();
    let yaml  = `info:\n  namespace: ${ns}\n\nfont_images:\n`;
    const lp  = [];
    for (const rank of project) {
        const key = slugify(rank.settings.text);
        yaml += `\n  rank_${key}:\n    path: "font/ranks/rank_${key}.png"\n    y_position: -8\n    ascent: 8\n    height: 9\n    show_in_list: true\n    placeholder: ":rank_${key}:"\n`;
        lp.push(`/lp group ${key} meta setprefix "%img_rank_${key}% "`);
        const pngBase64 = (rank.gameDataUrl || rank.dataUrl).split(',')[1];
        zip.file(`${ns}/resourcepack/assets/${ns}/textures/font/ranks/rank_${key}.png`, pngBase64, { base64: true });
    }
    zip.file(`${ns}/config/ranks.yml`, yaml);
    zip.file('README.txt', `CraftList.pl – Generator Rang\n\nWrzuć folder "${ns}/" do plugins/ItemsAdder/contents/ następnie uruchom /iazip\n\nLuckPerms:\n${lp.join('\n')}`);
    saveAs(await zip.generateAsync({ type:'blob', compression:'DEFLATE' }), `itemsadder_${ns}_rangi.zip`);
}

// ── Presety ────────────────────────────────────────────────────────────────────
function getPresets() { return JSON.parse(localStorage.getItem('rankPresets') || '{}'); }
document.getElementById('savePresetBtn').addEventListener('click', () => {
    const name = document.getElementById('presetName').value.trim();
    if (!name) { Swal.fire({ icon:'warning', title:'Podaj nazwę!', timer:1800, showConfirmButton:false }); return; }
    const p = getPresets(); p[name] = getSettings();
    localStorage.setItem('rankPresets', JSON.stringify(p));
    Swal.fire({ icon:'success', title:`Preset „${name}" zapisany!`, timer:1400, showConfirmButton:false });
    document.getElementById('presetName').value = '';
});
document.getElementById('loadPresetsBtn').addEventListener('click', () => {
    const keys = Object.keys(getPresets());
    if (!keys.length) { Swal.fire({ icon:'info', title:'Brak presetów.', showConfirmButton:true }); return; }
    Swal.fire({
        title: '<span style="color:#fff">Moje presety</span>',
        html: `<div style="text-align:left;max-height:300px;overflow-y:auto;">${keys.map(k => `
            <div class="d-flex justify-content-between align-items-center mb-2 gap-2 p-2 rounded" style="background:#1a1a38;border:1px solid #2a2a50;">
                <span class="text-light">${escapeHtml(k)}</span>
                <div class="d-flex gap-1 flex-shrink-0">
                    <button class="btn btn-sm btn-primary" onclick="loadPreset('${escapeHtml(k)}')"><i class="bi bi-upload me-1"></i>Wczytaj</button>
                    <button class="btn btn-sm btn-outline-danger" onclick="deletePreset('${escapeHtml(k)}')"><i class="bi bi-trash"></i></button>
                </div>
            </div>`).join('')}</div>`,
        showConfirmButton: false, showCloseButton: true, background:'#12122a', color:'#fff',
    });
});
window.loadPreset = n => { const p = getPresets()[n]; if (p) { applySettings(p); Swal.close(); } };
window.deletePreset = n => { const p = getPresets(); delete p[n]; localStorage.setItem('rankPresets', JSON.stringify(p)); Swal.close(); Swal.fire({ icon:'success', title:'Usunięto!', timer:1200, showConfirmButton:false }); };

// ── Aktualizacja labeli i widoczności ──────────────────────────────────────────
function updateAllLabels() {
    document.getElementById('radiusVal').textContent    = elRadius.value + ' px';
    document.getElementById('padHVal').textContent      = document.getElementById('padHRange').value + ' px';
    document.getElementById('padVVal').textContent      = document.getElementById('padVRange').value + ' px';
    document.getElementById('bgOutVal').textContent     = document.getElementById('bgOutRange').value + ' px';
    document.getElementById('bgShdXVal').textContent    = document.getElementById('bgShdX').value;
    document.getElementById('bgShdYVal').textContent    = document.getElementById('bgShdY').value;
    document.getElementById('txtOutVal').textContent    = document.getElementById('txtOutRange').value + ' px';
    document.getElementById('txtShdXVal').textContent   = document.getElementById('txtShdX').value;
    document.getElementById('txtShdYVal').textContent   = document.getElementById('txtShdY').value;
    document.getElementById('iconSizeVal').textContent  = document.getElementById('iconSizeRange').value + '%';
    document.getElementById('iconGapVal').textContent   = document.getElementById('iconGapRange').value + ' px';
    document.getElementById('iconOffXVal').textContent  = document.getElementById('iconOffXRange').value;
    document.getElementById('iconOffYVal').textContent  = document.getElementById('iconOffYRange').value;
}
function updateShadowVisibility() {
    document.getElementById('bgShdControls').style.display  = document.getElementById('bgShdEnabled').checked  ? '' : 'none';
    document.getElementById('txtShdControls').style.display = document.getElementById('txtShdEnabled').checked ? '' : 'none';
}

// ── Event listeners ─────────────────────────────────────────────────────────────
const allInputs = document.querySelectorAll(
    '#textInput,#fontSelect,#bgColorStart,#bgColorEnd,#noBgGradient,#textColorStart,#textColorEnd,' +
    '#noTextGradient,#radiusRange,#iconSelect,' +
    '#iconSizeRange,#iconGapRange,#iconOffXRange,#iconOffYRange,' +
    '#padHRange,#padVRange,#bgOutRange,#bgOutColor,#bgShdEnabled,#bgShdX,#bgShdY,#bgShdColor,' +
    '#txtOutRange,#txtOutColor,#txtShdEnabled,#txtShdX,#txtShdY,#txtShdColor,' +
    'input[name="bgGradDir"],input[name="txtGradDir"],input[name="iconPos"]'
);
allInputs.forEach(el => {
    el.addEventListener('input',  () => { updateAllLabels(); updateShadowVisibility(); drawTag(); });
    el.addEventListener('change', () => { updateAllLabels(); updateShadowVisibility(); drawTag(); });
});

// ── Zaawansowane ustawienia fontu ───────────────────────────────────────────────
// Zmiana czcionki → gdy tryb własny WYŁĄCZONY, suwaki podążają za FONT_CONFIG.
elFont.addEventListener('change', () => {
    if (!document.getElementById('fontAdvEnabled').checked) syncFontAdvToDefaults();
});
document.getElementById('fontAdvEnabled').addEventListener('change', e => {
    if (e.target.checked) syncFontAdvToDefaults();   // start od wartości bieżącego fontu
    updateFontAdvLabels();
    drawTag();
});
document.querySelectorAll(
    '#advPixelEnabled,#advQuantizeRange,#advSizeRange,#advWeightSelect,#advLetterSpRange,#advBaselineRange,#advPadLRange,#advPadRRange'
).forEach(el => {
    el.addEventListener('input',  () => { updateFontAdvLabels(); drawTag(); });
    el.addEventListener('change', () => { updateFontAdvLabels(); drawTag(); });
});
document.getElementById('advResetBtn').addEventListener('click', () => {
    syncFontAdvToDefaults();
    drawTag();
});
syncFontAdvToDefaults();   // inicjalizacja suwaków wartościami startowego fontu

elUpload.addEventListener('change', e => {
    const f = e.target.files[0];
    if (!f) return;
    const r = new FileReader();
    r.onload = ev => { uploadedImage = new Image(); uploadedImage.onload = drawTag; uploadedImage.src = ev.target.result; };
    r.readAsDataURL(f);
});
elClearImg.addEventListener('click', () => { uploadedImage = null; elUpload.value = ''; drawTag(); });

// ── Zoom podglądu ───────────────────────────────────────────────────────────────
const elZoom = document.getElementById('zoomRange');
if (elZoom) {
    elZoom.addEventListener('input', () => {
        document.getElementById('zoomVal').textContent = elZoom.value + '×';
        drawTag();
    });
}

// ── Tło podglądu (szachownica / ciemne / jasne) ─────────────────────────────────
const PREVIEW_BG = {
    checker: 'repeating-conic-gradient(#1c1c38 0% 25%, #111128 0% 50%) 0 0 / 16px 16px',
    dark:    '#0d0d1a',
    light:   '#e9e9f2',
};
document.querySelectorAll('[data-preview-bg]').forEach(btn => {
    btn.addEventListener('click', () => {
        const stage = document.getElementById('previewStage');
        if (stage) stage.style.background = PREVIEW_BG[btn.dataset.previewBg] || PREVIEW_BG.checker;
        document.querySelectorAll('[data-preview-bg]').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
    });
});

// ── Reset do ustawień domyślnych ────────────────────────────────────────────────
function resetAll() {
    Swal.fire({
        icon: 'warning', title: 'Zresetować ustawienia?',
        text: 'Wróci do wartości domyślnych (projekt i presety zostają).',
        showCancelButton: true, confirmButtonText: 'Resetuj', cancelButtonText: 'Anuluj',
        confirmButtonColor: '#dc3545', background: '#12122a', color: '#fff',
    }).then(res => {
        if (!res.isConfirmed) return;
        applySettings({
            text: 'VIP',
            bgS: '#424b8f', bgE: '#333d84', noBg: false,
            txtS: '#ffffff', txtE: '#c2c2c2', noTxt: true,
            radius: 0, icon: '', font: Object.keys(FONT_CONFIG)[0],
            iconPos: 'left', iconSize: 100, iconGap: 2, iconOffX: 0, iconOffY: 0,
            padH: 3, padV: 2, bgGradDir: 'h', txtGradDir: 'h',
            bgOutW: 1, bgOutC: '#252c5f',
            bgShdEn: true, bgShdX: 2, bgShdY: 2, bgShdC: '#000000',
            txtOutW: 0, txtOutC: '#000000',
            txtShdEn: false, txtShdX: 1, txtShdY: 1, txtShdC: '#000000',
        });
        uploadedImage = null;
        if (elUpload) elUpload.value = '';
        drawTag();
    });
}

// ── Loader: pokazuj "Ładowanie fontów..." dopóki się nie załadują ─────────────
function drawLoadingScreen() {
    canvas.width  = 200;
    canvas.height = 100;
    ctx.fillStyle = '#1a1a1a';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#888';
    ctx.font = 'bold 12px "Arial", sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('⏳ Ładowanie fontów...', canvas.width / 2, canvas.height / 2);
}

// Aktualizuj badge statusu fontów
function updateFontLoadStatus(loaded) {
    if (!elFontsLoadStatus) return;
    if (loaded) {
        elFontsLoadStatus.innerHTML = '<i class="bi bi-check-circle me-1"></i>Załadowane';
        elFontsLoadStatus.className = 'badge bg-success text-white';
    } else {
        elFontsLoadStatus.innerHTML = '<i class="bi bi-exclamation-triangle me-1"></i>Fallback';
        elFontsLoadStatus.className = 'badge bg-danger text-white';
    }
}

// Najpierw pokaż loader
drawLoadingScreen();

// Czekaj na załadowanie, max 5 sec dla bezpieczeństwa
const fontLoadPromise = document.fonts.ready;
const fontTimeoutPromise = new Promise(resolve => setTimeout(resolve, 5000));

Promise.race([fontLoadPromise, fontTimeoutPromise])
    .then(() => {
        console.log('✓ Czcionki załadowane');
        updateFontLoadStatus(true);
        drawTag();
    })
    .catch(() => {
        console.warn('⚠ Timeout załadowania fontów');
        updateFontLoadStatus(false);
        drawTag();
    });

// Re-render na każdą zmianę input
elText.addEventListener('input', () => { updateAllLabels(); updateShadowVisibility(); drawTag(); });

updateAllLabels();
updateShadowVisibility();
renderProject();

/* ══════════════════════════════════════════════════════════════════════════
   ROZSZERZENIA: Style bazowe · Emoji picker · Przedmioty MC · Paint Studio
   ══════════════════════════════════════════════════════════════════════════ */

// ── Kontroler modali: używa Bootstrap gdy dostępny, inaczej własny fallback ────
const Modal = (() => {
    let backdrop = null;
    const hasBs = () => window.bootstrap && bootstrap.Modal;
    function ensureBackdrop() {
        if (!backdrop) {
            backdrop = document.createElement('div');
            backdrop.style.cssText = 'position:fixed;inset:0;background:rgba(3,3,12,.72);z-index:1050;display:none;';
            document.body.appendChild(backdrop);
            backdrop.addEventListener('click', closeAll);
        }
        return backdrop;
    }
    function open(id) {
        const el = document.getElementById(id);
        if (!el) return;
        if (hasBs()) { bootstrap.Modal.getOrCreateInstance(el).show(); return; }
        ensureBackdrop().style.display = 'block';
        el.style.display = 'block';
        el.style.zIndex = 1060;
        el.classList.add('show');
        document.body.style.overflow = 'hidden';
    }
    function close(el) {
        if (hasBs()) { const i = bootstrap.Modal.getInstance(el); if (i) i.hide(); return; }
        el.style.display = 'none';
        el.classList.remove('show');
        if (!document.querySelector('.modal.show')) {
            if (backdrop) backdrop.style.display = 'none';
            document.body.style.overflow = '';
        }
    }
    function closeAll() { document.querySelectorAll('.modal.show').forEach(close); }
    return { open, close, closeAll };
})();
// Fallback: obsługa data-bs-dismiss oraz Esc TYLKO gdy brak Bootstrap JS
document.addEventListener('click', e => {
    if (window.bootstrap && bootstrap.Modal) return;
    const btn = e.target.closest('[data-bs-dismiss="modal"]');
    if (btn) { const m = btn.closest('.modal'); if (m) Modal.close(m); }
});
document.addEventListener('keydown', e => {
    if (window.bootstrap && bootstrap.Modal) return;
    if (e.key === 'Escape') Modal.closeAll();
});

// ── Wspólne: ustawianie ikony rangi ───────────────────────────────────────────
function updateIconChip() {
    const chip = document.getElementById('iconPreviewChip');
    const name = document.getElementById('iconPreviewName');
    if (!chip || !name) return;
    if (uploadedImage) {
        chip.innerHTML = `<img src="${uploadedImage.src}" style="width:24px;height:24px;image-rendering:pixelated;object-fit:contain;">`;
        name.textContent = uploadedImage._label || 'Własny obrazek';
    } else if (elIcon.value) {
        chip.textContent = elIcon.value;
        let lbl = 'Emoji';
        for (const o of elIcon.options) if (o.value === elIcon.value) { lbl = o.textContent.replace(/^\S+\s*/, '') || 'Emoji'; break; }
        name.textContent = lbl;
    } else {
        chip.textContent = '—';
        name.textContent = 'Brak';
    }
}
function setEmojiIcon(emoji, label) {
    uploadedImage = null;
    if (elUpload) elUpload.value = '';
    if (emoji && !Array.from(elIcon.options).some(o => o.value === emoji)) {
        const o = document.createElement('option');
        o.value = emoji; o.textContent = emoji + ' ' + (label || '');
        elIcon.appendChild(o);
    }
    elIcon.value = emoji;
    drawTag();
}
function setImageIcon(img, label) {
    img._label = label || 'Własny obrazek';
    uploadedImage = img;
    elIcon.value = '';
    if (elUpload) elUpload.value = '';
    drawTag();
}
function clearIcon() {
    uploadedImage = null;
    elIcon.value = '';
    if (elUpload) elUpload.value = '';
    drawTag();
}

// Przyciski źródeł ikony
document.getElementById('openEmojiPicker').addEventListener('click', openEmojiPicker);
document.getElementById('openItemPicker').addEventListener('click',  () => { buildItemGrid(); Modal.open('itemModal'); });
document.getElementById('openPaintStudio').addEventListener('click', () => { Paint.open(); Modal.open('paintModal'); });
document.getElementById('iconClearBtn').addEventListener('click', clearIcon);

// ── Renderowanie: przełączanie zakładek podglądu ──────────────────────────────
document.querySelectorAll('#renderTabs .picker-tab').forEach(t => t.addEventListener('click', () => {
    document.querySelectorAll('#renderTabs .picker-tab').forEach(x => x.classList.remove('active'));
    t.classList.add('active');
    document.querySelectorAll('[data-render-pane]').forEach(p => {
        p.style.display = (p.dataset.renderPane === t.dataset.render) ? '' : 'none';
    });
}));

// ── Style bazowe (presety wyglądu) ────────────────────────────────────────────
const STYLE_PRESETS = {
    classic: { bgS:'#424b8f', bgE:'#333d84', noBg:false, txtS:'#ffffff', txtE:'#c2c2c2', noTxt:true,
               radius:0, bgOutW:1, bgOutC:'#252c5f', bgShdEn:true, bgShdX:2, bgShdY:2, bgShdC:'#000000',
               txtOutW:0, txtShdEn:false, padH:3, padV:2 },
    pixel:   { bgS:'#ff2e97', bgE:'#00e5ff', noBg:false, txtS:'#0d0d1a', txtE:'#0d0d1a', noTxt:true,
               radius:0, bgOutW:1, bgOutC:'#0d0d1a', bgShdEn:false, txtOutW:1, txtOutC:'#ffffff',
               txtShdEn:false, padH:3, padV:2 },
    pill:    { bgS:'#7b5cff', bgE:'#3ad1c9', noBg:false, txtS:'#ffffff', txtE:'#eaf6ff', noTxt:true,
               radius:9, bgOutW:0, bgShdEn:false, txtOutW:0, txtShdEn:false, padH:5, padV:2 },
};
function applyStyle(name) {
    const preset = STYLE_PRESETS[name];
    if (!preset) return;
    applySettings({ ...getSettings(), ...preset });
    document.querySelectorAll('.style-card').forEach(c => c.classList.toggle('active', c.dataset.style === name));
}
document.querySelectorAll('.style-card').forEach(c => c.addEventListener('click', () => applyStyle(c.dataset.style)));

function roundRectPreview(c, x, y, w, h, r) {
    r = Math.min(r, w / 2, h / 2);
    c.beginPath();
    c.moveTo(x + r, y);
    c.arcTo(x + w, y, x + w, y + h, r);
    c.arcTo(x + w, y + h, x, y + h, r);
    c.arcTo(x, y + h, x, y, r);
    c.arcTo(x, y, x + w, y, r);
    c.closePath();
}
function drawStylePreview(cv, p) {
    const c = cv.getContext('2d');
    const W = cv.width, H = cv.height, pad = 5;
    const r = p.radius >= 8 ? 15 : (p.radius ? p.radius + 2 : 3);
    c.clearRect(0, 0, W, H);
    const g = c.createLinearGradient(pad, 0, W - pad, 0);
    g.addColorStop(0, p.bgS); g.addColorStop(1, p.bgE);
    roundRectPreview(c, pad, pad, W - 2 * pad, H - 2 * pad, r);
    c.fillStyle = g; c.fill();
    if (p.bgOutW) { c.lineWidth = 2; c.strokeStyle = p.bgOutC; c.stroke(); }
    c.fillStyle = p.txtS;
    c.font = 'bold 20px "Pixelify Sans", monospace';
    c.textAlign = 'center'; c.textBaseline = 'middle';
    if (p.txtOutW) { c.lineWidth = 2; c.strokeStyle = p.txtOutC || '#fff'; c.strokeText('VIP', W / 2, H / 2 + 1); }
    c.fillText('VIP', W / 2, H / 2 + 1);
}
function renderStyleCards() {
    document.querySelectorAll('canvas[data-style-preview]').forEach(cv => {
        const preset = STYLE_PRESETS[cv.dataset.stylePreview];
        if (preset) drawStylePreview(cv, preset);
    });
}
// Rysuj po załadowaniu fontu Pixelify (dla ładnego podglądu), i od razu
document.fonts.load('bold 20px "Pixelify Sans"').then(renderStyleCards).catch(() => {});
renderStyleCards();

// ── EMOJI PICKER (pełna baza z API + obrazki Twemoji) ─────────────────────────
// Emoji renderujemy jako obrazki Twemoji (spójne na każdym systemie) zamiast
// natywnych znaków (które bywają kwadracikami). Po wybraniu emoji jest wczytywane
// jako obrazek PNG (crossOrigin) → rysuje się i eksportuje bez problemu.
const TWEMOJI_CDN = 'https://cdn.jsdelivr.net/gh/jdecked/twemoji@15.1.0/assets/72x72/';
const EMOJI_DATA_URL = 'https://cdn.jsdelivr.net/npm/unicode-emoji-json@0.6.0/data-by-group.json';
const EMOJI_GROUP_PL = {
    'Smileys & Emotion':'Buźki', 'People & Body':'Ludzie', 'Animals & Nature':'Natura',
    'Food & Drink':'Jedzenie', 'Travel & Places':'Miejsca', 'Activities':'Aktywności',
    'Objects':'Przedmioty', 'Symbols':'Symbole', 'Flags':'Flagi',
};
// Fallback (offline) – gdyby API było niedostępne
const EMOJI_FALLBACK = [
    {e:'👑',n:'crown korona',g:'Symbole'}, {e:'🛡️',n:'shield tarcza',g:'Symbole'},
    {e:'⚔️',n:'swords miecze',g:'Symbole'}, {e:'⚡',n:'zap błyskawica',g:'Symbole'},
    {e:'💎',n:'diamond gem diament',g:'Symbole'}, {e:'⭐',n:'star gwiazda',g:'Symbole'},
    {e:'🏆',n:'trophy puchar',g:'Aktywności'}, {e:'🔥',n:'fire ogień',g:'Natura'},
    {e:'🐉',n:'dragon smok',g:'Natura'}, {e:'💀',n:'skull czaszka',g:'Buźki'},
    {e:'❤️',n:'heart serce',g:'Symbole'}, {e:'✨',n:'sparkles iskry',g:'Symbole'},
];

// Zamiana emoji na nazwę pliku Twemoji (reguła twemoji: usuń FE0F, chyba że jest ZWJ)
function twemojiCode(str) {
    const s = str.indexOf('\u200D') < 0 ? str.replace(/\uFE0F/g, '') : str;
    const pts = [];
    for (const ch of s) pts.push(ch.codePointAt(0).toString(16));
    return pts.join('-');
}
function twemojiUrl(emoji) { return TWEMOJI_CDN + twemojiCode(emoji) + '.png'; }

let EMOJI_DATA = null;              // [{e, n, g}]
let emojiCat   = 'Wszystkie';
let emojiLoading = false;

async function ensureEmojiData() {
    if (EMOJI_DATA) return EMOJI_DATA;
    if (emojiLoading) return null;
    emojiLoading = true;
    try {
        const res = await fetch(EMOJI_DATA_URL);
        if (!res.ok) throw new Error('HTTP ' + res.status);
        const byGroup = await res.json();
        const out = [];
        // Struktura API: tablica grup [{ name, slug, emojis:[{emoji,name,slug,skin_tone_support}] }]
        for (const grp of byGroup) {
            const g = EMOJI_GROUP_PL[grp.name] || grp.name;
            for (const it of (grp.emojis || [])) {
                out.push({ e: it.emoji, n: (it.name + ' ' + (it.slug || '')).toLowerCase(), g });
            }
        }
        EMOJI_DATA = out;
    } catch (err) {
        console.warn('Emoji API niedostępne, używam listy zapasowej:', err);
        EMOJI_DATA = EMOJI_FALLBACK.slice();
    }
    emojiLoading = false;
    return EMOJI_DATA;
}

function buildEmojiTabs() {
    if (!EMOJI_DATA) return;
    const cats = ['Wszystkie', ...new Set(EMOJI_DATA.map(x => x.g))];
    const wrap = document.getElementById('emojiTabs');
    wrap.innerHTML = cats.map(c => `<span class="picker-tab ${c === emojiCat ? 'active' : ''}" data-ec="${c}">${c}</span>`).join('');
    wrap.querySelectorAll('.picker-tab').forEach(t => t.addEventListener('click', () => {
        emojiCat = t.dataset.ec; buildEmojiTabs(); buildEmojiGrid();
    }));
}

function buildEmojiGrid() {
    const grid = document.getElementById('emojiGrid');
    if (!EMOJI_DATA) { grid.innerHTML = '<div class="text-muted small p-2"><span class="spinner-border spinner-border-sm me-2"></span>Ładowanie emoji...</div>'; return; }
    const q = (document.getElementById('emojiSearch').value || '').toLowerCase().trim();
    const list = EMOJI_DATA
        .filter(x => (emojiCat === 'Wszystkie' || x.g === emojiCat) && (!q || x.n.includes(q)));
    grid.innerHTML = list.map(x =>
        `<div class="picker-cell" title="${x.n}" data-emoji="${x.e}">
            <img loading="lazy" src="${twemojiUrl(x.e)}" alt="${x.e}"
                 onerror="this.closest('.picker-cell').style.display='none'">
        </div>`).join('') || '<div class="text-muted small p-2">Brak wyników</div>';
    grid.querySelectorAll('.picker-cell').forEach(cell => cell.addEventListener('click', () => {
        pickEmoji(cell.dataset.emoji, cell.title);
    }));
}

// Wczytaj emoji jako obrazek Twemoji (niezawodny render + eksport na canvasie)
function pickEmoji(emoji, label) {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => { setImageIcon(img, (label || 'emoji').split(' ')[0]); Modal.closeAll(); };
    img.onerror = () => { setEmojiIcon(emoji, label); Modal.closeAll(); };  // awaryjnie natywne
    img.src = twemojiUrl(emoji);
}

async function openEmojiPicker() {
    Modal.open('emojiModal');
    buildEmojiGrid();                 // pokaż spinner
    await ensureEmojiData();
    buildEmojiTabs();
    buildEmojiGrid();
}
document.getElementById('emojiSearch').addEventListener('input', buildEmojiGrid);

// ── PRZEDMIOTY MINECRAFT ──────────────────────────────────────────────────────
// Tekstury z repo misode/mcmeta (CORS przez jsDelivr → canvas nie jest "taint")
const ITEM_CDN = 'https://cdn.jsdelivr.net/gh/misode/mcmeta@1.21-assets/assets/minecraft/textures/item/';
const ITEMS = [
    {id:'diamond_sword',n:'Diamentowy miecz'}, {id:'netherite_sword',n:'Netherytowy miecz'},
    {id:'golden_sword',n:'Złoty miecz'}, {id:'iron_sword',n:'Żelazny miecz'}, {id:'wooden_sword',n:'Drewniany miecz'},
    {id:'diamond_axe',n:'Diamentowy topór'}, {id:'netherite_axe',n:'Netherytowy topór'}, {id:'diamond_pickaxe',n:'Diamentowy kilof'},
    {id:'netherite_pickaxe',n:'Netherytowy kilof'}, {id:'trident',n:'Trójząb'}, {id:'bow',n:'Łuk'}, {id:'crossbow_standby',n:'Kusza'},
    {id:'shield',n:'Tarcza'}, {id:'diamond',n:'Diament'}, {id:'emerald',n:'Szmaragd'}, {id:'netherite_ingot',n:'Sztabka netherytu'},
    {id:'gold_ingot',n:'Sztabka złota'}, {id:'iron_ingot',n:'Sztabka żelaza'}, {id:'copper_ingot',n:'Sztabka miedzi'},
    {id:'nether_star',n:'Gwiazda netheru'}, {id:'diamond_helmet',n:'Diamentowy hełm'}, {id:'diamond_chestplate',n:'Diamentowy napierśnik'},
    {id:'netherite_helmet',n:'Netherytowy hełm'}, {id:'golden_apple',n:'Złote jabłko'}, {id:'enchanted_golden_apple',n:'Zaklęte złote jabłko'},
    {id:'apple',n:'Jabłko'}, {id:'golden_carrot',n:'Złota marchewka'}, {id:'cooked_beef',n:'Stek'}, {id:'bread',n:'Chleb'},
    {id:'cake',n:'Ciasto'}, {id:'cookie',n:'Ciasteczko'}, {id:'ender_pearl',n:'Perła endu'}, {id:'ender_eye',n:'Oko endu'},
    {id:'blaze_rod',n:'Płomienna różdżka'}, {id:'blaze_powder',n:'Płomienny proszek'}, {id:'experience_bottle',n:'Butelka doświadczenia'},
    {id:'potion',n:'Mikstura'}, {id:'splash_potion',n:'Mikstura rzucana'}, {id:'totem_of_undying',n:'Totem nieśmiertelności'},
    {id:'elytra',n:'Elytra'}, {id:'fire_charge',n:'Ognisty ładunek'}, {id:'firework_rocket',n:'Fajerwerka'},
    {id:'name_tag',n:'Tabliczka z imieniem'}, {id:'book',n:'Książka'}, {id:'enchanted_book',n:'Zaklęta książka'},
    {id:'writable_book',n:'Książka i pióro'}, {id:'paper',n:'Papier'}, {id:'map',n:'Mapa'}, {id:'compass_16',n:'Kompas'},
    {id:'clock_00',n:'Zegar'}, {id:'redstone',n:'Redstone'}, {id:'glowstone_dust',n:'Pył jasnogłazu'}, {id:'gunpowder',n:'Proch'},
    {id:'bone',n:'Kość'}, {id:'string',n:'Nić'}, {id:'feather',n:'Pióro'}, {id:'leather',n:'Skóra'},
    {id:'stick',n:'Patyk'}, {id:'coal',n:'Węgiel'}, {id:'charcoal',n:'Węgiel drzewny'}, {id:'flint',n:'Krzemień'},
    {id:'egg',n:'Jajko'}, {id:'snowball',n:'Śnieżka'}, {id:'slime_ball',n:'Kula szlamu'}, {id:'honey_bottle',n:'Butelka miodu'},
    {id:'amethyst_shard',n:'Odłamek ametystu'}, {id:'echo_shard',n:'Odłamek echa'}, {id:'heart_of_the_sea',n:'Serce morza'},
    {id:'nautilus_shell',n:'Muszla łodzika'}, {id:'music_disc_cat',n:'Płyta muzyczna'}, {id:'lead',n:'Smycz'},
];
let itemsBuilt = false;
function buildItemGrid() {
    if (itemsBuilt) { filterItems(); return; }
    const grid = document.getElementById('itemGrid');
    grid.innerHTML = ITEMS.map(it =>
        `<div class="picker-cell" title="${it.n}" data-item="${it.id}">
            <img loading="lazy" src="${ITEM_CDN}${it.id}.png" alt="${it.n}"
                 onerror="this.closest('.picker-cell').style.display='none'">
        </div>`).join('');
    grid.querySelectorAll('.picker-cell').forEach(cell => cell.addEventListener('click', () => {
        loadItemIcon(cell.dataset.item, cell.title);
    }));
    itemsBuilt = true;
}
function filterItems() {
    const q = (document.getElementById('itemSearch').value || '').toLowerCase().trim();
    document.querySelectorAll('#itemGrid .picker-cell').forEach(c => {
        if (c.querySelector('img') && c.querySelector('img').dataset.broken) return;
        const match = !q || c.title.toLowerCase().includes(q) || (c.dataset.item || '').includes(q);
        c.style.display = match ? '' : 'none';
    });
}
document.getElementById('itemSearch').addEventListener('input', filterItems);
function loadItemIcon(id, label) {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => { setImageIcon(img, label); Modal.closeAll(); };
    img.onerror = () => Swal.fire({ icon:'error', title:'Nie udało się załadować tekstury', timer:1500, showConfirmButton:false });
    img.src = ITEM_CDN + id + '.png';
}

// ── PAINT STUDIO ──────────────────────────────────────────────────────────────
const Paint = (function () {
    const cv   = document.getElementById('paintCanvas');
    const pctx = cv.getContext('2d');
    const prev = document.getElementById('paintPreview');
    const pv   = prev.getContext('2d');
    let N = 16, cell = cv.width / N;
    let grid = blankGrid(N);
    let tool = 'brush', color = '#4b6bff', brush = 1;
    let mirror = false, showGrid = true;
    let drawing = false, startPt = null, snapshot = null, lastPt = null;
    const undo = [], redo = [];

    const PALETTE = ['#000000','#ffffff','#7f7f7f','#c0392b','#e74c3c','#e67e22','#f1c40f',
                     '#2ecc71','#1abc9c','#3498db','#4b6bff','#9b59b6','#8e44ad','#e84393',
                     '#5a3921','#00e5ff','#ff2e97','#0d0d1a'];

    function blankGrid(n) { const g = []; for (let y = 0; y < n; y++) g.push(new Array(n).fill(null)); return g; }
    function clone(g) { return g.map(r => r.slice()); }
    function pushUndo() { undo.push(clone(grid)); if (undo.length > 80) undo.shift(); redo.length = 0; }

    function render() {
        pctx.clearRect(0, 0, cv.width, cv.height);
        pctx.imageSmoothingEnabled = false;
        for (let y = 0; y < N; y++) for (let x = 0; x < N; x++)
            if (grid[y][x]) { pctx.fillStyle = grid[y][x]; pctx.fillRect(x * cell, y * cell, cell, cell); }
        if (showGrid) {
            pctx.strokeStyle = 'rgba(255,255,255,.09)'; pctx.lineWidth = 1;
            for (let i = 0; i <= N; i++) {
                pctx.beginPath(); pctx.moveTo(i * cell + .5, 0); pctx.lineTo(i * cell + .5, cv.height); pctx.stroke();
                pctx.beginPath(); pctx.moveTo(0, i * cell + .5); pctx.lineTo(cv.width, i * cell + .5); pctx.stroke();
            }
        }
        if (mirror) {
            pctx.strokeStyle = 'rgba(75,107,255,.6)'; pctx.lineWidth = 2;
            pctx.beginPath(); pctx.moveTo(cv.width / 2, 0); pctx.lineTo(cv.width / 2, cv.height); pctx.stroke();
        }
        renderPreview();
    }
    function renderPreview() {
        prev.width = N; prev.height = N;
        pv.clearRect(0, 0, N, N);
        for (let y = 0; y < N; y++) for (let x = 0; x < N; x++)
            if (grid[y][x]) { pv.fillStyle = grid[y][x]; pv.fillRect(x, y, 1, 1); }
    }

    function setPixel(x, y, col) { if (x < 0 || y < 0 || x >= N || y >= N) return; grid[y][x] = col; }
    function plot(x, y, col) {
        const o = Math.floor((brush - 1) / 2);
        for (let dy = 0; dy < brush; dy++) for (let dx = 0; dx < brush; dx++) {
            const px = x + dx - o, py = y + dy - o;
            setPixel(px, py, col);
            if (mirror) setPixel(N - 1 - px, py, col);
        }
    }
    function line(x0, y0, x1, y1, col) {
        const dx = Math.abs(x1 - x0), dy = Math.abs(y1 - y0);
        const sx = x0 < x1 ? 1 : -1, sy = y0 < y1 ? 1 : -1;
        let err = dx - dy;
        for (;;) {
            plot(x0, y0, col);
            if (x0 === x1 && y0 === y1) break;
            const e2 = 2 * err;
            if (e2 > -dy) { err -= dy; x0 += sx; }
            if (e2 < dx)  { err += dx; y0 += sy; }
        }
    }
    function rect(x0, y0, x1, y1, col) {
        line(x0, y0, x1, y0, col); line(x0, y1, x1, y1, col);
        line(x0, y0, x0, y1, col); line(x1, y0, x1, y1, col);
    }
    function fill(x, y, col) {
        const target = grid[y][x];
        if (target === col) return;
        const stack = [[x, y]];
        while (stack.length) {
            const [cx, cy] = stack.pop();
            if (cx < 0 || cy < 0 || cx >= N || cy >= N) continue;
            if (grid[cy][cx] !== target) continue;
            grid[cy][cx] = col;
            stack.push([cx + 1, cy], [cx - 1, cy], [cx, cy + 1], [cx, cy - 1]);
        }
    }
    function stampText(cx, cy) {
        const t = (document.getElementById('stampText').value || 'A');
        const off = document.createElement('canvas'); off.width = N; off.height = N;
        const o = off.getContext('2d');
        o.fillStyle = color; o.textAlign = 'center'; o.textBaseline = 'middle';
        let fs = N; o.font = `bold ${fs}px monospace`;
        while (o.measureText(t).width > N - 1 && fs > 4) { fs--; o.font = `bold ${fs}px monospace`; }
        o.fillText(t, N / 2, N / 2);
        const id = o.getImageData(0, 0, N, N).data;
        for (let y = 0; y < N; y++) for (let x = 0; x < N; x++)
            if (id[(y * N + x) * 4 + 3] > 128) grid[y][x] = color;
    }
    function importImage(img) {
        pushUndo();
        const off = document.createElement('canvas'); off.width = N; off.height = N;
        const o = off.getContext('2d'); o.imageSmoothingEnabled = false;
        o.drawImage(img, 0, 0, N, N);
        const id = o.getImageData(0, 0, N, N).data;
        for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
            const i = (y * N + x) * 4;
            grid[y][x] = id[i + 3] > 40
                ? '#' + [id[i], id[i + 1], id[i + 2]].map(v => v.toString(16).padStart(2, '0')).join('')
                : null;
        }
        render();
    }

    function pos(e) {
        const r = cv.getBoundingClientRect();
        const x = Math.floor((e.clientX - r.left) / r.width * N);
        const y = Math.floor((e.clientY - r.top) / r.height * N);
        return { x: Math.max(0, Math.min(N - 1, x)), y: Math.max(0, Math.min(N - 1, y)) };
    }

    function down(e) {
        e.preventDefault();
        const { x, y } = pos(e);
        if (tool === 'pick') { if (grid[y][x]) { color = grid[y][x]; document.getElementById('paintColor').value = color; syncSwatch(); } return; }
        if (tool === 'fill') { pushUndo(); fill(x, y, color); render(); return; }
        if (tool === 'stamp') { pushUndo(); stampText(x, y); render(); return; }
        pushUndo();
        drawing = true; startPt = { x, y }; lastPt = { x, y }; snapshot = clone(grid);
        if (tool === 'brush') plot(x, y, color);
        else if (tool === 'eraser') plot(x, y, null);
        render();
    }
    function move(e) {
        const { x, y } = pos(e);
        const cc = document.getElementById('paintCoords'); if (cc) cc.textContent = x + ',' + y;
        if (!drawing) return;
        if (tool === 'brush' || tool === 'eraser') {
            line(lastPt.x, lastPt.y, x, y, tool === 'eraser' ? null : color);
            lastPt = { x, y }; render();
        } else if (tool === 'line') {
            grid = clone(snapshot); line(startPt.x, startPt.y, x, y, color); render();
        } else if (tool === 'rect') {
            grid = clone(snapshot); rect(startPt.x, startPt.y, x, y, color); render();
        } else if (tool === 'move') {
            const dx = x - startPt.x, dy = y - startPt.y;
            grid = blankGrid(N);
            for (let yy = 0; yy < N; yy++) for (let xx = 0; xx < N; xx++)
                if (snapshot[yy][xx]) setPixel(xx + dx, yy + dy, snapshot[yy][xx]);
            render();
        }
    }
    function up() { drawing = false; startPt = null; snapshot = null; lastPt = null; }

    cv.addEventListener('pointerdown', down);
    cv.addEventListener('pointermove', move);
    window.addEventListener('pointerup', up);

    function syncSwatch() {
        document.querySelectorAll('#paletteSwatches .swatch').forEach(s =>
            s.classList.toggle('active', s.dataset.col.toLowerCase() === color.toLowerCase()));
    }
    function buildPalette() {
        const wrap = document.getElementById('paletteSwatches');
        wrap.innerHTML = PALETTE.map(c => `<div class="swatch" data-col="${c}" style="background:${c}"></div>`).join('');
        wrap.querySelectorAll('.swatch').forEach(s => s.addEventListener('click', () => {
            color = s.dataset.col; document.getElementById('paintColor').value = color; syncSwatch();
        }));
        syncSwatch();
    }
    function setTool(t) {
        if (t === 'clear') { pushUndo(); grid = blankGrid(N); render(); highlight('brush'); tool = 'brush'; toggleStampRow(); return; }
        if (t === 'mirror') {
            mirror = !mirror;
            document.getElementById('mirrorEnabled').checked = mirror;
            render(); highlight('brush'); tool = 'brush'; toggleStampRow(); return;
        }
        tool = t; highlight(t); toggleStampRow();
    }
    function highlight(t) {
        document.querySelectorAll('#paintTools .paint-tool').forEach(el =>
            el.classList.toggle('active', el.dataset.tool === t));
    }
    function toggleStampRow() {
        document.getElementById('stampTextRow').style.display = tool === 'stamp' ? '' : 'none';
    }

    // Wiring
    document.querySelectorAll('#paintTools .paint-tool').forEach(el =>
        el.addEventListener('click', () => setTool(el.dataset.tool)));
    document.getElementById('brushSize').addEventListener('input', e => {
        brush = parseInt(e.target.value); document.getElementById('brushSizeVal').textContent = brush + ' px';
    });
    document.getElementById('paintColor').addEventListener('input', e => { color = e.target.value; syncSwatch(); });
    document.getElementById('mirrorEnabled').addEventListener('change', e => { mirror = e.target.checked; render(); });
    document.getElementById('paintShowGrid').addEventListener('change', e => { showGrid = e.target.checked; render(); });
    document.getElementById('paintGridSize').addEventListener('change', e => {
        N = parseInt(e.target.value); cell = cv.width / N; grid = blankGrid(N);
        undo.length = 0; redo.length = 0;
        document.getElementById('gridSizeVal').textContent = N + '×' + N; render();
    });
    document.getElementById('paintUndo').addEventListener('click', () => {
        if (!undo.length) return; redo.push(clone(grid)); grid = undo.pop(); render();
    });
    document.getElementById('paintRedo').addEventListener('click', () => {
        if (!redo.length) return; undo.push(clone(grid)); grid = redo.pop(); render();
    });
    document.getElementById('paintImport').addEventListener('change', e => {
        const f = e.target.files[0]; if (!f) return;
        const r = new FileReader();
        r.onload = ev => { const im = new Image(); im.onload = () => importImage(im); im.src = ev.target.result; };
        r.readAsDataURL(f);
        e.target.value = '';
    });
    document.getElementById('paintApply').addEventListener('click', () => {
        const off = document.createElement('canvas'); off.width = N; off.height = N;
        const o = off.getContext('2d');
        let any = false;
        for (let y = 0; y < N; y++) for (let x = 0; x < N; x++)
            if (grid[y][x]) { o.fillStyle = grid[y][x]; o.fillRect(x, y, 1, 1); any = true; }
        if (!any) { Swal.fire({ icon:'warning', title:'Płótno jest puste', timer:1400, showConfirmButton:false }); return; }
        const img = new Image();
        img.onload = () => { setImageIcon(img, 'Paint Studio'); Modal.closeAll(); };
        img.src = off.toDataURL('image/png');
    });

    function open() { buildPalette(); render(); }
    return { open };
})();

renderStyleCards();
</script>

</main>

<footer id="footer" class="footer accent-background">

    <div class="container footer-top">
        <div class="row gy-4">
            <div class="col-lg-6 col-md-12 footer-about">
                <a href="index.html" class="logo d-flex align-items-center">
                    <span class="sitename">
                        <h1 class="sitename">Craft<span>List</span>.pl</h1>
                    </span>
                </a>
                <p>Szukasz skutecznej reklamy serwera Minecraft? Nasza lista serwerów Minecraft łączy innowacyjne funkcje z dynamiczną prezentacją Twojego serwera. Dodaj swój serwer Minecraft za darmo, zbieraj głosy, zyskaj widoczność i przyciągnij nowych graczy. Wspieramy serwery survival, skyblock, minigry i wiele innych trybów. Promuj serwer Minecraft łatwo i skutecznie – dołącz do najlepszych!</p>
                <!--<div class="social-links d-flex mt-4">
                    <a href=""><i class="bi bi-twitter-x"></i></a>
                    <a href=""><i class="bi bi-facebook"></i></a>
                    <a href=""><i class="bi bi-instagram"></i></a>
                    <a href=""><i class="bi bi-linkedin"></i></a>
                </div>-->
            </div>

            <div class="col-lg-3 col-6 footer-links">
                <h4>Przydatne linki</h4>
                <ul>
                    <li><a href="glowna">Strona Główna <i class="bi bi-link-45deg"></i></a></li>
                    <!--<li><a href="onas">O nas</a></li>-->
                    <!--<li><a href="uslugi">Usługi</a></li>
                    <li><a href="warunki">Warunki usług</a></li>-->
                    <li><a href="polityka-prywatnosci">Polityka prywatności <i class="bi bi-link-45deg"></i></a></li>
                    <li><a href="polityka-plikow-cookies">Polityka Plików Cookie <i class="bi bi-link-45deg"></i></a></li>
                    <li><a href="plugin">Konfiguracja pluginu <i class="bi bi-link-45deg"></i></a></li>
                    <li><a href="webhooki">Konfiguracja webhooków <i class="bi bi-link-45deg"></i></a></li>
                </ul>
            </div>

            <!--<div class="col-lg-2 col-6 footer-links">
                <h4>Our Services</h4>
                <ul>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web Development</a></li>
                    <li><a href="#">Product Management</a></li>
                    <li><a href="#">Marketing</a></li>
                    <li><a href="#">Graphic Design</a></li>
                </ul>
            </div>-->


            <div class="col-lg-3 col-md-12 footer-contact text-center text-md-start">
                <h4>Kontakt</h4>
                <p><strong>Email:</strong> <span>kontakt@craftlist.pl</span></p>
            </div>


        </div>
    </div>

    <div class="container copyright text-center mt-4">
        <div class="row gy-4">
            <div class="col-lg-6 col-6 footer-links">
                <h4>Szukaj po tagach</h4>
                                    <a href="/serwer_szukaj_tag_Anarchia-SMP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Anarchia-SMP</span></a>
                                    <a href="/serwer_szukaj_tag_Anarchy"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Anarchy</span></a>
                                    <a href="/serwer_szukaj_tag_Annihilation"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Annihilation</span></a>
                                    <a href="/serwer_szukaj_tag_BedWars"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">BedWars</span></a>
                                    <a href="/serwer_szukaj_tag_BlockParty"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">BlockParty</span></a>
                                    <a href="/serwer_szukaj_tag_BoxPvP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">BoxPvP</span></a>
                                    <a href="/serwer_szukaj_tag_CashBlock"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">CashBlock</span></a>
                                    <a href="/serwer_szukaj_tag_Caveblock"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Caveblock</span></a>
                                    <a href="/serwer_szukaj_tag_ChunkBlock"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">ChunkBlock</span></a>
                                    <a href="/serwer_szukaj_tag_ChestPVP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">ChestPVP</span></a>
                                    <a href="/serwer_szukaj_tag_Creative"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Creative</span></a>
                                    <a href="/serwer_szukaj_tag_Duels"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Duels</span></a>
                                    <a href="/serwer_szukaj_tag_Dzialki"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Dzialki</span></a>
                                    <a href="/serwer_szukaj_tag_Earth-SMP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Earth-SMP</span></a>
                                    <a href="/serwer_szukaj_tag_EggWars"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">EggWars</span></a>
                                    <a href="/serwer_szukaj_tag_Ekonomia"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Ekonomia</span></a>
                                    <a href="/serwer_szukaj_tag_Factions"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Factions</span></a>
                                    <a href="/serwer_szukaj_tag_Freebuild"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Freebuild</span></a>
                                    <a href="/serwer_szukaj_tag_Gildie"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Gildie</span></a>
                                    <a href="/serwer_szukaj_tag_Hardcore"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Hardcore</span></a>
                                    <a href="/serwer_szukaj_tag_Hide-n-Seek"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Hide-n-Seek</span></a>
                                    <a href="/serwer_szukaj_tag_Hunger-Games"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Hunger-Games</span></a>
                                    <a href="/serwer_szukaj_tag_Inne"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Inne</span></a>
                                    <a href="/serwer_szukaj_tag_KitPVP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">KitPVP</span></a>
                                    <a href="/serwer_szukaj_tag_Lifesteal SMP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Lifesteal SMP</span></a>
                                    <a href="/serwer_szukaj_tag_MasterBuilders"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">MasterBuilders</span></a>
                                    <a href="/serwer_szukaj_tag_Mega-Enchant"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Mega-Enchant</span></a>
                                    <a href="/serwer_szukaj_tag_MegaDrop"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">MegaDrop</span></a>
                                    <a href="/serwer_szukaj_tag_MiniGames"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">MiniGames</span></a>
                                    <a href="/serwer_szukaj_tag_Mody"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Mody</span></a>
                                    <a href="/serwer_szukaj_tag_Murder-Mystery"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Murder-Mystery</span></a>
                                    <a href="/serwer_szukaj_tag_Oneblock"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Oneblock</span></a>
                                    <a href="/serwer_szukaj_tag_Paintball"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Paintball</span></a>
                                    <a href="/serwer_szukaj_tag_Parkour"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Parkour</span></a>
                                    <a href="/serwer_szukaj_tag_Prison"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Prison</span></a>
                                    <a href="/serwer_szukaj_tag_PvP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">PvP</span></a>
                                    <a href="/serwer_szukaj_tag_PvP-Arena"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">PvP-Arena</span></a>
                                    <a href="/serwer_szukaj_tag_PvP-Practice"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">PvP-Practice</span></a>
                                    <a href="/serwer_szukaj_tag_RealLife"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">RealLife</span></a>
                                    <a href="/serwer_szukaj_tag_Roleplay"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Roleplay</span></a>
                                    <a href="/serwer_szukaj_tag_RPG"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">RPG</span></a>
                                    <a href="/serwer_szukaj_tag_RPG-Quest"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">RPG-Quest</span></a>
                                    <a href="/serwer_szukaj_tag_SkyBlock"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">SkyBlock</span></a>
                                    <a href="/serwer_szukaj_tag_SkyGen"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">SkyGen</span></a>
                                    <a href="/serwer_szukaj_tag_SkySurvival"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">SkySurvival</span></a>
                                    <a href="/serwer_szukaj_tag_SkyWars"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">SkyWars</span></a>
                                    <a href="/serwer_szukaj_tag_SMP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">SMP</span></a>
                                    <a href="/serwer_szukaj_tag_Spleef"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Spleef</span></a>
                                    <a href="/serwer_szukaj_tag_Survival"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Survival</span></a>
                                    <a href="/serwer_szukaj_tag_SurvivalGames"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">SurvivalGames</span></a>
                                    <a href="/serwer_szukaj_tag_TNT-Run"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">TNT-Run</span></a>
                                    <a href="/serwer_szukaj_tag_UHC"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">UHC</span></a>
                                    <a href="/serwer_szukaj_tag_UHC-Champions"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">UHC-Champions</span></a>
                                    <a href="/serwer_szukaj_tag_Vanilla"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Vanilla</span></a>
                                    <a href="/serwer_szukaj_tag_WarZ"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">WarZ</span></a>
                                    <a href="/serwer_szukaj_tag_WaterBlock"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">WaterBlock</span></a>
                                    <a href="/serwer_szukaj_tag_EasyHC"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">EasyHC</span></a>
                            </div>

            <div class="col-lg-6 col-6 footer-links">
                <h4>Szukaj po wersji</h4>
                                    <a href="/serwer_szukaj_wer_26.1.11">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            26.1.11                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_26.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            26.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.11">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.11                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.10">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.10                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.9">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.9                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.8">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.8                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.7">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.7                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.6">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.6                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20.6">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20.6                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.19.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.19.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.19.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.19.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.19.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.19.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.19.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.19.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.19">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.19                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.18.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.18.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.18.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.18.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.18">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.18                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.17.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.17.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.17">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.17                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.16.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.16.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.16.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.16.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.16.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.16.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.16.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.16.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.16.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.16.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.16">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.16                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.15.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.15.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.15.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.15.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.15">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.15                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.14.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.14.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.14.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.14.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.14.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.14.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.14.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.14.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.14">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.14                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.13.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.13.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.13.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.13.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.13">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.13                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.12.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.12.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.12.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.12.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.12">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.12                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.11.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.11.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.11.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.11.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.11">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.11                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.10.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.10.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.10.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.10.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.10">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.10                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.9.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.9.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.9.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.9.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.9.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.9.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.9.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.9.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.9">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.9                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.9">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.9                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.8">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.8                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.7">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.7                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.6">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.6                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.10">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.10                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.9">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.9                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.8">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.8                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.7">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.7                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.6">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.6                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.6.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.6.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.6.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.6.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.6.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.6.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.5.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.5.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.5.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.5.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.4.7">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.4.7                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.4.6">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.4.6                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.4.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.4.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.4.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.4.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.4.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.4.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.3.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.3.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.3.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.3.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.2.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.2.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.2.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.2.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.2.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.2.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.2.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.2.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.2.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.2.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.0.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.0.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.0.0">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.0.0                        </span>
                    </a>
                
            </div>
        </div>
        <div class="row gy-4 copyright">
            <p>© <span>Copyright</span> <strong class="px-1 sitename" style="font-size: 19px;margin: 0;font-weight: 700;font-family: var(--logo-font);color: var(--heading-color);">Craft<span style="font-size: 19px;margin-left: -2px;font-family: var(--logo-font);color: var(--nav-hover-color);">List</span>.pl</strong> <span>Wszelkie prawa zastrzeżone</span></p>
            <div class="credits">
                <!-- All the links in the footer should remain intact. -->
                <!-- You can delete the links only if you've purchased the pro version. -->
                <!-- Licensing information: https://bootstrapmade.com/license/ -->
                <!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
                Zaprojektowany przez <a href="https://bootstrapmade.com/">BootstrapMade</a> z mocnymi zmianami przez właściciela CraftList.pl
            </div>
        </div>
    </div>

</footer>

<!-- Baner cookies -->
<div id="cookie-banner" class="fixed-bottom bg-dark text-white p-3 d-none" style="z-index: 999990;">
    <div class="container d-flex justify-content-between align-items-center">
        <span>
            Używamy plików cookie, aby zapewnić najlepsze działanie strony.
            <a href="/polityka-plikow-cookies" class="text-decoration-underline text-info">Dowiedz się więcej</a>
        </span>
        <button id="accept-cookies" class="btn btn-primary btn-sm ms-3">Akceptuję</button>
    </div>
</div>

<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

<!-- Preloader -->
<div id="preloader"></div>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7176552154318713"
    crossorigin="anonymous"></script>

<!-- Vendor JS Files -->
<!--<script src="/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        setTimeout(() => {
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            tooltipTriggerList.forEach(el => {
                new bootstrap.Tooltip(el);
            });
        }, 100); // małe opóźnienie na wstawienie DOM

    });
</script>


<script src="/assets/vendor/php-email-form/validate.js"></script>
<script src="/assets/vendor/aos/aos.js"></script>
<script src="/assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="/assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="/assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="/assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>

<!-- Main JS File -->
<script src="/assets/js/main.js"></script>
<!--<script>
    // Funkcja, która dodaje (lub aktualizuje) parametr w URL-u
    function updateUrl(url, paramName, paramValue) {

        // Pomijamy YouTube oraz base64 (data:) linki
        if (url.includes('img.youtube.com') || url.startsWith('data:')) {
            return url; // Zwracamy oryginalny URL bez zmian
        }

        var separator = url.indexOf('?') === -1 ? '?' : '&';
        var regex = new RegExp('([?&])' + paramName + '=[^&]*');
        if (regex.test(url)) {
            return url.replace(regex, '$1' + paramName + '=' + paramValue);
        } else {
            return url + separator + paramName + '=' + paramValue;
        }
    }

    window.addEventListener('load', function() {
        // Używamy timestamp jako losowej wartości
        var randomValue = Date.now(); // lub Math.floor(Math.random() * 1000000)
        var paramName = 'v';

        // Aktualizacja tagów <img>
        var imgs = document.getElementsByTagName('img');
        for (var i = 0; i < imgs.length; i++) {
            var src = imgs[i].getAttribute('src');
            if (src) {
                imgs[i].setAttribute('src', updateUrl(src, paramName, randomValue));
            }
        }

        // Aktualizacja linków do arkuszy CSS
        var links = document.getElementsByTagName('link');
        for (var j = 0; j < links.length; j++) {
            if (links[j].rel === 'stylesheet') {
                var href = links[j].getAttribute('href');
                if (href) {
                    links[j].setAttribute('href', updateUrl(href, paramName, randomValue));
                }
            }
        }

        // Dynamiczne załadowanie plików JS z cache bustingiem
        var scripts = document.querySelectorAll('script[data-dynamic="true"]');
        scripts.forEach(function(script) {
            var originalSrc = script.getAttribute('src');
            if (originalSrc) {
                var newScript = document.createElement('script');
                newScript.src = updateUrl(originalSrc, paramName, randomValue);
                newScript.async = false; // zachowaj kolejność
                script.parentNode.insertBefore(newScript, script.nextSibling);
                script.remove(); // usuń stary <script>
            }
        });


        // Aktualizacja URL-i w inline stylach (np. background, background-image)
        // Jeśli chcesz tylko dla divów, użyj: document.querySelectorAll('div[style*="url("]')
        var elems = document.querySelectorAll('[style*="url("]');
        elems.forEach(function(elem) {
            var styleText = elem.getAttribute('style');
            // Wyszukujemy wszystkie wystąpienia url(...) w atrybucie style
            var updatedStyle = styleText.replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/g, function(match, quote, url) {
                var newUrl = updateUrl(url, paramName, randomValue);
                return 'url(' + (quote || '') + newUrl + (quote || '') + ')';
            });
            elem.setAttribute('style', updatedStyle);
        });
    });
</script>-->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('a.no-link').forEach(function(link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();
            });
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const banner = document.getElementById("cookie-banner");
        const btn = document.getElementById("accept-cookies");

        // Sprawdź, czy cookies były zaakceptowane
        if (!localStorage.getItem("cookiesAccepted")) {
            banner.classList.remove("d-none");
        }

        btn.addEventListener("click", function() {
            localStorage.setItem("cookiesAccepted", "true");
            banner.classList.add("d-none");
        });
    });
</script>

</body>

</html>