?php
// Naglowki blokujace stary cache przegladarki
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
error_reporting(0);

$db_host = '127.0.0.1';
$db_port = 3306;
$db_user = 'root';
$db_pass = '9bd13cbadfc375971e37ff4093f6164fd8ba745b9abd18ae';

function getDb($dbname) {
    global $db_host, $db_port, $db_user, $db_pass;
    try {
        return new PDO("mysql:host=$db_host;port=$db_port;dbname=$dbname;charset=utf8mb4", $db_user, $db_pass, [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
            PDO::ATTR_TIMEOUT => 2
        ]);
    } catch (Exception $e) {
        return null;
    }
}

$pdo_account = getDb('account');
$pdo_player  = getDb('player');

// Automatyczne dynamiczne wykrycie zdjecia admin1 / admin (dowolne rozszerzenie i wielkosc liter)
$admin_img = 'admin1.jpg';
$found_admin1 = glob('/var/www/metin2-register/*[aA][dD][mM][iI][nN]1*');
if (empty($found_admin1) === false) {
    $admin_img = basename($found_admin1[0]);
} else {
    $found_admin = glob('/var/www/metin2-register/*[aA][dD][mM][iI][nN]*');
    if (empty($found_admin) === false) {
        $admin_img = basename($found_admin[0]);
    }
}
$admin_cache_v = file_exists('/var/www/metin2-register/' . $admin_img) ? filemtime('/var/www/metin2-register/' . $admin_img) : time();

function getJobInfo($job) {
    $baseJob = ((int)$job) % 4;
    switch ($baseJob) {
        case 0: return ['Wojownik', '⚔️', 'job-warrior'];
        case 1: return ['Ninja', '🗡️', 'job-ninja'];
        case 2: return ['Sura', '🔮', 'job-sura'];
        case 3: return ['Szaman', '⚡', 'job-shaman'];
        default: return ['Wojownik', '⚔️', 'job-warrior'];
    }
}

function formatPlaytime($minutes) {
    $m = (int)$minutes;
    if ($m < 60) return $m . ' min';
    $hours = floor($m / 60);
    $mins = $m % 60;
    if ($hours < 24) return $hours . 'h ' . $mins . 'm';
    $days = floor($hours / 24);
    $remHours = $hours % 24;
    return $days . 'd ' . $remHours . 'h';
}

// 1. API: Statystyki na zywo i kanaly
if (isset($_GET['api']) && $_GET['api'] === 'live') {
    header('Content-Type: application/json; charset=utf-8');
    $online = 0; $accounts = 0; $players = 0; $guilds = 0;
    if ($pdo_player !== null) {
        try {
            $online = (int)$pdo_player->query("SELECT COUNT(*) FROM player WHERE last_play > NOW() - INTERVAL 15 MINUTE")->fetchColumn();
            $players = (int)$pdo_player->query("SELECT COUNT(*) FROM player")->fetchColumn();
            $guilds  = (int)$pdo_player->query("SELECT COUNT(*) FROM guild")->fetchColumn();
        } catch (Exception $e) {}
    }
    if ($pdo_account !== null) {
        try {
            $accounts = (int)$pdo_account->query("SELECT COUNT(*) FROM account")->fetchColumn();
        } catch (Exception $e) {}
    }
    $ch1 = floor($online * 0.46);
    $ch2 = floor($online * 0.34);
    $ch3 = max(0, $online - $ch1 - $ch2);
    echo json_encode([
        'online'   => number_format($online, 0, '', ' '),
        'ch1'      => number_format($ch1, 0, '', ' '),
        'ch2'      => number_format($ch2, 0, '', ' '),
        'ch3'      => number_format($ch3, 0, '', ' '),
        'accounts' => number_format($accounts, 0, '', ' '),
        'players'  => number_format($players, 0, '', ' '),
        'guilds'   => number_format($guilds, 0, '', ' ')
    ]);
    exit;
}

// Chat API
if (isset($_GET['api']) && $_GET['api'] === 'chat_get') {
    header('Content-Type: application/json; charset=utf-8');
    $f = '/var/www/metin2-register/chat_data.json';
    $msgs = file_exists($f) ? json_decode(@file_get_contents($f), true) : [];
    if (!is_array($msgs)) $msgs = [];
    echo json_encode(['ok' => true, 'msgs' => array_slice($msgs, -50)]);
    exit;
}
if (isset($_GET['api']) && $_GET['api'] === 'chat_send' && $_SERVER['REQUEST_METHOD'] === 'POST') {
    header('Content-Type: application/json; charset=utf-8');
    session_start();
    $ip = $_SERVER['REMOTE_ADDR'] ?? '';
    $now = time();
    if (($now - ($_SESSION['chat_t'] ?? 0)) < 3) { echo json_encode(['ok'=>false,'msg'=>'Zbyt szybko! Poczekaj 3 sekundy.']); exit; }
    $nick = trim($_POST['nick'] ?? '');
    $text = trim($_POST['message'] ?? '');
    $pin  = trim($_POST['pin'] ?? '');
    if (mb_strlen($nick,'UTF-8') < 2 || mb_strlen($nick,'UTF-8') > 24) { echo json_encode(['ok'=>false,'msg'=>'Nick: 2-24 znaki.']); exit; }
    if (mb_strlen($text,'UTF-8') < 1 || mb_strlen($text,'UTF-8') > 250) { echo json_encode(['ok'=>false,'msg'=>'Wiadomość: 1-250 znaków.']); exit; }
    $admin_nick = (bool)preg_match('/\[(SA|GA|GM)\]|sapiesik|zaxep/i', $nick);
    $role = 'player';
    if ($admin_nick) {
        if ($pin === 'grw2026') { $role = 'admin'; }
        else { echo json_encode(['ok'=>false,'msg'=>'Ten nick jest zastrzeżony dla Administratora.']); exit; }
    }
    $clean_nick = htmlspecialchars($nick, ENT_QUOTES, 'UTF-8');
    $clean_text = htmlspecialchars($text, ENT_QUOTES, 'UTF-8');
    $f = '/var/www/metin2-register/chat_data.json';
    $msgs = file_exists($f) ? json_decode(@file_get_contents($f), true) : [];
    if (!is_array($msgs)) $msgs = [];
    $msgs[] = ['id'=>$now, 'nick'=>$clean_nick, 'role'=>$role, 'msg'=>$clean_text, 'time'=>date('H:i')];
    if (count($msgs) > 60) $msgs = array_slice($msgs, -60);
    @file_put_contents($f, json_encode($msgs, JSON_UNESCAPED_UNICODE));
    $_SESSION['chat_t'] = $now;
    echo json_encode(['ok'=>true]);
    exit;
}
if (isset($_GET['api']) && $_GET['api'] === 'chat_del' && $_SERVER['REQUEST_METHOD'] === 'POST') {
    header('Content-Type: application/json; charset=utf-8');
    $id = (int)($_POST['id'] ?? 0);
    $pin = trim($_POST['pin'] ?? '');
    if ($pin !== 'grw2026' || $id <= 0) { echo json_encode(['ok'=>false]); exit; }
    $f = '/var/www/metin2-register/chat_data.json';
    $msgs = file_exists($f) ? json_decode(@file_get_contents($f), true) : [];
    if (is_array($msgs)) {
        $msgs = array_values(array_filter($msgs, function($m) use ($id) { return (int)($m['id']??0) !== $id; }));
        @file_put_contents($f, json_encode($msgs, JSON_UNESCAPED_UNICODE));
    }
    echo json_encode(['ok'=>true]);
    exit;
}
// 2. Formularz rejestracji ze stalym czystym VIPem (Premium do 2038)
$reg_error = '';
$reg_success = '';
$active_tab = 'presentation';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'register') {
    $active_tab = 'register';
    $login = trim($_POST['login'] ?? '');
    $password = $_POST['password'] ?? '';
    $password_repeat = $_POST['password_repeat'] ?? '';
    $social_id = trim($_POST['social_id'] ?? '');
    if ($social_id === '') $social_id = '1234567';
    $email = strtolower($login) . '@grwmt2.pl';

    if (preg_match('/^[a-zA-Z0-9]{4,16}$/', $login) === 0) {
        $reg_error = "Login musi miec od 4 do 16 znakow (tylko litery i cyfry).";
    } elseif (strlen($password) < 6) {
        $reg_error = "Haslo musi miec co najmniej 6 znakow.";
    } elseif ($password !== $password_repeat) {
        $reg_error = "Wpisane hasla nie sa identyczne.";
    } elseif (preg_match('/^[0-9]{7}$/', $social_id) === 0) {
        $reg_error = "Kod usuniecia postaci musi skladac sie z 7 cyfr.";
    } elseif ($pdo_account === null) {
        $reg_error = "Blad polaczenia z baza kont.";
    } else {
        try {
            $stmt = $pdo_account->prepare("SELECT id FROM account WHERE login = ?");
            $stmt->execute([$login]);
            if ($stmt->fetch()) {
                $reg_error = "Wybrany login jest juz zajety.";
            } else {
                $sql = "INSERT INTO account (
                    login, password, social_id, email, securitycode, status,
                    availDt, create_time, last_play,
                    premium_expire, safebox_expire, autoloot_expire,
                    fish_mind_expire, marriage_fast_expire, money_drop_rate_expire,
                    gold_expire, silver_expire
                ) VALUES (
                    ?, PASSWORD(?), ?, ?, '', 'OK',
                    NOW(), NOW(), NOW(),
                    '2038-01-01 00:00:00', '1970-01-01 00:00:00', '1970-01-01 00:00:00',
                    '1970-01-01 00:00:00', '1970-01-01 00:00:00', '1970-01-01 00:00:00',
                    '1970-01-01 00:00:00', '1970-01-01 00:00:00'
                )";
                $ins = $pdo_account->prepare($sql);
                $ins->execute([$login, $password, $social_id, $email]);
                $reg_success = "Konto <b style='color:#facc15'>" . htmlspecialchars($login) . "</b> zostalo pomyslnie utworzone! Kod usuniecia postaci: <b>" . htmlspecialchars($social_id) . "</b>. Pakiet Premium VIP na stale aktywny!";
            }
        } catch (Exception $e) {
            $reg_error = "Blad bazy: " . $e->getMessage();
        }
    }
}

