<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kick Off World</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #00CC66;
        }
        .header {
            text-align: center;
            padding: 20px;
            background-color: #00CC66;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: relative;
        }
        .language-selector {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: #4ba064;
            border-radius: 5px;
            padding: 5px;
        }
        .language-selector button {
            background: none;
            border: none;
            color: white;
            padding: 8px 12px;
            margin: 0 2px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        .language-selector button:hover {
            background-color: rgba(255,255,255,0.2);
        }
        .language-selector button.active {
            background-color: #00CC66;
            font-weight: bold;
        }
        .logo {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        .section {
            margin: 30px auto;
            max-width: 1200px;
            padding: 20px;
            background-color: #4ba064;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .section-image {
            width: 100%;
            max-width: 800px;
            height: auto;
            display: block;
            margin: 0 auto 20px;
            border-radius: 4px;
        }
        .game-gallery {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin: 0 auto 20px;
            max-width: 800px;
        }
        .game-gallery[hidden] {
            display: none;
        }
        .gallery-thumb {
            background: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
            border-radius: 6px;
        }
        .gallery-thumb img {
            display: block;
            width: 248px;
            max-width: 100%;
            height: auto;
            border-radius: 6px;
            border: 2px solid rgba(255,255,255,0.35);
            transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .gallery-thumb:hover img,
        .gallery-thumb:focus img {
            transform: scale(1.03);
            border-color: rgba(255,255,255,0.75);
            box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
        }
        .gallery-thumb:focus {
            outline: none;
        }
        .gallery-modal {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.88);
            z-index: 9999;
        }
        .gallery-modal.active {
            display: flex;
        }
        .gallery-modal-image {
            max-width: min(92vw, 1200px);
            max-height: 90vh;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.45);
        }
        .gallery-modal-close {
            position: absolute;
            top: 18px;
            right: 22px;
            background: transparent;
            border: none;
            color: #ffffff;
            font-size: 44px;
            line-height: 1;
            cursor: pointer;
        }
        .section-text {
            text-align: center;
            margin: 20px auto;
            max-width: 800px;
            line-height: 1.6;
            color: #ffffff;
            font-size: 26px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }
        .section-text2 {
            text-align: center;
            margin: 20px auto;
            max-width: 800px;
            line-height: 1.6;
            color: #ffffff;
            font-size: 22px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }
        .os-icons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 20px;
        }
        .os-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width: 80px;
        }
        .os-icon a {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            text-decoration: none;
            width: 100%;
        }
        .os-icon img {
            width: 50px;
            height: 50px;
            margin-bottom: 10px;
        }
        .os-icon span {
            font-size: 14px;
            color: #ffffff;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
            display: block;
            width: 100%;
            text-align: center;
        }
        .footer {
            background-color: #333;
            color: #fff;
            padding: 40px 20px;
            margin-top: 50px;
        }
        .footer-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            max-width: 1200px;
            margin: 0 auto;
        }
        .footer-section {
            flex: 1;
            min-width: 250px;
            margin: 0 15px 20px;
        }
        .footer-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #00CC66;
        }
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .footer-links li {
            margin-bottom: 10px;
        }
        .footer-links a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .footer-links a:hover {
            color: #00CC66;
        }
        .footer-bottom {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #555;
            font-size: 14px;
        }
        .info-section {
            margin: 20px auto;
            max-width: 1200px;
            padding: 20px;
            background-color: #dc3545;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            border-left: 5px solid #c82333;
        }
        .info-text {
            text-align: center;
            margin: 0;
            color: #ffffff;
            font-size: 18px;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            line-height: 1.5;
        }
        .lang-content {
            display: none;
        }
        .lang-content.active {
            display: block;
        }
        .like-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            margin-top: 15px;
        }
        .like-button {
            background-color: transparent;
            border: 3px solid rgba(255, 255, 255, 0.65);
            color: #ffffff;
            width: 92px;
            height: 92px;
            padding: 0;
            border-radius: 999px;
            cursor: pointer;
            font-weight: bold;
            font-size: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .like-button:hover {
            transform: translateY(-1px);
        }
        .like-button:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }
        .like-icon {
            display: inline-block;
            line-height: 1;
            transform: translateY(1px);
            transition: filter 0.2s ease, transform 0.2s ease;
            filter: grayscale(100%);
        }
        .like-container.is-liked .like-button {
            background-color: rgba(0, 204, 102, 0.25);
            border-color: rgba(0, 204, 102, 0.9);
            box-shadow: 0 0 0 4px rgba(0, 204, 102, 0.18);
        }
        .like-container.is-liked .like-icon {
            filter: drop-shadow(0 0 10px rgba(0, 204, 102, 0.9));
            transform: translateY(1px) scale(1.08);
        }
        .like-button::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ffffff;
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
            pointer-events: none;
        }
        .like-container.sparkle .like-button {
            animation: likePop 520ms ease-out both;
        }
        .like-container.sparkle .like-button::after {
            opacity: 1;
            animation: sparkleBurst 700ms ease-out both;
        }
        @keyframes likePop {
            0% { transform: scale(1); }
            45% { transform: scale(1.18); }
            100% { transform: scale(1); }
        }
        @keyframes sparkleBurst {
            0% {
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
                box-shadow:
                    0 0 0 0 rgba(255,255,255,0);
            }
            35% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
                box-shadow:
                    0 -18px 0 0 rgba(255,255,255,0.95),
                    14px -12px 0 0 rgba(255,255,255,0.9),
                    20px 0 0 0 rgba(255,255,255,0.85),
                    14px 12px 0 0 rgba(255,255,255,0.9),
                    0 18px 0 0 rgba(255,255,255,0.95),
                    -14px 12px 0 0 rgba(255,255,255,0.9),
                    -20px 0 0 0 rgba(255,255,255,0.85),
                    -14px -12px 0 0 rgba(255,255,255,0.9);
            }
            100% {
                transform: translate(-50%, -50%) scale(0.25);
                opacity: 0;
                box-shadow:
                    0 -18px 0 0 rgba(255,255,255,0),
                    14px -12px 0 0 rgba(255,255,255,0),
                    20px 0 0 0 rgba(255,255,255,0),
                    14px 12px 0 0 rgba(255,255,255,0),
                    0 18px 0 0 rgba(255,255,255,0),
                    -14px 12px 0 0 rgba(255,255,255,0),
                    -20px 0 0 0 rgba(255,255,255,0),
                    -14px -12px 0 0 rgba(255,255,255,0);
            }
        }
        .like-count {
            color: #ffffff;
            font-size: 18px;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }
        .like-count-label {
            color: #ffffff;
            font-size: 14px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="language-selector">
            <button onclick="switchLanguage('it')" id="btn-it" class="active">IT</button>
            <button onclick="switchLanguage('en')" id="btn-en">EN</button>
        </div>
        <img src="kickoffworld.png" alt="Kick Off World Logo" class="logo">
    </div>
    
    <!-- Italian Content -->
    <div id="content-it" class="lang-content active">
        <div class="info-section" style="display: none;">
            <p class="info-text">
                I nostri giochi sono gratuiti da scaricare, se preferisci puoi fare una donazione, anche piccola, per supportare il nostro lavoro e il nostro impegno!
            </p>
        </div>
        
        <div class="content">
            <div class="section">
                <img src="images/tspm2016.png" alt="Sezione 1" class="section-image">
                <div class="game-gallery">
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G1A.png" data-gallery-alt="The Soccer Player Manager 2016 screenshot A">
                        <img src="images/G1A.png" alt="The Soccer Player Manager 2016 screenshot A">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G1B.png" data-gallery-alt="The Soccer Player Manager 2016 screenshot B">
                        <img src="images/G1B.png" alt="The Soccer Player Manager 2016 screenshot B">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G1C.png" data-gallery-alt="The Soccer Player Manager 2016 screenshot C">
                        <img src="images/G1C.png" alt="The Soccer Player Manager 2016 screenshot C">
                    </button>
                </div>
                <p class="section-text"><h1 class="section-text">The Soccer Player Manager 2016 - v2025.1</h1><h3 class="section-text2">Gioco di calcio manageriale arcade dall'alto parzialmente ispirato a Player Manager, un gioco originariamente creato nel 1990 da ANCO come spin-off del classico gioco "Kick Off".</h3></p>
                
                <div class="os-icons">
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager#download">
                            <img src="icons/windows.svg" alt="Windows">
                            <span>Windows</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager#download">
                            <img src="icons/macos.svg" alt="macOS">
                            <span>macOS</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager#download">
                            <img src="icons/linux.svg" alt="Linux">
                            <span>Linux</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager#download">
                            <img src="icons/android.svg" alt="Android">
                            <span>Android</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.it/games/tspm2016/html5/tspm2016v26.html">
                            <img src="icons/html5.svg" alt="HTML5">
                            <span>HTML5</span>
                        </a>
                    </div>
                </div>

                <div class="like-container" data-section-id="1">
                    <button type="button" class="like-button" data-like-button="1" aria-label="Like"><span class="like-icon" aria-hidden="true">👍</span></button>
                    <span class="like-count"><span class="like-count-number" data-like-count="1">0</span> <span class="like-count-label">LIKES</span></span>
                </div>
            </div>
            
            <div class="section">
                <img src="images/aftertouchsoccer.png" alt="Sezione 2" class="section-image">
                <div class="game-gallery">
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G2A.png" data-gallery-alt="AfterTouch Soccer screenshot A">
                        <img src="images/G2A.png" alt="AfterTouch Soccer screenshot A">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G2B.png" data-gallery-alt="AfterTouch Soccer screenshot B">
                        <img src="images/G2B.png" alt="AfterTouch Soccer screenshot B">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G2C.png" data-gallery-alt="AfterTouch Soccer screenshot C">
                        <img src="images/G2C.png" alt="AfterTouch Soccer screenshot C">
                    </button>
                </div>
                <p class="section-text"><h1 class="section-text">AfterTouch Soccer - v2025.1</h1><h3 class="section-text2">Il successore spirituale di Kick Off 2 con grafica dell'autore originale Steve Screech</h3></p>
                
                <div class="os-icons">
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/aftertouch-soccer#download">
                            <img src="icons/windows.svg" alt="Windows">
                            <span>Windows</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/aftertouch-soccer#download">
                            <img src="icons/macos.svg" alt="macOS">
                            <span>macOS</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/aftertouch-soccer#download">
                            <img src="icons/linux.svg" alt="Linux">
                            <span>Linux</span>
                        </a>
                    </div>
                    <div class="os-icon" >
                        <a href="https://kickoffworld.itch.io/aftertouch-soccer#download">
                            <img src="icons/android.svg" alt="Android">
                            <span>Android</span>
                        </a>
                    </div>
                    <div class="os-icon" style="display: none;">
                        <a href="#">
                            <img src="icons/html5.svg" alt="HTML5">
                            <span>HTML5</span>
                        </a>
                    </div>
                </div>

                <div class="like-container" data-section-id="2">
                    <button type="button" class="like-button" data-like-button="2" aria-label="Like"><span class="like-icon" aria-hidden="true">👍</span></button>
                    <span class="like-count"><span class="like-count-number" data-like-count="2">0</span> <span class="like-count-label">LIKES</span></span>
                </div>
            </div>
            
            <div class="section">
                <img src="images/tspm2022.png" alt="Sezione 3" class="section-image">
                <div class="game-gallery">
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G3A.png" data-gallery-alt="The Soccer Player Manager 2022 screenshot A">
                        <img src="images/G3A.png" alt="The Soccer Player Manager 2022 screenshot A">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G3B.png" data-gallery-alt="The Soccer Player Manager 2022 screenshot B">
                        <img src="images/G3B.png" alt="The Soccer Player Manager 2022 screenshot B">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G3C.png" data-gallery-alt="The Soccer Player Manager 2022 screenshot C">
                        <img src="images/G3C.png" alt="The Soccer Player Manager 2022 screenshot C">
                    </button>
                </div>
                <p class="section-text"><h1 class="section-text">The Soccer Player Manager 2022 - v2025.1</h1><h3 class="section-text2">Versione rinnovata di TSPM 2016, con accesso all'account personale dove puoi salvare i tuoi dati di gioco</h3></p>
                
                <div class="os-icons">
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager-2022#download">
                            <img src="icons/windows.svg" alt="Windows">
                            <span>Windows</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager-2022#download">
                            <img src="icons/macos.svg" alt="macOS">
                            <span>macOS</span>
                        </a>
                    </div>
                    <div class="os-icon" >
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager-2022#download">
                            <img src="icons/linux.svg" alt="Linux">
                            <span>Linux</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager-2022#download">
                            <img src="icons/android.svg" alt="Android">
                            <span>Android</span>
                        </a>
                    </div>
                    <div class="os-icon" style="display: none;">
                        <a href="#">
                            <img src="icons/html5.svg" alt="HTML5">
                            <span>HTML5</span>
                        </a>
                    </div>
                </div>

                <div class="like-container" data-section-id="3">
                    <button type="button" class="like-button" data-like-button="3" aria-label="Like"><span class="like-icon" aria-hidden="true">👍</span></button>
                    <span class="like-count"><span class="like-count-number" data-like-count="3">0</span> <span class="like-count-label">LIKES</span></span>
                </div>
            </div>
            
            <div class="section">
                <img src="images/tspm3.png" alt="Sezione 4" class="section-image">
                <div class="game-gallery" hidden>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G4A.png" data-gallery-alt="The Soccer Player Manager 3 screenshot A">
                        <img src="images/G4A.png" alt="The Soccer Player Manager 3 screenshot A">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G4B.png" data-gallery-alt="The Soccer Player Manager 3 screenshot B">
                        <img src="images/G4B.png" alt="The Soccer Player Manager 3 screenshot B">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G4C.png" data-gallery-alt="The Soccer Player Manager 3 screenshot C">
                        <img src="images/G4C.png" alt="The Soccer Player Manager 3 screenshot C">
                    </button>
                </div>
                <p class="section-text"><h1 class="section-text">The Soccer Player Manager 3</h1><h3 class="section-text2">attualmente in fase di sviluppo</h3></p>
                <div class="like-container" data-section-id="4">
                    <button type="button" class="like-button" data-like-button="4" aria-label="Like"><span class="like-icon" aria-hidden="true">👍</span></button>
                    <span class="like-count"><span class="like-count-number" data-like-count="4">0</span> <span class="like-count-label">LIKES</span></span>
                </div>
            </div>
            
            <div class="section">
                <img src="images/aftertouchsoccer2.png" alt="Sezione 5" class="section-image">
                <div class="game-gallery" hidden>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G5A.png" data-gallery-alt="Aftertouch Soccer 2 screenshot A">
                        <img src="images/G5A.png" alt="Aftertouch Soccer 2 screenshot A">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G5B.png" data-gallery-alt="Aftertouch Soccer 2 screenshot B">
                        <img src="images/G5B.png" alt="Aftertouch Soccer 2 screenshot B">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G5C.png" data-gallery-alt="Aftertouch Soccer 2 screenshot C">
                        <img src="images/G5C.png" alt="Aftertouch Soccer 2 screenshot C">
                    </button>
                </div>
                <p class="section-text"><h1 class="section-text">Aftertouch Soccer 2</h1><h3 class="section-text2">attualmente in fase di sviluppo</h3></p>
                <div class="like-container" data-section-id="5">
                    <button type="button" class="like-button" data-like-button="5" aria-label="Like"><span class="like-icon" aria-hidden="true">👍</span></button>
                    <span class="like-count"><span class="like-count-number" data-like-count="5">0</span> <span class="like-count-label">LIKES</span></span>
                </div>
            </div>
        </div>
        
        <footer class="footer">
            <div class="footer-container">
                <div class="footer-section">
                    <h3 class="footer-title">Giochi</h3>
                    <ul class="footer-links">
                        <li><a href="https://kickoffworld.itch.io/the-soccer-player-manager#download">The Soccer Player Manager 2016</a></li>
                        <li><a href="https://kickoffworld.itch.io/aftertouch-soccer#download">Aftertouch Soccer</a></li>
                        <li><a href="https://kickoffworld.itch.io/the-soccer-player-manager-2022#download">The Soccer Player Manager 2022</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3 class="footer-title">Risorse</h3>
                    <ul class="footer-links">
                        <li><a href="https://kickoffworld.it/games/tspm2016/TheSoccerPlayerManager_2016.pdf">Manuale TSPM 2016</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3 class="footer-title">Contatti</h3>
                    <ul class="footer-links">
                        <li><a href="/cdn-cgi/l/email-protection#87eee9e1e8c7eceee4ece8e1e1f0e8f5ebe3a9eef3">email: <span class="__cf_email__" data-cfemail="1e777078715e75777d7571787869716c727a30776a">[email&#160;protected]</span></a></li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom footer-links">
                <p>2025 Kick Off World - <a href="https://kickoffworld.it/account/privacy-policy.html">Privacy Policy</a></p>
            </div>
        </footer>
    </div>
    
    <!-- English Content -->
    <div id="content-en" class="lang-content">
        <div class="info-section" style="display: none;">
            <p class="info-text">
                Our games are free to download, if you prefer you can make a donation, even a small one, to support our work and our commitment!
            </p>
        </div>
        
        <div class="content">
            <div class="section">
                <img src="images/tspm2016.png" alt="Section 1" class="section-image">
                <div class="game-gallery">
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G1A.png" data-gallery-alt="The Soccer Player Manager 2016 screenshot A">
                        <img src="images/G1A.png" alt="The Soccer Player Manager 2016 screenshot A">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G1B.png" data-gallery-alt="The Soccer Player Manager 2016 screenshot B">
                        <img src="images/G1B.png" alt="The Soccer Player Manager 2016 screenshot B">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G1C.png" data-gallery-alt="The Soccer Player Manager 2016 screenshot C">
                        <img src="images/G1C.png" alt="The Soccer Player Manager 2016 screenshot C">
                    </button>
                </div>
                <p class="section-text"><h1 class="section-text">The Soccer Player Manager 2016 - v2025.1</h1><h3 class="section-text2">Top-down managerial arcade football game partially inspired by Player Manager, a game originally created in 1990 by ANCO as a spin-off to the classic "Kick Off" game.</h3></p>
                
                <div class="os-icons">
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager#download">
                            <img src="icons/windows.svg" alt="Windows">
                            <span>Windows</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager#download">
                            <img src="icons/macos.svg" alt="macOS">
                            <span>macOS</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager#download">
                            <img src="icons/linux.svg" alt="Linux">
                            <span>Linux</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager#download">
                            <img src="icons/android.svg" alt="Android">
                            <span>Android</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.it/games/tspm2016/html5/tspm2016v26.html">
                            <img src="icons/html5.svg" alt="HTML5">
                            <span>HTML5</span>
                        </a>
                    </div>
                </div>

                <div class="like-container" data-section-id="1">
                    <button type="button" class="like-button" data-like-button="1" aria-label="Like"><span class="like-icon" aria-hidden="true">👍</span></button>
                    <span class="like-count"><span class="like-count-number" data-like-count="1">0</span> <span class="like-count-label">LIKES</span></span>
                </div>
            </div>
            
            <div class="section">
                <img src="images/aftertouchsoccer.png" alt="Section 2" class="section-image">
                <div class="game-gallery">
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G2A.png" data-gallery-alt="AfterTouch Soccer screenshot A">
                        <img src="images/G2A.png" alt="AfterTouch Soccer screenshot A">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G2B.png" data-gallery-alt="AfterTouch Soccer screenshot B">
                        <img src="images/G2B.png" alt="AfterTouch Soccer screenshot B">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G2C.png" data-gallery-alt="AfterTouch Soccer screenshot C">
                        <img src="images/G2C.png" alt="AfterTouch Soccer screenshot C">
                    </button>
                </div>
                <p class="section-text"><h1 class="section-text">AfterTouch Soccer - v2025.1</h1><h3 class="section-text2">The Kick Off 2 spiritual successor with Graphics by original author Steve Screech</h3></p>
                
                <div class="os-icons">
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/aftertouch-soccer#download">
                            <img src="icons/windows.svg" alt="Windows">
                            <span>Windows</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/aftertouch-soccer#download">
                            <img src="icons/macos.svg" alt="macOS">
                            <span>macOS</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/aftertouch-soccer#download">
                            <img src="icons/linux.svg" alt="Linux">
                            <span>Linux</span>
                        </a>
                    </div>
                    <div class="os-icon" >
                        <a href="https://kickoffworld.itch.io/aftertouch-soccer#download">
                            <img src="icons/android.svg" alt="Android">
                            <span>Android</span>
                        </a>
                    </div>
                    <div class="os-icon" style="display: none;">
                        <a href="#">
                            <img src="icons/html5.svg" alt="HTML5">
                            <span>HTML5</span>
                        </a>
                    </div>
                </div>

                <div class="like-container" data-section-id="2">
                    <button type="button" class="like-button" data-like-button="2" aria-label="Like"><span class="like-icon" aria-hidden="true">👍</span></button>
                    <span class="like-count"><span class="like-count-number" data-like-count="2">0</span> <span class="like-count-label">LIKES</span></span>
                </div>
            </div>
            
            <div class="section">
                <img src="images/tspm2022.png" alt="Section 3" class="section-image">
                <div class="game-gallery">
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G3A.png" data-gallery-alt="The Soccer Player Manager 2022 screenshot A">
                        <img src="images/G3A.png" alt="The Soccer Player Manager 2022 screenshot A">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G3B.png" data-gallery-alt="The Soccer Player Manager 2022 screenshot B">
                        <img src="images/G3B.png" alt="The Soccer Player Manager 2022 screenshot B">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G3C.png" data-gallery-alt="The Soccer Player Manager 2022 screenshot C">
                        <img src="images/G3C.png" alt="The Soccer Player Manager 2022 screenshot C">
                    </button>
                </div>
                <p class="section-text"><h1 class="section-text">The Soccer Player Manager 2022 - v2025.1</h1><h3 class="section-text2">Renewed version of TSPM 2016, with access to your personal account where you can save your game data</h3></p>
                
                <div class="os-icons">
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager-2022#download">
                            <img src="icons/windows.svg" alt="Windows">
                            <span>Windows</span>
                        </a>
                    </div>
                    <div class="os-icon" >
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager-2022#download">
                            <img src="icons/macos.svg" alt="macOS">
                            <span>macOS</span>
                        </a>
                    </div>
                    <div class="os-icon" >
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager-2022#download">
                            <img src="icons/linux.svg" alt="Linux">
                            <span>Linux</span>
                        </a>
                    </div>
                    <div class="os-icon">
                        <a href="https://kickoffworld.itch.io/the-soccer-player-manager-2022#download">
                            <img src="icons/android.svg" alt="Android">
                            <span>Android</span>
                        </a>
                    </div>
                    <div class="os-icon" style="display: none;" >
                        <a href="#">
                            <img src="icons/html5.svg" alt="HTML5">
                            <span>HTML5</span>
                        </a>
                    </div>
                </div>

                <div class="like-container" data-section-id="3">
                    <button type="button" class="like-button" data-like-button="3" aria-label="Like"><span class="like-icon" aria-hidden="true">👍</span></button>
                    <span class="like-count"><span class="like-count-number" data-like-count="3">0</span> <span class="like-count-label">LIKES</span></span>
                </div>
            </div>
            
            <div class="section">
                <img src="images/tspm3.png" alt="Section 4" class="section-image">
                <div class="game-gallery" hidden>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G4A.png" data-gallery-alt="The Soccer Player Manager 3 screenshot A">
                        <img src="images/G4A.png" alt="The Soccer Player Manager 3 screenshot A">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G4B.png" data-gallery-alt="The Soccer Player Manager 3 screenshot B">
                        <img src="images/G4B.png" alt="The Soccer Player Manager 3 screenshot B">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G4C.png" data-gallery-alt="The Soccer Player Manager 3 screenshot C">
                        <img src="images/G4C.png" alt="The Soccer Player Manager 3 screenshot C">
                    </button>
                </div>
                <p class="section-text"><h1 class="section-text">The Soccer Player Manager 3</h1><h3 class="section-text2">currently work in progress</h3></p>
                <div class="like-container" data-section-id="4">
                    <button type="button" class="like-button" data-like-button="4" aria-label="Like"><span class="like-icon" aria-hidden="true">👍</span></button>
                    <span class="like-count"><span class="like-count-number" data-like-count="4">0</span> <span class="like-count-label">LIKES</span></span>
                </div>
            </div>
            
            <div class="section">
                <img src="images/aftertouchsoccer2.png" alt="Section 5" class="section-image">
                <div class="game-gallery" hidden>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G5A.png" data-gallery-alt="Aftertouch Soccer 2 screenshot A">
                        <img src="images/G5A.png" alt="Aftertouch Soccer 2 screenshot A">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G5B.png" data-gallery-alt="Aftertouch Soccer 2 screenshot B">
                        <img src="images/G5B.png" alt="Aftertouch Soccer 2 screenshot B">
                    </button>
                    <button type="button" class="gallery-thumb" data-gallery-image="images/G5C.png" data-gallery-alt="Aftertouch Soccer 2 screenshot C">
                        <img src="images/G5C.png" alt="Aftertouch Soccer 2 screenshot C">
                    </button>
                </div>
                <p class="section-text"><h1 class="section-text">Aftertouch Soccer 2</h1><h3 class="section-text2">currently work in progress</h3></p>
                <div class="like-container" data-section-id="5">
                    <button type="button" class="like-button" data-like-button="5" aria-label="Like"><span class="like-icon" aria-hidden="true">👍</span></button>
                    <span class="like-count"><span class="like-count-number" data-like-count="5">0</span> <span class="like-count-label">LIKES</span></span>
                </div>
            </div>
        </div>
        
        <footer class="footer">
            <div class="footer-container">
                <div class="footer-section">
                    <h3 class="footer-title">Games</h3>
                    <ul class="footer-links">
                        <li><a href="https://kickoffworld.itch.io/the-soccer-player-manager#download">The Soccer Player Manager 2016</a></li>
                        <li><a href="https://kickoffworld.itch.io/aftertouch-soccer#download">Aftertouch Soccer</a></li>
                        <li><a href="https://kickoffworld.itch.io/the-soccer-player-manager-2022#download">The Soccer Player Manager 2022</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3 class="footer-title">Resources</h3>
                    <ul class="footer-links">
                        <li><a href="https://kickoffworld.it/games/tspm2016/TheSoccerPlayerManager_2016.pdf">TSPM 2016 manual</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3 class="footer-title">Contacts</h3>
                    <ul class="footer-links">
                        <li><a href="/cdn-cgi/l/email-protection#d7beb9b1b897bcbeb4bcb8b1b1a0b8a5bbb3f9bea3">email: <span class="__cf_email__" data-cfemail="95fcfbf3fad5fefcf6fefaf3f3e2fae7f9f1bbfce1">[email&#160;protected]</span></a></li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom footer-links">
                <p>2025 Kick Off World - <a href="https://kickoffworld.it/account/privacy-policy.html">Privacy Policy</a></p>
            </div>
        </footer>
    </div>
    <div class="gallery-modal" id="gallery-modal" aria-hidden="true">
        <button type="button" class="gallery-modal-close" id="gallery-modal-close" aria-label="Close image">&times;</button>
        <img src="" alt="" class="gallery-modal-image" id="gallery-modal-image">
    </div>

    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
        function switchLanguage(lang) {
            // Hide all language content
            const allContent = document.querySelectorAll('.lang-content');
            allContent.forEach(content => {
                content.classList.remove('active');
            });
            
            // Show selected language content
            const selectedContent = document.getElementById('content-' + lang);
            if (selectedContent) {
                selectedContent.classList.add('active');
            }
            
            // Update button states
            const allButtons = document.querySelectorAll('.language-selector button');
            allButtons.forEach(button => {
                button.classList.remove('active');
            });
            
            const selectedButton = document.getElementById('btn-' + lang);
            if (selectedButton) {
                selectedButton.classList.add('active');
            }
            
            // Update HTML lang attribute
            document.documentElement.lang = lang;
        }

        function initLikes() {
            const sections = [1, 2, 3, 4, 5];

            function setButtonsDisabled(sectionId, disabled) {
                document.querySelectorAll('[data-like-button="' + sectionId + '"]').forEach(btn => {
                    btn.disabled = !!disabled;
                });
            }

            function setButtonsPressed(sectionId, pressed) {
                document.querySelectorAll('[data-like-button="' + sectionId + '"]').forEach(btn => {
                    btn.setAttribute('aria-pressed', pressed ? 'true' : 'false');
                });
            }

            function setContainersLiked(sectionId, liked) {
                document.querySelectorAll('.like-container[data-section-id="' + sectionId + '"]').forEach(container => {
                    container.classList.toggle('is-liked', !!liked);
                });
            }

            function triggerSparkle(sectionId) {
                document.querySelectorAll('.like-container[data-section-id="' + sectionId + '"]').forEach(container => {
                    container.classList.remove('sparkle');
                    void container.offsetWidth;
                    container.classList.add('sparkle');
                    window.setTimeout(() => {
                        container.classList.remove('sparkle');
                    }, 750);
                });
            }

            function updateUI(sectionId, count, alreadyLiked) {
                document.querySelectorAll('[data-like-count="' + sectionId + '"]').forEach(countEl => {
                    countEl.textContent = String(count);
                });
                setContainersLiked(sectionId, alreadyLiked);
                setButtonsPressed(sectionId, alreadyLiked);
            }

            fetch('index.php?likes_api=1&action=counts', { credentials: 'same-origin' })
                .then(r => r.json())
                .then(data => {
                    if (!data || !data.ok) return;
                    sections.forEach(id => {
                        const c = data.counts && typeof data.counts[id] !== 'undefined' ? data.counts[id] : 0;
                        const l = data.liked && !!data.liked[id];
                        updateUI(id, c, l);
                        setButtonsDisabled(id, false);
                    });
                })
                .catch(() => {});

            sections.forEach(id => {
                const buttons = document.querySelectorAll('[data-like-button="' + id + '"]');
                if (!buttons.length) return;

                buttons.forEach(btn => {
                    btn.addEventListener('click', function () {
                        setButtonsDisabled(id, true);

                        const body = new URLSearchParams();
                        body.set('action', 'toggle');
                        body.set('section_id', String(id));

                        fetch('index.php?likes_api=1', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
                            body: body.toString(),
                            credentials: 'same-origin'
                        })
                            .then(r => r.json())
                            .then(data => {
                                if (!data || !data.ok) {
                                    setButtonsDisabled(id, false);
                                    return;
                                }
                                updateUI(id, data.count, !!data.liked);
                                setButtonsDisabled(id, false);
                                if (data.liked) {
                                    triggerSparkle(id);
                                }
                            })
                            .catch(() => {
                                setButtonsDisabled(id, false);
                            });
                    });
                });
            });
        }

        function initGallery() {
            const modal = document.getElementById('gallery-modal');
            const modalImage = document.getElementById('gallery-modal-image');
            const closeButton = document.getElementById('gallery-modal-close');
            if (!modal || !modalImage || !closeButton) {
                return;
            }

            function closeModal() {
                modal.classList.remove('active');
                modal.setAttribute('aria-hidden', 'true');
                modalImage.src = '';
                modalImage.alt = '';
            }

            document.querySelectorAll('.gallery-thumb').forEach(button => {
                button.addEventListener('click', function () {
                    const imageSrc = this.getAttribute('data-gallery-image');
                    const imageAlt = this.getAttribute('data-gallery-alt') || '';
                    if (!imageSrc) {
                        return;
                    }
                    modalImage.src = imageSrc;
                    modalImage.alt = imageAlt;
                    modal.classList.add('active');
                    modal.setAttribute('aria-hidden', 'false');
                });
            });

            closeButton.addEventListener('click', closeModal);
            modal.addEventListener('click', function (event) {
                if (event.target === modal) {
                    closeModal();
                }
            });
            document.addEventListener('keydown', function (event) {
                if (event.key === 'Escape' && modal.classList.contains('active')) {
                    closeModal();
                }
            });
        }
        
        // Set default language to Italian on page load
        document.addEventListener('DOMContentLoaded', function() {
            switchLanguage('it');
            initGallery();
            initLikes();
        });
    </script>
</body>
</html>