// 3. Obsluga zgloszen Discord
$ticket_error = '';
$ticket_success = '';
$discord_webhook_url = "https://discord.com/api/webhooks/1562537355384979507/kvNS5-GFtPELIS2GXQg02jTFa0MECjppK-UzyRD49fz-9lzmzjGn6uyA89f6KcJPJHKB";

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'ticket') {
    $active_tab = 'support';
    $nick = trim($_POST['nick'] ?? '');
    $contact = trim($_POST['contact'] ?? '');
    $category = trim($_POST['category'] ?? 'Inne');
    $subject = trim($_POST['subject'] ?? '');
    $message = trim($_POST['message'] ?? '');

    if ($nick === '' || $subject === '' || $message === '') {
        $ticket_error = "Wypelnij wymagane pola (Nick, Temat, Tresc).";
    } else {
        $contact_val = ($contact !== '') ? $contact : 'Brak';
        $payload = [
            'username' => 'GRWMT2 Support Bot',
            'embeds' => [
                [
                    'title' => '📩 Nowe Zgloszenie: ' . $subject,
                    'description' => $message,
                    'color' => 16426522,
                    'fields' => [
                        ['name' => '👤 Nick', 'value' => $nick, 'inline' => true],
                        ['name' => '🏷️ Kategoria', 'value' => $category, 'inline' => true],
                        ['name' => '📱 Kontakt', 'value' => $contact_val, 'inline' => true]
                    ],
                    'footer' => ['text' => 'GRWMT2 Portal • ' . date('d.m.Y H:i:s')],
                    'timestamp' => date('c')
                ]
            ]
        ];
        $opts = [
            'http' => [
                'header'  => "Content-Type: application/json\r\n",
                'method'  => 'POST',
                'content' => json_encode($payload),
                'timeout' => 5
            ]
        ];
        $res = @file_get_contents($discord_webhook_url, false, stream_context_create($opts));
        $ticket_success = "Twoje zgloszenie zostalo wyslane bezposrednio do administracji na Discordzie!";
    }
}

// 4. Rankingi (Filtrowanie adminow + Oznaczenie botow i graczy)
$admin_filter = "('admin', 'sura', 'ninja', 'wojownik', 'szaman', 'tomek', 'test', 'test1', 'saper11', 'saper111')";

$top_level = [];
$top_time = [];
$top_guilds = [];

if ($pdo_player !== null) {
    try {
        $online_count = (int)$pdo_player->query("SELECT COUNT(*) FROM player WHERE last_play > NOW() - INTERVAL 15 MINUTE")->fetchColumn();
        $players_count = (int)$pdo_player->query("SELECT COUNT(*) FROM player")->fetchColumn();
        $guilds_count = (int)$pdo_player->query("SELECT COUNT(*) FROM guild")->fetchColumn();

        // Top Poziom
        $stmt_lvl = $pdo_player->query("
            SELECT p.name, p.level, p.exp, p.playtime, p.job,
                   (CASE WHEN a.login LIKE 'playerbot_%' THEN 1 ELSE 0 END) AS is_bot
            FROM player p
            LEFT JOIN account.account a ON p.account_id = a.id
            WHERE p.name NOT LIKE '[%]%'
              AND LOWER(p.name) NOT IN $admin_filter
              AND LOWER(p.name) NOT LIKE 'admin%'
              AND LOWER(p.name) NOT LIKE 'test%'
              AND p.name NOT IN (SELECT mName FROM common.gmlist)
            ORDER BY p.level DESC, p.exp DESC
            LIMIT 25
        ");
        $top_level = $stmt_lvl->fetchAll();

        // Top Czas Gry
        $stmt_time = $pdo_player->query("
            SELECT p.name, p.level, p.playtime, p.job,
                   (CASE WHEN a.login LIKE 'playerbot_%' THEN 1 ELSE 0 END) AS is_bot
            FROM player p
            LEFT JOIN account.account a ON p.account_id = a.id
            WHERE p.name NOT LIKE '[%]%'
              AND LOWER(p.name) NOT IN $admin_filter
              AND LOWER(p.name) NOT LIKE 'admin%'
              AND LOWER(p.name) NOT LIKE 'test%'
              AND p.name NOT IN (SELECT mName FROM common.gmlist)
            ORDER BY p.playtime DESC
            LIMIT 25
        ");
        $top_time = $stmt_time->fetchAll();

        // Top Gildie
        $stmt_g = $pdo_player->query("
            SELECT name, level, ladder_point
            FROM guild
            ORDER BY level DESC, ladder_point DESC
            LIMIT 15
        ");
        $top_guilds = $stmt_g->fetchAll();
    } catch (Exception $e) {}
}

if ($pdo_account !== null) {
    try {
        $accounts_count = (int)$pdo_account->query("SELECT COUNT(*) FROM account")->fetchColumn();
    } catch (Exception $e) {}
}

$ch1_online = floor($online_count * 0.46);
$ch2_online = floor($online_count * 0.34);
$ch3_online = max(0, $online_count - $ch1_online - $ch2_online);

// 5. Czysty dziennik aktualizacji
$updates = [
    [
        'date' => 'Aktualizacja',
        'title' => '2.37.0 — Zaklęty Las, Mapy 90 Poziomu i Nowa Ekonomia Botów',
        'badge' => 'WERSJA 2.37.0',
        'items' => [
            'Wyprawa Zaklęty Las: Nowa drużynowa wyprawa Erebu (5–8 graczy od 95 lvl) za Świątynią Ochao na bossów Bagjanamu i Jotun Thrym (cenne Skrzynie Jotuna i Bagjanamu) oraz 7 misji strażników lasu (nagroda: Kamień Driad).',
            'Nowe Mapy 90 Poziomu: Przylądek Smoczego Ognia, Zbocze Gautama, Nefrytowa Zatoka i Gromiste Góry – z bezpośrednimi portalami oraz szybkim dostępem u Teleportera od 90 lvl.',
            'Koniec limitu EXP: Pasek doświadczenia nie ucina się już na wartości 2.14 mld EXP – pełne doświadczenie powyżej 100 poziomu zapisuje się w bazie w całości bez strat.',
            'Czysty rynek i Magiczny Pył: Boty nie wystawiają już Kamieni Duszy +0, +1 i +2 – wymieniają je u Alchemika w Magiczny Pył, oczyszczając rynek z niepotrzebnych przedmiotów.',
            'Kamienie Duszy +3 i +4 w stosach: Boty wystawiają cenne kamienie jednym wygodnym stosem – kupujesz ze straganu dokładnie tyle sztuk, ile potrzebujesz.',
            'Błyskawiczne łączenie ksiąg: Boty porządkują swoje sklepy i wystawiają Księgi Umiejętności w pełnych, przejrzystych stosach.',
            'Ekspedycje botów: Zaawansowane boty (od 100 lvl) wyruszają w drużynach do Zaklętego Lasu, a od 95 lvl polują na bossy i Metiny na nowych mapach 90 poziomu.',
            'Misja Seon-Hae: Duży suplement oraz cenne odłamki zdobywa się teraz na potworach w Zaklętym Lesie.'
        ]
    ],
    [
        'date' => 'Aktualizacja',
        'title' => '2.36.0 — Sklepy Botów 2x Większe, Płynne Lochy i Auto-Łowy Bez Zemsty',
        'badge' => 'WERSJA 2.36.0',
        'items' => [
            'Boty wolą sklepy graczy: Boty priorytetowo skupują przedmioty od graczy – wybierają oferty gracza nawet jeśli są do 10% droższe niż u innych botów!',
            'Dwukrotnie większe sklepy botów: Stragany offline botów posiadają teraz 4 strony towaru i trzymają zapas wolnego miejsca, co zapobiega przepełnieniu rynku.',
            'Cenne przedmioty zawsze na rynku: Boty nigdy nie zdejmują przedmiotów z dwoma bonusami, od +7 w górę, broni na 30 lvl, Stalek ani drogich Ksiąg Umiejętności.',
            'Płynne lochy bez zacięć: Automatyczny nadzór celów w lochach (Wieża Demonów, Katakumby, Razador, Nemere, Ruiny Dżungli i inne) – zaginione cele odnawiają się same, eliminując zawieszanie się etapów.',
            'Auto-Łowy bez zemsty: Przypadkowe uderzenie bota podczas korzystania z Auto-Łowów nie prowokuje go do walki, nie zrywa rozejmu ani nie ściąga jego grupy/gildii.',
            'Smocza Alchemia w sklepach: Kamienie Smoczej Alchemii można teraz bezpośrednio wystawiać na straganach i kupować prosto do dedykowanego okna alchemii.',
            'Materiały i Cor Draconis w stosach: Medale Konia, Cor Draconis, materiały rzemieślnicze i szarfy wystawiane są w stosach z opcją zakupu dowolnej ilości sztuk.',
            'Ochrona zbierania ziół: Trafienie lub ogłuszenie przez potwora nie przerywa już zbierania ziół.'
        ]
    ]
];
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GRWMT2 - Garwoliński Serwer Metin2</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
        body { background: radial-gradient(circle at 50% 10%, #1e1b2e 0%, #0d0c15 100%); color: #e2e8f0; min-height: 100vh; padding: 25px 15px; }
        .container { max-width: 980px; margin: 0 auto; }
        
        .server-status-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
        .status-pill { background: rgba(26, 24, 40, 0.9); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 7px 14px; font-size: 13px; color: #cbd5e1; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
        .status-dot-green { width: 8px; height: 8px; background: #4ade80; border-radius: 50%; box-shadow: 0 0 8px #4ade80; display: inline-block; }
        
        .header { text-align: center; margin-bottom: 25px; position: relative; }
        .title { font-size: 34px; font-weight: 900; color: #facc15; letter-spacing: 1.5px; text-transform: uppercase; text-shadow: 0 0 25px rgba(250, 204, 21, 0.45); }
        .subtitle { color: #94a3b8; font-size: 14px; margin-top: 6px; }
        
        .bgm-bar { display: inline-flex; align-items: center; gap: 10px; background: rgba(26, 24, 40, 0.8); border: 1px solid rgba(234, 179, 8, 0.25); border-radius: 30px; padding: 6px 16px; margin-top: 12px; font-size: 12.5px; color: #cbd5e1; }
        .bgm-btn { background: #eab308; border: none; color: #000; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
        
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 25px; }
        .stat-card { background: rgba(26, 24, 40, 0.85); border: 1px solid rgba(234, 179, 8, 0.2); border-radius: 12px; padding: 16px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
        .stat-val { font-size: 24px; font-weight: 800; color: #38bdf8; margin: 4px 0; }
        .stat-lbl { font-size: 11px; text-transform: uppercase; color: #64748b; font-weight: 600; letter-spacing: 0.5px; }
        
        .nav-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; justify-content: center; }
        .tab-btn { background: rgba(26, 24, 40, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); color: #94a3b8; padding: 10px 18px; border-radius: 8px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
        .tab-btn:hover { background: rgba(45, 40, 68, 0.9); color: #fff; }
        .tab-btn.active { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); color: #000; border-color: #eab308; box-shadow: 0 4px 15px rgba(234, 179, 8, 0.35); }
        
        .tab-content { display: none; background: rgba(26, 24, 40, 0.95); border: 1px solid rgba(234, 179, 8, 0.2); border-radius: 14px; padding: 25px; box-shadow: 0 15px 35px rgba(0,0,0,0.6); }
        .tab-content.active { display: block; animation: fadeIn 0.25s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
        
        /* Czat Graczy */
        .chat-box { height: 380px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; background: rgba(10,8,20,0.7); border: 1px solid rgba(234,179,8,0.2); border-radius: 10px; }
        .chat-box::-webkit-scrollbar { width: 5px; }
        .chat-box::-webkit-scrollbar-thumb { background: rgba(234,179,8,0.35); border-radius: 3px; }
        .chat-msg { display: flex; flex-direction: column; gap: 3px; background: rgba(26,24,40,0.6); border: 1px solid rgba(255,255,255,0.06); padding: 8px 12px; border-radius: 7px; }
        .chat-msg.admin-msg { border-color: rgba(234,179,8,0.4); background: linear-gradient(90deg, rgba(234,179,8,0.12) 0%, rgba(26,24,40,0.7) 100%); }
        .chat-meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
        .chat-time { color: #475569; font-size: 10.5px; }
        .badge-p { color: #38bdf8; font-weight: 700; }
        .badge-a { color: #facc15; font-weight: 900; text-shadow: 0 0 8px rgba(250,204,21,0.5); }
        .chat-del { margin-left: auto; color: #ef4444; cursor: pointer; opacity: 0.55; font-size: 11px; }
        .chat-del:hover { opacity: 1; }
        .chat-text { color: #e2e8f0; font-size: 13px; word-break: break-word; line-height: 1.5; }
        .chat-pulse { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 8px #22c55e; display: inline-block; animation: pulse 1.5s infinite; }
        .chat-input-wrap { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
        .chat-nick { width: 160px; background: rgba(10,8,20,0.85); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; padding: 9px 13px; color: #f8fafc; font-size: 13px; font-weight: 700; }
        .chat-inp { flex: 1; min-width: 200px; background: rgba(10,8,20,0.85); border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; padding: 9px 13px; color: #f8fafc; font-size: 13px; }
        .chat-send { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); color: #000; border: none; font-weight: 800; padding: 9px 20px; border-radius: 7px; cursor: pointer; font-size: 13.5px; transition: all 0.2s; white-space: nowrap; }
        .chat-send:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(234,179,8,0.4); }
        .chat-emos { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
        .chat-emo { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; padding: 3px 7px; font-size: 14px; cursor: pointer; }
        .chat-emo:hover { background: rgba(234,179,8,0.18); }
        .chat-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); color: #000; font-weight: 800; font-size: 13px; padding: 10px 18px; border-radius: 50px; border: 2px solid #fef08a; box-shadow: 0 6px 22px rgba(234,179,8,0.45); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: all 0.2s; }
        .chat-float:hover { transform: scale(1.05); }
                /* Prezentacja ogolna */
        .feat-card { background: rgba(15, 13, 25, 0.75); border: 1px solid rgba(234, 179, 8, 0.3); border-radius: 12px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
        .feat-icon { font-size: 28px; margin-bottom: 10px; }
        .feat-title { color: #facc15; font-size: 17px; font-weight: 800; margin-bottom: 10px; }
        .feat-list { list-style: none; padding: 0; margin: 0; }
        .feat-list li { display: block; position: relative; padding-left: 22px; font-size: 13.5px; color: #cbd5e1; margin-bottom: 8px; line-height: 1.5; text-align: left; }
        .feat-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: #4ade80; font-weight: 900; font-size: 14px; line-height: 1; }
        .feat-list li b { color: #f8fafc; font-weight: 700; }
        
        /* Karty dla sekcji Systemu Botow */
        .bot-section-title { font-size: 20px; font-weight: 900; color: #facc15; margin: 26px 0 12px 0; display: flex; align-items: center; gap: 8px; }
        .bot-section-desc { color: #cbd5e1; font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; }
        .bot-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 10px; }
        .bot-feature-card { background: rgba(15, 13, 25, 0.75); border: 1px solid rgba(234, 179, 8, 0.25); border-radius: 10px; padding: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
        .bot-feature-card h4 { color: #facc15; font-size: 15px; font-weight: 800; margin-bottom: 8px; }
        .bot-feature-card p { color: #cbd5e1; font-size: 13px; line-height: 1.5; margin: 0; }
        
        .econ-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
        .econ-card { background: rgba(15, 13, 25, 0.75); border: 1px solid rgba(234, 179, 8, 0.25); border-left: 4px solid #eab308; border-radius: 8px; padding: 12px 16px; font-size: 13.5px; color: #cbd5e1; line-height: 1.5; }
        .econ-card b { color: #facc15; font-weight: 800; }
        
        /* Sub-zakladki w rankingach */
        .rank-sub-btn { background: rgba(15, 13, 25, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); color: #94a3b8; padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
        .rank-sub-btn:hover { color: #fff; background: rgba(45, 40, 68, 0.9); }
        .rank-sub-btn.active { background: #eab308; color: #000; border-color: #eab308; font-weight: 900; box-shadow: 0 2px 12px rgba(234, 179, 8, 0.35); }
        
        /* Znaczki gracza i bota */
        .badge-player { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.35); padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
        .badge-bot { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
        
        /* Jak dołączyć */
        .download-box { background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(202, 138, 4, 0.05) 100%); border: 2px solid rgba(234, 179, 8, 0.4); border-radius: 14px; padding: 30px 20px; text-align: center; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
        .btn-download-big { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); color: #000; font-size: 18px; font-weight: 900; padding: 16px 36px; border-radius: 10px; text-decoration: none; text-transform: uppercase; box-shadow: 0 6px 25px rgba(234, 179, 8, 0.45); transition: transform 0.2s; }
        .btn-download-big:hover { transform: translateY(-2px); }
        .step-num { width: 38px; height: 38px; background: #eab308; color: #000; font-weight: 900; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; box-shadow: 0 0 12px rgba(234, 179, 8, 0.4); }
        
        /* Formularze i Tabele */
        .form-group { margin-bottom: 16px; }
        label { display: block; font-size: 13px; font-weight: 600; color: #cbd5e1; margin-bottom: 6px; }
        input, select, textarea { width: 100%; padding: 12px 14px; background: #0f0d19; border: 1px solid #332d4a; border-radius: 8px; color: #f8fafc; font-size: 14px; outline: none; }
        input:focus, select:focus, textarea:focus { border-color: #facc15; box-shadow: 0 0 10px rgba(250, 204, 21, 0.25); }
        .btn-submit { width: 100%; padding: 14px; background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); border: none; border-radius: 8px; color: #000; font-size: 15px; font-weight: 800; cursor: pointer; text-transform: uppercase; margin-top: 10px; }
        
        .alert { padding: 14px; border-radius: 8px; font-size: 14px; margin-bottom: 20px; text-align: center; line-height: 1.5; }
        .alert-error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.4); color: #f87171; }
        .alert-success { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.4); color: #4ade80; }
        
        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th { text-align: left; padding: 12px 14px; color: #94a3b8; font-size: 12px; text-transform: uppercase; border-bottom: 1px solid #332d4a; }
        td { padding: 12px 14px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.03); }
        tr:hover td { background: rgba(255,255,255,0.02); }
        
        .rank-pos { font-weight: 800; width: 45px; text-align: center; }
        .pos-1 { color: #facc15; font-size: 16px; }
        .pos-2 { color: #cbd5e1; font-size: 16px; }
        .pos-3 { color: #d97706; font-size: 16px; }
        .char-name { font-weight: 700; color: #f8fafc; }
        .lvl-badge { font-weight: 800; color: #38bdf8; }
        
        .job-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
        .job-warrior { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
        .job-ninja { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
        .job-sura { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
        .job-shaman { background: rgba(250, 204, 21, 0.2); color: #facc15; border: 1px solid rgba(250, 204, 21, 0.3); }
        
        .update-item { background: rgba(15, 13, 25, 0.7); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
        .update-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
        .update-title { color: #facc15; font-size: 16px; font-weight: 800; }
        .update-badge { background: rgba(234, 179, 8, 0.2); color: #facc15; border: 1px solid rgba(234, 179, 8, 0.4); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
        .update-date { color: #64748b; font-size: 12px; font-weight: 600; }
        .update-list { list-style: none; padding: 0; }
        .update-list li { font-size: 13.5px; color: #cbd5e1; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
        .update-list li::before { content: "•"; color: #facc15; font-size: 18px; line-height: 1; }
        
        /* Administracja stopka */
        .admin-pill { background: rgba(234, 179, 8, 0.15); border: 1px solid rgba(234, 179, 8, 0.4); color: #facc15; font-weight: 900; padding: 6px 16px; border-radius: 20px; font-size: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); display: inline-flex; align-items: center; gap: 6px; }
    </style>
</head>
<body>
<div class="container">
    <!-- Pasek statusu serwera -->
    <div class="server-status-strip">
        <div class="status-pill" style="border-color: rgba(234, 179, 8, 0.45); background: rgba(234, 179, 8, 0.12);"><span style="color:#facc15;">🛡️</span> <b>Typ serwera:</b> <span style="color:#facc15; font-weight:900; letter-spacing:0.5px;">MEDIUM</span></div>
        <div class="status-pill"><span class="status-dot-green"></span> <b>Logowanie (Auth):</b> <span style="color:#4ade80; font-weight:700;">Działa</span></div>
        <div class="status-pill"><span class="status-dot-green"></span> <b>CH1:</b> Online (<span id="stat-ch1" style="color:#38bdf8; font-weight:700;">0</span>)</div>
        <div class="status-pill"><span class="status-dot-green"></span> <b>CH2:</b> Online (<span id="stat-ch2" style="color:#38bdf8; font-weight:700;">0</span>)</div>
        <div class="status-pill"><span class="status-dot-green"></span> <b>CH3:</b> Online (<span id="stat-ch3" style="color:#38bdf8; font-weight:700;">0</span>)</div>
        <div class="status-pill"><span style="color:#facc15;">⚡</span> <b>Ping:</b> <span style="color:#38bdf8; font-weight:700;">~15 ms</span> <span style="font-size:11px; color:#64748b;">(Skillhost)</span></div>
        <div class="status-pill"><span style="color:#facc15;">🔥</span> <b>Raty:</b> EXP <span style="color:#4ade80; font-weight:800;">x3</span> • DROP <span style="color:#38bdf8; font-weight:800;">x4</span> • YANG <span style="color:#facc15; font-weight:800;">x2</span></div>
    </div>

    <!-- Naglowek -->
    <div class="header">
        <div class="title">⚔️ GRWMT2 Garwoliński serwer metin2</div>
        <div class="subtitle">Typ serwera: <b style="color: #facc15; font-weight: 800;">MEDIUM</b> • Legendarny klimat w sercu Garwolina • Oficjalny Portal Graczy</div>
        
        <div class="bgm-bar">
            <span>🎵 Muzyka:</span>
            <span id="bgm-track-title" style="color: #facc15; font-weight: 700;">Enter The East</span>
            <button type="button" id="btn-bgm-play" class="bgm-btn" onclick="toggleBgm()">▶</button>
        </div>
    </div>

    <!-- Statystyki -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-lbl"><span class="status-dot-green"></span> W świecie gry</div>
            <div class="stat-val" id="stat-online">0</div>
            <div class="stat-lbl">Aktywnych postaci & botów</div>
        </div>
        <div class="stat-card">
            <div class="stat-lbl">Wszystkie Postacie</div>
            <div class="stat-val" id="stat-players">0</div>
            <div class="stat-lbl">W bazie serwera</div>
        </div>
        <div class="stat-card">
            <div class="stat-lbl">Zarejestrowane Konta</div>
            <div class="stat-val" id="stat-accounts">0</div>
            <div class="stat-lbl">Graczy</div>
        </div>
        <div class="stat-card">
            <div class="stat-lbl">Gildie</div>
            <div class="stat-val" id="stat-guilds">0</div>
            <div class="stat-lbl">Zarejestrowanych</div>
        </div>
    </div>

    <!-- Zakladki nawigacji -->
    <div class="nav-tabs">
        <button class="tab-btn " data-tab="presentation" onclick="showTab('presentation', this)">⭐ Prezentacja Serwera</button>
        <button class="tab-btn " data-tab="bots" onclick="showTab('bots', this)">🤖 System Botów</button>
        <button class="tab-btn " data-tab="register" onclick="showTab('register', this)">📝 Szybka Rejestracja</button>
        <button class="tab-btn " data-tab="chat" onclick="showTab('chat', this)">💬 Czat Graczy</button>
        <button class="tab-btn " data-tab="ranking" onclick="showTab('ranking', this)">🏆 Rankingi</button>
        <button class="tab-btn " data-tab="updates" onclick="showTab('updates', this)">📰 Aktualizacje</button>
        <button class="tab-btn " data-tab="support" onclick="showTab('support', this)">🎫 Pomoc / Support</button>
        <button class="tab-btn " data-tab="join" onclick="showTab('join', this)">📥 Jak Dołączyć</button>
        <a href="https://metin2sp.pl/wiki/" target="_blank" rel="noopener" class="tab-btn" style="background: rgba(234, 179, 8, 0.15); border-color: rgba(234, 179, 8, 0.4); color: #facc15;">📖 Wiki ↗</a>
    </div>

    <!-- Zakladka 1: Prezentacja Serwera -->
    <div id="tab-presentation" class="tab-content ">
        <div style="text-align: center; margin-bottom: 20px;">
            <h2 style="color: #facc15; font-size: 24px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;">⭐ Dlaczego warto zagrać na GRWMT2?</h2>
            <p style="color: #94a3b8; font-size: 14px; max-width: 650px; margin: 8px auto 0;">Oficjalny serwer społeczności Garwolina i okolic. Klasyczny klimat Metin2 z najlepszymi udogodnieniami – 100% za darmo i bez Pay-to-Win!</p>
        </div>

        <!-- Rozbudowany Baner Rat i Modyfikacji Swiata Gry -->
        <div style="background: linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(56, 189, 248, 0.08) 100%); border: 1px solid rgba(234, 179, 8, 0.35); border-radius: 14px; padding: 18px 22px; margin-bottom: 25px; box-shadow: 0 4px 25px rgba(0,0,0,0.35);">
            <!-- Glowny pasek rat -->
            <div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08);">
                <div style="font-size: 15px; font-weight: 900; color: #facc15; display: flex; align-items: center; gap: 8px;">
                    🔥 OFICJALNE RATY SERWERA <span style="font-size: 12px; color: #94a3b8; font-weight: 600;">(względem standardowego PL)</span>:
                </div>
                <div style="display: flex; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 800;">
                    <span style="background: linear-gradient(135deg, #eab308, #ca8a04); color: #000; padding: 5px 14px; border-radius: 20px; font-weight: 900; box-shadow: 0 2px 10px rgba(234, 179, 8, 0.35);">TYP: MEDIUM</span>
                    <span style="background: rgba(34, 197, 94, 0.2); border: 1px solid rgba(34, 197, 94, 0.4); color: #4ade80; padding: 5px 14px; border-radius: 20px;">⚔️ EXP: x3</span>
                    <span style="background: rgba(56, 189, 248, 0.2); border: 1px solid rgba(56, 189, 248, 0.4); color: #38bdf8; padding: 5px 14px; border-radius: 20px;">💎 DROP: x4</span>
                    <span style="background: rgba(250, 204, 21, 0.2); border: 1px solid rgba(250, 204, 21, 0.4); color: #facc15; padding: 5px 14px; border-radius: 20px;">💰 YANG: x2</span>
                </div>
            </div>

            <!-- Dodatkowe parametry respu i liczebnosci -->
            <div style="margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px;">
                <div style="background: rgba(15, 13, 25, 0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: #cbd5e1; display: flex; align-items: center; gap: 8px;">
                    <span style="color:#4ade80; font-size:15px;">⏱️</span> <span>Potwory: <b style="color:#4ade80;">+50% szybszy resp</b></span>
                </div>
                <div style="background: rgba(15, 13, 25, 0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: #cbd5e1; display: flex; align-items: center; gap: 8px;">
                    <span style="color:#facc15; font-size:15px;">👑</span> <span>Bossy: <b style="color:#facc15;">+75% szybszy resp</b></span>
                </div>
                <div style="background: rgba(15, 13, 25, 0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: #cbd5e1; display: flex; align-items: center; gap: 8px;">
                    <span style="color:#38bdf8; font-size:15px;">👾</span> <span>Liczebność potworów: <b style="color:#38bdf8;">+50%</b></span>
                </div>
                <div style="background: rgba(15, 13, 25, 0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: #cbd5e1; display: flex; align-items: center; gap: 8px;">
                    <span style="color:#f43f5e; font-size:15px;">☄️</span> <span>Liczebność metinów: <b style="color:#f43f5e;">+100% (2×)</b></span>
                </div>
                <div style="background: rgba(15, 13, 25, 0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: #cbd5e1; display: flex; align-items: center; gap: 8px;">
                    <span style="color:#c084fc; font-size:15px;">💀</span> <span>Liczebność bossów: <b style="color:#c084fc;">+50%</b></span>
                </div>
            </div>

            <!-- Udogodnienia QoL / Brak limitow czasu -->
            <div style="margin-top: 12px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #f8fafc; text-align: center; line-height: 1.5;">
                ✨ <b>Udogodnienia rozgrywki (Brak limitów czasowych):</b> Brak oczekiwania u <b>Biologa</b> i <b>Stajennego</b> oraz <b>brak przerw czasowych między Księgami Umiejętności (KU)</b>.
            </div>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 25px;">
            <!-- Kafelek 1: Tracker z instrukcja jak wlaczyc -->
            <div class="feat-card">
                <div class="feat-icon">⏱️ 🚀</div>
                <div class="feat-title">Wbudowany Tracker i Teleport</div>
                <ul class="feat-list">
                    <li><b>Podgląd na żywo:</b> Zawsze wiesz, kiedy zrespi się Wódz Orków czy Metin Cienia.</li>
                    <li><b>Błyskawiczny teleport:</b> Natychmiastowe przeniesienie pod cel jednym kliknięciem.</li>
                    <li><b>Koniec z nudą:</b> Koniec ze żmudnym bieganiem i szukaniem po całych mapach.</li>
                    <li><b>Instrukcja jak włączyć:</b> Patrz punkt 3 w zakładce <a href="javascript:void(0)" onclick="showTab('join')" style="color: #facc15; font-weight: 700; text-decoration: underline;">Jak Dołączyć</a>.</li>
                </ul>
            </div>

            <!-- Kafelek 2: VIP -->
            <div class="feat-card">
                <div class="feat-icon">👑 🎁</div>
                <div class="feat-title">Darmowy Status VIP na Stałe</div>
                <ul class="feat-list">
                    <li><b>+50% Doświadczenia (EXP)</b> z każdego pokonanego potwora.</li>
                    <li><b>Podwojona szansa</b> na zdobycie cennych przedmiotów (Drop).</li>
                    <li><b>Automatyczne zbieranie Yang i itemów (3. Ręka)</b>.</li>
                    <li><b>Podwójna szansa</b> na zdobycie Yang.</li>
                    <li><b>Podwojona pojemność magazynu</b> u Dozorcy na zawsze.</li>
                    <li><b>Darmowy dostęp</b> do Lochu Pająków V2.</li>
                    <li><b>Zwiększona szansa</b> na udany połów ryb.</li>
                </ul>
            </div>

            <!-- Kafelek 3: Bez P2W -->
            <div class="feat-card">
                <div class="feat-icon">🛡️ ⚖️</div>
                <div class="feat-title">Czysta Gra – 100% Zero Pay-to-Win</div>
                <ul class="feat-list">
                    <li><b>Brak Item-Shopu z eq:</b> Brak sprzedaży gotowych przedmiotów za realne pieniądze.</li>
                    <li><b>Równe szanse:</b> Każdy gracz zaczyna od zera na tych samych warunkach.</li>
                    <li><b>Uczciwy rozwój:</b> O sile decyduje wyłącznie Twoja gra, dropienie i handel.</li>
                </ul>
            </div>

            <!-- Kafelek 4: Zywy swiat -->
            <div class="feat-card">
                <div class="feat-icon">🤖 🏙️</div>
                <div class="feat-title">Tętniący Życiem Świat <span style="white-space: nowrap;">(2000+ postaci)</span></div>
                <ul class="feat-list">
                    <li><b>Żywe miasta:</b> Miasta M1 i M2 nigdy nie świecą pustkami.</li>
                    <li><b>Aktywny rozwój:</b> Boty expią na spotach, dropią i ulepszają eq.</li>
                    <li><b>Prawdziwe zachowanie:</b> Biją bossy, niszczą metiny, robią dungeony i handlują w M1.</li>
                </ul>
            </div>

            <!-- Kafelek 5: Spolecznosc -->
            <div class="feat-card">
                <div class="feat-icon">👥 🏰</div>
                <div class="feat-title">Lokalna Społeczność – Garwolin</div>
                <ul class="feat-list">
                    <li><b>Znajomi z miasta:</b> Grasz z ludźmi ze swojej szkoły, pracy i osiedla.</li>
                    <li><b>Wspólne wyprawy:</b> Zgrane gildie, wyprawy na DT i wspólne dropienie.</li>
                    <li><b>Wojny Królestw:</b> Zacięta rywalizacja o dominację w Garwolinie i okolicach.</li>
                </ul>
            </div>

            <!-- Kafelek 6: Ping i CH -->
            <div class="feat-card">
                <div class="feat-icon">⚡ 📶</div>
                <div class="feat-title">Niski Ping i 3 Kanały Gry</div>
                <ul class="feat-list">
                    <li><b>Serwer w Polsce:</b> Stabilny VPS w Skillhost z błyskawicznym pingiem ~15 ms.</li>
                    <li><b>3 kanały (CH1, CH2, CH3):</b> Swobodny wybór między handlem a wolnymi spotami.</li>
                    <li><b>Bez lagów:</b> Czysty silnik gry i stabilność o każdej porze dnia i nocy.</li>
                </ul>
            </div>
        </div>

        <!-- Zdjecie z gry: Zywy Rynek M1 (Propozycja nr 1) -->
        <div style="background: rgba(15, 13, 25, 0.85); border: 1px solid rgba(234, 179, 8, 0.35); border-radius: 14px; padding: 20px; margin: 30px 0; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,0.5);">
            <div style="display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px;">
                <span style="font-size: 22px;">📸</span>
                <h3 style="color: #facc15; font-size: 20px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; margin: 0;">
                    Podgląd na żywo: Rynek M1 w grze
                </h3>
            </div>
            <p style="color: #cbd5e1; font-size: 14px; margin-bottom: 16px; max-width: 720px; margin-left: auto; margin-right: auto; line-height: 1.5;">
                Tak wygląda codzienna rozgrywka na <b>GRWMT2</b> — setki straganów, aktywny handel, wierzchowce i prawdziwe tłumy w miastach!
            </p>
            <div style="position: relative; overflow: hidden; border-radius: 10px; border: 2px solid rgba(234, 179, 8, 0.35); box-shadow: 0 4px 25px rgba(0,0,0,0.6); max-width: 920px; margin: 0 auto; background: #000;">
                <a href="?v=" target="_blank" title="Kliknij, aby otworzyć w pełnej rozdzielczości">
                    <img src="?v=" alt="Rynek M1 na serwerze GRWMT2" style="width: 100%; height: auto; display: block; transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.015)'" onmouseout="this.style.transform='scale(1)'">
                </a>
            </div>
            <div style="color: #64748b; font-size: 12px; margin-top: 10px;">
                🔍 <i>Kliknij na zrzut ekranu, aby otworzyć go w pełnym rozmiarze w nowej karcie</i>
            </div>
        </div>

        <!-- Wizytowka Ekipy w Prezentacji -->
        <div style="margin-top: 35px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 25px;">
            <div style="text-align: center; margin-bottom: 20px;">
                <h3 style="color: #facc15; font-size: 20px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;">
                    👑 Ekipa Serwera & Twórcy
                </h3>
                <p style="color: #94a3b8; font-size: 13px; margin-top: 4px;">
                    Oficjalny skład projektu GRWMT2. Pamiętaj: prawdziwy Administrator nigdy nie prosi o Twoje hasło!
                </p>
            </div>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; max-width: 750px; margin: 0 auto 25px auto;">
                <div style="background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)); border: 1px solid rgba(234, 179, 8, 0.4); border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.35);">
                    <div style="width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #eab308, #ca8a04); display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 12px auto; box-shadow: 0 0 16px rgba(234, 179, 8, 0.45);">
                        👑
                    </div>
                    <div style="display: inline-block; background: rgba(234, 179, 8, 0.15); color: #facc15; border: 1px solid rgba(234, 179, 8, 0.35); font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; margin-bottom: 8px;">
                        Właściciel & Administrator
                    </div>
                    <h4 style="color: #fff; font-size: 19px; font-weight: 800; margin: 0 0 6px 0;">[SA] Sapiesik</h4>
                    <p style="color: #94a3b8; font-size: 12.5px; line-height: 1.5; margin: 0;">
                        Zarządzanie projektem, organizacja eventów, kontakt ze społecznością graczy Garwolina oraz opieka nad serwerem.
                    </p>
                </div>

                <div style="background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)); border: 1px solid rgba(56, 189, 248, 0.4); border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.35);">
                    <div style="width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #38bdf8, #0284c7); display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 12px auto; box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);">
                        💻
                    </div>
                    <div style="display: inline-block; background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.35); font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; margin-bottom: 8px;">
                        Lead Developer
                    </div>
                    <h4 style="color: #fff; font-size: 19px; font-weight: 800; margin: 0 0 6px 0;">Zaxep</h4>
                    <p style="color: #94a3b8; font-size: 12.5px; line-height: 1.5; margin: 0;">
                        Główny Programista & Twórca Silnika MT2009 Plus. Rozwój sztucznej inteligencji botów, optymalizacja silnika i mechanik gry.
                    </p>
                </div>
            </div>
        </div>

        <div style="text-align: center; margin-top: 25px;">
            <button type="button" onclick="showTab('register')" style="display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); color: #000; font-size: 16px; font-weight: 800; padding: 14px 34px; border-radius: 8px; border: none; cursor: pointer; text-transform: uppercase; box-shadow: 0 4px 18px rgba(234, 179, 8, 0.4);">
                ⚔️ Załóż Darmowe Konto i Zagraj z Nami!
            </button>
        </div>
    </div>

    <!-- Zakladka: System Botow w MT2009 PLUS -->
    <div id="tab-bots" class="tab-content ">
        <div style="text-align: center; margin-bottom: 25px;">
            <h2 style="color: #facc15; font-size: 26px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;">
                Co robią boty w MT2009 PLUS
            </h2>
            <p style="color: #cbd5e1; font-size: 14px; max-width: 800px; margin: 10px auto 0; line-height: 1.6;">
                Boty to nie osobny program klikający w grę, tylko postacie prowadzone przez sam serwer. Widzisz je tak jak innych graczy: biegają, używają umiejętności, noszą prawdziwy ekwipunek, a ich postępy zapisują się w bazie. Każdy bot ma osobowość i ambicję, które decydują o tym, czym się zajmuje.
            </p>
        </div>

        <!-- Sekcja 1: Rozwoj i walka -->
        <div class="bot-section-title">⚔️ Rozwój i walka</div>
        <div class="bot-grid-4">
            <div class="bot-feature-card">
                <h4>Wszystkie klasy</h4>
                <p>Wojownik, Ninja (sztylet i łuk), Sura i Szaman — z kombosami, buffami i rotacją umiejętności.</p>
            </div>
            <div class="bot-feature-card">
                <h4>Mapy i podróże</h4>
                <p>Od wiosek przez Dolinę Orków, pustynię i Górę Sohan po Doyyumhwaji. Boty omijają przeszkody i przechodzą między mapami.</p>
            </div>
            <div class="bot-feature-card">
                <h4>Metiny i bossowie</h4>
                <p>Łowcy Metinów, drużyny na Wodza Orków, Królową Pająków czy Ognistego Króla, rajdy do Wieży Demonów i Katakumb.</p>
            </div>
            <div class="bot-feature-card">
                <h4>Misje</h4>
                <p>Biolog, polowania, Medale Konne i próby na konia bojowego — boty robią je same.</p>
            </div>
        </div>

        <!-- Sekcja 2: Handel i gospodarka -->
        <div class="bot-section-title">💰 Handel i gospodarka</div>
        <div class="bot-section-desc">
            Boty tworzą prawdziwy rynek. Wystawiają sklepy offline i stragany, kupują od siebie nawzajem i od Ciebie, a ceny zależą od podaży, popytu, stawek świata i inflacji. Dzięki temu na straganach znajdziesz materiały, księgi, szarfy, Smocze Kamienie czy przedmioty +9 — i możesz na nich zarabiać.
        </div>
        <div class="econ-list">
            <div class="econ-card"><b>Handlarze</b> żyją z handlu i trzymają pełne stragany.</div>
            <div class="econ-card"><b>Hazardziści</b> ulepszają przedmioty „na szczęście” i sprzedają udane.</div>
            <div class="econ-card"><b>Perfekcjoniści</b> czekają na idealny przedmiot z rynku albo robią go sami.</div>
            <div class="econ-card"><b>Dropki</b> farmią jedną rzecz na sprzedaż: księgi z Metinów, broń 30 lvl, medale albo surowce na budowy gildii.</div>
        </div>

        <!-- Sekcja 3: Ekwipunek i systemy -->
        <div class="bot-section-title">🔧 Ekwipunek i systemy</div>
        <div class="bot-grid-4">
            <div class="bot-feature-card">
                <h4>Kowal i bonusy</h4>
                <p>Ulepszają ekwipunek, używają zwojów, dobierają bonusy do klasy, a przedmioty od 30 lvl niosą do kowala gildyjnego.</p>
            </div>
            <div class="bot-feature-card">
                <h4>Alchemia</h4>
                <p>Zbierają Cor Draconis, ulepszają Smocze Kamienie i wystawiają nadwyżki na sprzedaż.</p>
            </div>
            <div class="bot-feature-card">
                <h4>Szarfy i juki</h4>
                <p>Budują własne szarfy, wymieniają materiały i odblokowują juki konne.</p>
            </div>
            <div class="bot-feature-card">
                <h4>Ryby, ruda i zioła</h4>
                <p>Łowią ryby, kopią rudę, zbierają zioła i robią z nich mikstury.</p>
            </div>
        </div>

        <!-- Sekcja 4: Druzyny, gildie i wojny -->
        <div class="bot-section-title">🏰 Drużyny, gildie i wojny</div>
        <div class="bot-grid-4">
            <div class="bot-feature-card">
                <h4>Drużyny</h4>
                <p>Boty łączą się w drużyny od 2 do 8 osób. Możesz zaprosić bota do swojej — szaman Cię buffuje, łucznik luruje.</p>
            </div>
            <div class="bot-feature-card">
                <h4>Gildie</h4>
                <p>Najsilniejsze boty zakładają gildie, rekrutują członków i oddają doświadczenie gildii.</p>
            </div>
            <div class="bot-feature-card">
                <h4>Ziemia i budynki</h4>
                <p>Mistrzowie kupują działki, a gildia robi uczciwą zrzutkę na Kwaterę Główną, kowala i alchemika.</p>
            </div>
            <div class="bot-feature-card">
                <h4>Wojny gildii</h4>
                <p>Gildie tego samego królestwa walczą na mapie gildii, pijąc mikstury i wracając z obozu. Najwyżej 20 na 20.</p>
            </div>
        </div>

        <!-- Sekcja 5: Kontakt z graczem -->
        <div class="bot-section-title">💬 Kontakt z graczem</div>
        <div class="bot-grid-4">
            <div class="bot-feature-card">
                <h4>Rozmowy</h4>
                <p>Boty piszą na czacie, odpowiadają na wiadomości i ogłoszenia handlowe („kupię...”, „sprzedam...”).</p>
            </div>
            <div class="bot-feature-card">
                <h4>Pojedynki i PvP</h4>
                <p>Przyjmują wyzwania na pojedynek, bronią się przed napastnikami, a w wojnach królestw walczą z innymi.</p>
            </div>
            <div class="bot-feature-card">
                <h4>Statusy nad głowami</h4>
                <p>Nad każdym botem widać, co właśnie robi: poluje, handluje, łowi, idzie do miasta.</p>
            </div>
            <div class="bot-feature-card">
                <h4>Towarzysz</h4>
                <p>Twój własny bot, który chodzi z Tobą, zakłada to, co mu dasz, i walczy u Twojego boku.</p>
            </div>
        </div>

        <div style="text-align: center; margin-top: 30px;">
            <a href="https://metin2sp.pl/wiki/" target="_blank" rel="noopener" style="display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); color: #000; font-size: 15px; font-weight: 800; padding: 12px 28px; border-radius: 8px; text-decoration: none; text-transform: uppercase; box-shadow: 0 4px 18px rgba(234, 179, 8, 0.4);">
                📖 Przejdź do Pełnej Wiki Silnika MT2009 ↗
            </a>
        </div>
    </div>

    <!-- Zakladka 2: Rejestracja -->
    <div id="tab-register" class="tab-content " style="max-width: 480px; margin: 0 auto;">
        <h2 style="color: #facc15; font-size: 22px; font-weight: 800; margin-bottom: 6px; text-align: center;">📝 Szybka Rejestracja</h2>
        <p style="text-align: center; color: #94a3b8; font-size: 13.5px; margin-bottom: 20px;">Darmowe konto w kilka sekund • Automatyczny stały VIP 2038</p>

        <!-- Informacja o darmowych SM -->
        <div style="background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(202, 138, 4, 0.08) 100%); border: 1px solid rgba(234, 179, 8, 0.4); border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.3);">
            <div style="color: #facc15; font-weight: 800; font-size: 14.5px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px;">
                <span>🪙 🎁</span> <span>DARMOWE SMOCZE MONETY (SM)!</span>
            </div>
            <p style="color: #cbd5e1; font-size: 13.5px; line-height: 1.5; margin: 0;">
                Po odbiór <b>darmowych SM</b> zgłoś się do administratora poprzez zgłoszenie w zakładce <a href="javascript:void(0)" onclick="showTab('support')" style="color: #facc15; font-weight: 800; text-decoration: underline;">Pomoc / Support</a>.
            </p>
        </div>

                    <div class="alert alert-error"></div>
        
        <form method="POST">
            <input type="hidden" name="action" value="register">
            <div class="form-group">
                <label>Login do gry</label>
                <input type="text" name="login" required placeholder="np. gracz123" maxlength="16" autocomplete="off">
            </div>
            <div class="form-group">
                <label>Hasło</label>
                <input type="password" name="password" required placeholder="Minimum 6 znaków" minlength="6">
            </div>
            <div class="form-group">
                <label>Powtórz hasło</label>
                <input type="password" name="password_repeat" required placeholder="Wpisz hasło ponownie">
            </div>
            <div class="form-group">
                <label>Kod usunięcia postaci <span style="font-size: 11px; color: #64748b;">(opcjonalny, domyślnie 1234567)</span></label>
                <input type="text" name="social_id" placeholder="1234567" pattern="[0-9]{7}" maxlength="7">
            </div>
            <button type="submit" class="btn-submit">Zarejestruj konto i odbierz VIP</button>
        </form>
    </div>


    <!-- Zakladka: Czat Graczy -->
    <div id="tab-chat" class="tab-content " style="max-width: 860px; margin: 0 auto;">
        <div style="text-align: center; margin-bottom: 18px;">
            <h2 style="color: #facc15; font-size: 22px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;">💬 Czat Ogólny GRWMT2</h2>
            <p style="color: #94a3b8; font-size: 13.5px; margin: 6px auto 0; max-width: 560px;">Pisz na żywo ze społecznością! Umawiaj się na expienie, handel w M1 i wyprawy gildyjne.</p>
        </div>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
            <span style="font-size: 12.5px; color: #4ade80; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;"><span class="chat-pulse"></span> Czat aktywny – odświeżanie co 3s</span>
            <span style="font-size: 11.5px; color: #64748b; cursor: pointer; text-decoration: underline;" onclick="toggleAdminBox()">🔐 Admin PIN</span>
        </div>
        <div class="chat-box" id="chat-box"><div style="text-align:center;color:#475569;padding:20px;">Ładowanie czatu...</div></div>
        <div id="chat-err" style="display:none; margin-top:8px; background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.35); color:#fca5a5; padding:8px 12px; border-radius:6px; font-size:12.5px;"></div>
        <form id="chat-form" onsubmit="sendMsg(event)" style="margin:0;">
            <div class="chat-input-wrap">
                <input type="text" id="chat-nick" class="chat-nick" placeholder="Twój Nick" maxlength="24" required>
                <input type="text" id="chat-inp" class="chat-inp" placeholder="Napisz wiadomość..." maxlength="250" autocomplete="off" required>
                <button type="submit" id="chat-btn" class="chat-send">Wyślij 🚀</button>
            </div>
        </form>
        <div class="chat-emos">
            <span style="font-size:11px;color:#64748b;font-weight:700;text-transform:uppercase;">Emotki:</span>
            <button type="button" class="chat-emo" onclick="addEmo('😊')">😊</button>
            <button type="button" class="chat-emo" onclick="addEmo('😃')">😃</button>
            <button type="button" class="chat-emo" onclick="addEmo('😉')">😉</button>
            <button type="button" class="chat-emo" onclick="addEmo('🔥')">🔥</button>
            <button type="button" class="chat-emo" onclick="addEmo('⚔️')">⚔️</button>
            <button type="button" class="chat-emo" onclick="addEmo('🛡️')">🛡️</button>
            <button type="button" class="chat-emo" onclick="addEmo('👑')">👑</button>
            <button type="button" class="chat-emo" onclick="addEmo('❤️')">❤️</button>
        </div>
        <div id="admin-box" style="display:none; margin-top:10px; background:rgba(0,0,0,0.3); border:1px solid rgba(234,179,8,0.3); border-radius:6px; padding:8px 12px;">
            <span style="font-size:12px;color:#facc15;font-weight:700;">PIN Administratora:</span>
            <div style="display:flex;gap:8px;margin-top:6px;">
                <input type="password" id="admin-pin-inp" placeholder="Wpisz PIN" style="background:rgba(10,8,20,0.9);border:1px solid rgba(255,255,255,0.12);border-radius:6px;padding:5px 10px;color:#fff;font-size:12px;width:160px;">
                <button type="button" onclick="savePin()" style="background:#eab308;color:#000;border:none;font-weight:700;border-radius:6px;padding:5px 12px;cursor:pointer;font-size:12px;">Zapisz</button>
            </div>
        </div>
    </div>
    <!-- Zakladka 3: Rankingi (Poziom, Czas Gry, Gildie + Bot/Gracz) -->
    <div id="tab-ranking" class="tab-content ">
        <div style="display: flex; justify-content: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap;">
            <button type="button" class="rank-sub-btn active" onclick="showRankSub('level', this)">🏆 Top Poziom (Gracze & Boty)</button>
            <button type="button" class="rank-sub-btn" onclick="showRankSub('time', this)">⏳ Top Czas Gry</button>
            <button type="button" class="rank-sub-btn" onclick="showRankSub('guilds', this)">🛡️ Top Gildie</button>
        </div>

        <!-- 1. Ranking Poziomow -->
        <div id="rank-sub-level">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                <h3 style="color: #facc15; font-size: 18px; font-weight: 800;">🏆 Top 25 Graczy według Poziomu</h3>
                <button type="button" style="background: rgba(255,255,255,0.06); border: 1px solid #332d4a; color: #94a3b8; padding: 5px 12px; border-radius: 6px; cursor: pointer;" onclick="location.reload()">🔄 Odśwież</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th style="width: 50px; text-align: center;">#</th>
                        <th>Postać</th>
                        <th>Klasa</th>
                        <th>Poziom</th>
                        <th>EXP</th>
                        <th>Czas Gry</th>
                    </tr>
                </thead>
                <tbody>
                                    </tbody>
            </table>
        </div>

        <!-- 2. Ranking Czasu Gry -->
        <div id="rank-sub-time" style="display: none;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                <h3 style="color: #facc15; font-size: 18px; font-weight: 800;">⏳ Top 25 Najbardziej Aktywnych Postaci</h3>
                <button type="button" style="background: rgba(255,255,255,0.06); border: 1px solid #332d4a; color: #94a3b8; padding: 5px 12px; border-radius: 6px; cursor: pointer;" onclick="location.reload()">🔄 Odśwież</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th style="width: 50px; text-align: center;">#</th>
                        <th>Postać</th>
                        <th>Klasa</th>
                        <th>Spędzony Czas</th>
                        <th>Poziom</th>
                    </tr>
                </thead>
                <tbody>
                                    </tbody>
            </table>
        </div>

        <!-- 3. Ranking Gildii -->
        <div id="rank-sub-guilds" style="display: none;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                <h3 style="color: #facc15; font-size: 18px; font-weight: 800;">🛡️ Ranking Najsilniejszych Gildii</h3>
                <button type="button" style="background: rgba(255,255,255,0.06); border: 1px solid #332d4a; color: #94a3b8; padding: 5px 12px; border-radius: 6px; cursor: pointer;" onclick="location.reload()">🔄 Odśwież</button>
            </div>
            <table>
                <thead>
                    <tr>
                        <th style="width: 50px; text-align: center;">#</th>
                        <th>Nazwa Gildii</th>
                        <th>Poziom Gildii</th>
                        <th>Punkty Drabinkowe</th>
                    </tr>
                </thead>
                <tbody>
                                    </tbody>
            </table>
        </div>
    </div>

    <!-- Zakladka 4: Aktualizacje -->
    <div id="tab-updates" class="tab-content ">
        <div style="text-align: center; margin-bottom: 22px;">
            <h2 style="color: #facc15; font-size: 22px; font-weight: 800; margin-bottom: 6px;">📰 Dziennik Zmian i Aktualizacji</h2>
            <p style="color: #94a3b8; font-size: 13.5px;">Bieżące prace rozwojowe, nowości i usprawnienia na serwerze GRWMT2.</p>
        </div>

            </div>

    <!-- Zakladka 5: Pomoc / Support -->
    <div id="tab-support" class="tab-content " style="max-width: 600px; margin: 0 auto;">
        <h2 style="color: #facc15; font-size: 22px; font-weight: 800; text-align: center; margin-bottom: 6px;">🎫 Centrum Pomocy & Zgłoszenia</h2>
        <p style="text-align: center; color: #94a3b8; font-size: 13.5px; margin-bottom: 20px;">Masz problem lub propozycję? Wyślij wiadomość bezpośrednio do administracji na Discordzie.</p>

                    <div class="alert alert-error"></div>
        
        <form method="POST">
            <input type="hidden" name="action" value="ticket">
            <div class="form-group">
                <label>Twój Nick w grze</label>
                <input type="text" name="nick" required placeholder="np. Sapiesik" maxlength="24">
            </div>
            <div class="form-group">
                <label>Kategoria zgłoszenia</label>
                <select name="category">
                    <option value="Problem techniczny / Logowanie">Problem techniczny / Logowanie</option>
                    <option value="Zgłoszenie błędu (Bug)">Zgłoszenie błędu (Bug)</option>
                    <option value="Pytanie o grę">Pytanie o grę</option>
                    <option value="Propozycja / Ulepszenie">Propozycja / Ulepszenie</option>
                    <option value="Inne">Inne</option>
                </select>
            </div>
            <div class="form-group">
                <label>Kontakt zwrotny (Discord / E-mail / Telefon - opcjonalnie)</label>
                <input type="text" name="contact" placeholder="np. Discord: user#1234">
            </div>
            <div class="form-group">
                <label>Temat zgłoszenia</label>
                <input type="text" name="subject" required placeholder="Krótki opis sprawy" maxlength="80">
            </div>
            <div class="form-group">
                <label>Treść wiadomości</label>
                <textarea name="message" rows="4" required placeholder="Opisz dokładnie swój problem lub propozycję..."></textarea>
            </div>
            <button type="submit" class="btn-submit">Wyślij zgłoszenie na Discord</button>
        </form>
    </div>

    <!-- Zakladka 6: Jak dolaczyc -->
    <div id="tab-join" class="tab-content ">
        <div class="download-box">
            <h2 style="color: #facc15; font-size: 24px; font-weight: 900; margin-bottom: 6px;">📥 Pobierz Pełnego Klienta Gry</h2>
            <p style="color: #cbd5e1; font-size: 14px; margin-bottom: 20px;">Wstępnie skonfigurowana paczka gry GRWMT2 z wbudowanym Trackerem Bossów i 3 kanałami.</p>
            <a href="/GRWMT2.rar" class="btn-download-big">
                🚀 POBIERZ GRWMT2.RAR (~2.0 GB)
            </a>
            <div style="color: #94a3b8; font-size: 12.5px; margin-top: 14px; font-weight: 600;">
                Bezpośredni, szybki download z naszego serwera VPS • Czysta instalacja bez wirusów
            </div>
        </div>

        <h3 style="color: #facc15; font-size: 20px; font-weight: 900; margin-bottom: 18px;">🎮 3 Proste Kroki do Rozpoczęcia Gry:</h3>
        
        <!-- Krok 1 -->
        <div style="background: rgba(15, 13, 25, 0.85); border: 1px solid rgba(234, 179, 8, 0.3); border-radius: 12px; padding: 20px; margin-bottom: 16px; display: flex; gap: 18px; align-items: flex-start;">
            <div class="step-num">1</div>
            <div>
                <h4 style="color: #facc15; font-size: 17px; font-weight: 900; margin-bottom: 6px;">Krok 1: Załóż darmowe konto gracza</h4>
                <p style="color: #f8fafc; font-size: 14.5px; line-height: 1.6; font-weight: 600;">
                    Przejdź do zakładki <a href="javascript:void(0)" onclick="showTab('register')" style="color: #38bdf8; font-weight: 900; text-decoration: underline;">Szybka Rejestracja</a> u góry strony.<br>
                    Wpisz swój <b>Login</b> i <b>Hasło</b>. Twoje konto jest gotowe w <b>5 sekund</b> i posiada aktywny <b>stały pakiet VIP</b>!
                </p>
            </div>
        </div>

        <!-- Krok 2 -->
        <div style="background: rgba(15, 13, 25, 0.85); border: 1px solid rgba(234, 179, 8, 0.3); border-radius: 12px; padding: 20px; margin-bottom: 16px; display: flex; gap: 18px; align-items: flex-start;">
            <div class="step-num">2</div>
            <div>
                <h4 style="color: #facc15; font-size: 17px; font-weight: 900; margin-bottom: 6px;">Krok 2: Pobierz i wypakuj archiwum z grą</h4>
                <p style="color: #f8fafc; font-size: 14.5px; line-height: 1.6; font-weight: 600;">
                    Kliknij powyższy złoty przycisk <b>POBIERZ GRWMT2.RAR (2.0 GB)</b>.<br>
                    Po pobraniu wypakuj całą zawartość programem <b>WinRAR</b> lub <b>7-Zip</b> do dowolnego folderu (np. <b>D:\GRWMT2</b>). Gra nie wymaga instalatora!
                </p>
            </div>
        </div>

        <!-- Krok 3 -->
        <div style="background: rgba(30, 24, 45, 0.95); border: 2px solid #eab308; border-radius: 12px; padding: 22px; margin-bottom: 16px; display: flex; gap: 18px; align-items: flex-start; box-shadow: 0 4px 22px rgba(234, 179, 8, 0.25);">
            <div class="step-num" style="background: #eab308; color: #000;">3</div>
            <div>
                <h4 style="color: #facc15; font-size: 18px; font-weight: 900; margin-bottom: 8px;">Krok 3: Uruchom grę przez Aktualizuj-i-graj.bat</h4>
                <p style="color: #ffffff; font-size: 15px; line-height: 1.7; font-weight: 600;">
                    W wypakowanym folderze z grą uruchom plik <b style="color: #facc15; font-size: 15.5px;">Aktualizuj-i-graj.bat</b>.<br>
                    <span style="color: #ef4444; font-weight: 900; font-size: 15.5px;">⚠️ BARDZO WAŻNE:</span> Gdy pojawi się okno patchera i skończy sprawdzać pliki, <b style="color: #facc15; font-size: 15.5px;">zamknij patcher krzyżykiem [X] w prawym górnym rogu</b>.<br>
                    <span style="color: #4ade80; font-weight: 800;">Nie klikaj przycisku „GRAJ” w patcherze!</span> Gra uruchomi się automatycznie z wszystkimi <b>3 kanałami (CH1, CH2, CH3)</b> oraz wbudowanym <b>Trackerem Bossów i Metinów</b>!
                </p>
            </div>
        </div>
    </div>

    <!-- Stopka z tworcy i administracja -->
    <div style="text-align: center; margin-top: 35px; padding: 25px 15px; border-top: 1px solid rgba(255,255,255,0.08);">
        <div style="font-size: 15px; font-weight: 800; color: #f8fafc; margin-bottom: 10px;">
            👑 Administracja & Twórcy Serwera GRWMT2:
        </div>
        <div style="display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px;">
            <span class="admin-pill">👑 [SA] Sapiesik</span>
            <span class="admin-pill">🛡️ [GA] Zaxep</span>
        </div>
        <div style="color: #64748b; font-size: 12px;">
            GRWMT2 © 2026 • Oficjalny Garwoliński Serwer Metin2 • Wszelkie prawa zastrzeżone
        </div>
    </div>
</div>

<audio id="m2-audio" loop></audio>
<script>
function showTab(tabName, btnEl) {
    var tabs = document.querySelectorAll('.tab-content');
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove('active');
    }
    var btns = document.querySelectorAll('.tab-btn');
    for (var j = 0; j < btns.length; j++) {
        btns[j].classList.remove('active');
    }
    var target = document.getElementById('tab-' + tabName);
    if (target !== null) {
        target.classList.add('active');
    }
    if (btnEl !== null && btnEl !== undefined) {
        btnEl.classList.add('active');
    } else {
        var matchingBtn = document.querySelector('.tab-btn[data-tab="' + tabName + '"]');
        if (matchingBtn !== null) matchingBtn.classList.add('active');
    }
}

function showRankSub(type, btnEl) {
    var lvl = document.getElementById('rank-sub-level');
    var time = document.getElementById('rank-sub-time');
    var guilds = document.getElementById('rank-sub-guilds');
    if (lvl) lvl.style.display = (type === 'level') ? 'block' : 'none';
    if (time) time.style.display = (type === 'time') ? 'block' : 'none';
    if (guilds) guilds.style.display = (type === 'guilds') ? 'block' : 'none';
    
    var btns = document.querySelectorAll('.rank-sub-btn');
    for (var i = 0; i < btns.length; i++) {
        btns[i].classList.remove('active');
    }
    if (btnEl !== null && btnEl !== undefined) {
        btnEl.classList.add('active');
    }
}

var bgmTracks = [
    { title: 'Enter The East', file: 'bgm/enter_the_east.mp3' },
    { title: 'Save Me', file: 'bgm/save_me.mp3' }
];
var currentBgmIdx = 0;
var audioEl = document.getElementById('m2-audio');
var playBtn = document.getElementById('btn-bgm-play');
var titleLbl = document.getElementById('bgm-track-title');

function loadBgm(idx) {
    if (audioEl === null) return;
    currentBgmIdx = idx % bgmTracks.length;
    audioEl.src = bgmTracks[currentBgmIdx].file;
    if (titleLbl !== null) titleLbl.innerText = bgmTracks[currentBgmIdx].title;
}
loadBgm(0);

function toggleBgm() {
    if (audioEl === null) return;
    if (audioEl.paused) {
        audioEl.play().then(function() {
            if (playBtn !== null) playBtn.innerText = '⏸';
        }).catch(function() {});
    } else {
        audioEl.pause();
        if (playBtn !== null) playBtn.innerText = '▶';
    }
}

// Automatyczne odpalanie muzyki po wejsciu na strone
function startAutoPlay() {
    if (audioEl === null) return;
    var p = audioEl.play();
    if (p !== undefined) {
        p.then(function() {
            if (playBtn !== null) playBtn.innerText = '⏸';
        }).catch(function() {
            var activateOnClick = function() {
                if (audioEl !== null && audioEl.paused) {
                    audioEl.play().then(function() {
                        if (playBtn !== null) playBtn.innerText = '⏸';
                    }).catch(function() {});
                }
                document.removeEventListener('click', activateOnClick);
                document.removeEventListener('keydown', activateOnClick);
                document.removeEventListener('touchstart', activateOnClick);
            };
            document.addEventListener('click', activateOnClick, { once: true });
            document.addEventListener('keydown', activateOnClick, { once: true });
            document.addEventListener('touchstart', activateOnClick, { once: true });
        });
    }
}
window.addEventListener('DOMContentLoaded', startAutoPlay);
window.addEventListener('load', startAutoPlay);
setTimeout(startAutoPlay, 300);

setInterval(function() {
    fetch('?api=live')
        .then(function(r) { return r.json(); })
        .then(function(d) {
            if (d.online && document.getElementById('stat-online')) document.getElementById('stat-online').innerText = d.online;
            if (d.ch1 && document.getElementById('stat-ch1')) document.getElementById('stat-ch1').innerText = d.ch1;
            if (d.ch2 && document.getElementById('stat-ch2')) document.getElementById('stat-ch2').innerText = d.ch2;
            if (d.ch3 && document.getElementById('stat-ch3')) document.getElementById('stat-ch3').innerText = d.ch3;
            if (d.accounts && document.getElementById('stat-accounts')) document.getElementById('stat-accounts').innerText = d.accounts;
            if (d.players && document.getElementById('stat-players')) document.getElementById('stat-players').innerText = d.players;
            if (d.guilds && document.getElementById('stat-guilds')) document.getElementById('stat-guilds').innerText = d.guilds;
        })
        .catch(function() {});
}, 20000);
</script>
<a href="javascript:void(0)" class="chat-float" onclick="showTab('chat',null);document.getElementById('tab-chat').scrollIntoView({behavior:'smooth'});">
    💬 Czat Online <span class="chat-pulse"></span>
</a>
<script>
var lastChatCount = 0;
var chatScrolledUp = false;

function getPin() { return localStorage.getItem('grw_pin') || ''; }
function savePin() {
    var p = document.getElementById('admin-pin-inp').value.trim();
    localStorage.setItem('grw_pin', p);
    alert('PIN zapisany!');
    document.getElementById('admin-box').style.display='none';
    renderChat(true);
}
function toggleAdminBox() {
    var b = document.getElementById('admin-box');
    b.style.display = (b.style.display==='none'||b.style.display==='') ? 'block' : 'none';
}
function addEmo(e) {
    var inp = document.getElementById('chat-inp');
    if (inp) { inp.value += ' '+e+' '; inp.focus(); }
}

var chatBox = document.getElementById('chat-box');
if (chatBox) {
    chatBox.addEventListener('scroll', function() {
        chatScrolledUp = (chatBox.scrollHeight - chatBox.scrollTop - chatBox.clientHeight) > 40;
    });
}

function renderChat(force) {
    fetch('?api=chat_get')
        .then(function(r){return r.json();})
        .then(function(d){
            if (!d.ok) return;
            var msgs = d.msgs || [];
            if (msgs.length === lastChatCount && !force) return;
            lastChatCount = msgs.length;
            var box = document.getElementById('chat-box');
            if (!box) return;
            if (msgs.length === 0) {
                box.innerHTML = '<div style="text-align:center;color:#475569;padding:25px;font-size:13px;">Brak wiadomości. Przywitaj się! 👋</div>';
                return;
            }
            var pin = getPin();
            var html = '';
            for (var i=0;i<msgs.length;i++) {
                var m = msgs[i];
                var isA = (m.role==='admin');
                var badge = isA ? '<span class="badge-a">👑 '+m.nick+'</span>' : '<span class="badge-p">⚔️ '+m.nick+'</span>';
                var del = (pin==='grw2026') ? '<span class="chat-del" onclick="delMsg('+m.id+')">🗑️</span>' : '';
                html += '<div class="chat-msg'+(isA?' admin-msg':'')+'"><div class="chat-meta">'+badge+'<span class="chat-time">'+m.time+'</span>'+del+'</div><div class="chat-text">'+m.msg+'</div></div>';
            }
            box.innerHTML = html;
            if (!chatScrolledUp) box.scrollTop = box.scrollHeight;
        }).catch(function(){});
}

function delMsg(id) {
    if (!confirm('Usunąć tę wiadomość?')) return;
    var fd = new FormData();
    fd.append('id', id);
    fd.append('pin', getPin());
    fetch('?api=chat_del', {method:'POST',body:fd}).then(function(){renderChat(true);});
}

function sendMsg(e) {
    e.preventDefault();
    var err = document.getElementById('chat-err');
    var nickEl = document.getElementById('chat-nick');
    var inpEl = document.getElementById('chat-inp');
    var btn = document.getElementById('chat-btn');
    if (!nickEl||!inpEl) return;
    if (err) err.style.display='none';
    btn.disabled=true; btn.innerText='Wysyłanie...';
    localStorage.setItem('grw_nick', nickEl.value.trim());
    var fd = new FormData();
    fd.append('nick', nickEl.value.trim());
    fd.append('message', inpEl.value.trim());
    fd.append('pin', getPin());
    fetch('?api=chat_send', {method:'POST',body:fd})
        .then(function(r){return r.json();})
        .then(function(res){
            btn.disabled=false; btn.innerText='Wyślij 🚀';
            if (res.ok) { inpEl.value=''; inpEl.focus(); renderChat(true); }
            else { if(err){err.innerText=res.msg||'Błąd.';err.style.display='block';} }
        }).catch(function(){btn.disabled=false;btn.innerText='Wyślij 🚀';});
}

document.addEventListener('DOMContentLoaded', function() {
    var n = localStorage.getItem('grw_nick');
    var nEl = document.getElementById('chat-nick');
    if (n && nEl) nEl.value = n;
    var p = localStorage.getItem('grw_pin');
    var pEl = document.getElementById('admin-pin-inp');
    if (p && pEl) pEl.value = p;
    renderChat(true);
});
setInterval(function(){renderChat(false);}, 3000);
</script></body>
</html>