Simulatore Plasticità Mentale Auto per Concorsi

// Copyright © 2025 Serem.it. Tutti i diritti riservati.
(function() {
  'use strict';
  
  if (customElements.get('plasticita-mentale-simulatore-auto')) return;
  
  class PlasticitaMentaleSimulatoreAuto extends HTMLElement {
    constructor() {
      super();
      this.basePath = 'https://www.serem.it/wp-content/uploads/2025/03/';
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `
        <style data-s3style="cc1d82ee">
          :host { display: block; font-family: Arial, sans-serif; margin: 0; padding: 0; }
          * { box-sizing: border-box; }
          .seo-title {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
          }
          .header-panel {
            width: 100%; max-width: 800px; margin: 20px auto 0; background: rgba(0,0,0,0.8);
            color: #fff; padding: 10px 20px; border-radius: 8px; display: flex;
            align-items: center; gap: 15px; flex-wrap: wrap;
          }
          .header-panel select {
            padding: 6px; font-size: 14px; border-radius: 4px; border: 1px solid #ccc;
            outline: none; background: #fff; color: #000;
          }
          .header-panel button {
            padding: 8px 16px; border: none; border-radius: 4px; background: #ff6600;
            color: #fff; cursor: pointer; transition: opacity 0.2s;
          }
          .header-panel button:hover { opacity: 0.9; }
          .header-panel button:disabled { background: #666; cursor: not-allowed; }
          .header-info { font-size: 14px; }
          .progress-bar {
            width: 200px; height: 20px; background: #555; border-radius: 4px; overflow: hidden;
          }
          .progress-fill {
            background: #00cc00; width: 0%; height: 100%; transition: width 0.3s ease;
          }
          .game-wrapper {
            position: relative; width: 100%; max-width: 1000px; margin: 20px auto;
          }
          .game-container {
            position: relative; width: 100%; height: 750px;
            background: url('//www.serem.it/wp-content/swift-ai/images/wp-content/uploads/2025/03/Sfondo-simulatore-Auto-S.R.C-jpg.webp') no-repeat center center / cover;
            background-color: #333;
            overflow: hidden; border: 2px solid #333; box-shadow: 0 0 10px rgba(0,0,0,0.5); user-select: none;
          }
          .time-bar {
            position: absolute; bottom: 0; left: 0; width: 100%; height: 20px; background: #555;
            border-radius: 4px; overflow: hidden; z-index: 90;
          }
          .time-fill {
            width: 100%; height: 100%; background: #ff6600; transition: width linear;
          }
          .feedback {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 80%;
            text-align: center; font-size: 24px; color: #fff; padding: 15px 25px; border-radius: 8px;
            background: rgba(0,0,0,0.8); z-index: 150; display: none;
          }
          .feedback.success { background: rgba(0,100,0,0.8); }
          .feedback.failure { background: rgba(100,0,0,0.8); }
          .car {
            position: absolute; max-width: 200px; height: auto; transition: opacity 0.3s; z-index: 10;
            cursor: pointer;
          }
          .car1 { transform: rotate(8deg); width: 11%; }
          .car2 { transform: rotate(-4deg); width: 15%; }
          .car.selected { filter: brightness(1.3) drop-shadow(0 0 10px #00ff00); }
          .highlighted { animation: pulse 1s infinite; }
          @keyframes pulse {
            0% { transform: scale(1) rotate(var(--rotate)); }
            50% { transform: scale(1.1) rotate(var(--rotate)); }
            100% { transform: scale(1) rotate(var(--rotate)); }
          }
          .symbol { position: absolute; width: 50px; height: 50px; z-index: 10; }
          .question-mark {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1);
            width: 75px; height: 75px; opacity: 0; z-index: 50;
          }
          .question-mark.active { animation: growAndFade 3s forwards; }
          @keyframes growAndFade {
            0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            80% { opacity: 1; transform: translate(-50%, -50%) scale(2); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
          }
          .explode-animation {
            position: absolute; width: 80px; height: 80px;
            background: url('//www.serem.it/wp-content/swift-ai/images/wp-content/uploads/2025/03/Simulatore-Effetto-Successo-Esplosione-png.webp') no-repeat center center / contain;
            animation: explode 1s forwards; pointer-events: none; z-index: 100;
          }
          @keyframes explode {
            0% { transform: scale(0.5) rotate(0deg); opacity: 1; }
            50% { transform: scale(2) rotate(90deg); opacity: 1; }
            100% { transform: scale(3) rotate(180deg); opacity: 0; }
          }
          .wrong-x {
            position: absolute; width: 80px; height: 80px;
            background: url('//www.serem.it/wp-content/swift-ai/images/wp-content/uploads/2025/03/Simulatore-Auto-Effetto-Fallimento-X-Rossa-png.webp') no-repeat center center / contain;
            animation: wrong 1s forwards; pointer-events: none; z-index: 100;
          }
          @keyframes wrong {
            0% { transform: scale(0.5); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
          }
          .timer-text {
            position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.5);
            color: #fff; padding: 5px 10px; border-radius: 4px; font-size: 16px; z-index: 100;
          }
          .tutorial, .info-panel {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.8); color: #fff; display: flex; flex-direction: column;
            justify-content: center; align-items: center; z-index: 200; text-align: center; padding: 20px;
            font-size: 24px; pointer-events: auto;
          }
          .tutorial .copyright, .info-panel .copyright { font-size: 14px; margin-top: 20px; opacity: 0.8; }
          .tutorial-start-btn {
            padding: 10px 20px; border: none; border-radius: 4px; background: #ff6600;
            color: #fff; cursor: pointer; font-size: 18px; margin-top: 20px; transition: opacity 0.2s;
          }
          .tutorial-start-btn:hover { opacity: 0.9; }
          .info-panel { display: none; cursor: pointer; }
          .countdown {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.8); color: #fff; display: none; flex-direction: column;
            justify-content: center; align-items: center; z-index: 250; font-size: 80px; font-weight: bold;
          }
          .countdown span { animation: zoomOut 0.7s forwards; }
          @keyframes zoomOut {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(0); opacity: 0; }
          }
          .end-feedback {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.8); color: #fff; display: none; flex-direction: column;
            justify-content: center; align-items: center; z-index: 200; text-align: center; padding: 20px;
            font-size: 20px;
          }
          .end-feedback.success { background: rgba(0,100,0,0.8); }
          .end-feedback.failure { background: rgba(100,0,0,0.8); }
          .end-feedback .summary { font-size: 24px; margin-bottom: 20px; }
          .end-feedback .message { font-size: 20px; font-style: italic; display: block; }
          .fullscreen-btn, .info-btn {
            position: absolute; padding: 8px 16px; border: none; border-radius: 4px;
            background: #ff6600; color: #fff; cursor: pointer; font-size: 14px; z-index: 300;
            transition: opacity 0.2s;
          }
          .fullscreen-btn { bottom: 30px; right: 10px; }
          .info-btn { bottom: 30px; left: 10px; width: 30px; height: 30px; border-radius: 50%; 
                      font-size: 18px; font-weight: bold; display: flex; align-items: center; justify-content: center; }
          .fullscreen-btn:hover, .info-btn:hover { opacity: 0.9; }
          @media (max-width: 1200px) {
            .game-container { height: auto; aspect-ratio: 4 / 3; }
            .header-panel { padding: 8px 10px; gap: 10px; }
            .progress-bar { width: 150px; }
          }
          @media (max-width: 600px) {
            .header-panel { font-size: 12px; }
            .progress-bar { width: 120px; height: 16px; }
            .game-container { min-height: 300px; }
            .car { width: 10%; }
            .symbol { width: 40px; height: 40px; }
            .explode-animation, .wrong-x { width: 60px; height: 60px; }
            .timer-text { font-size: 14px; padding: 4px 8px; }
            .feedback { font-size: 18px; padding: 10px 15px; }
            .tutorial, .info-panel { font-size: 18px; }
            .countdown { font-size: 50px; }
            .end-feedback { font-size: 14px; }
            .end-feedback .summary { font-size: 18px; margin-bottom: 15px; }
            .end-feedback .message { font-size: 14px; }
            .fullscreen-btn { padding: 6px 12px; font-size: 12px; bottom: 25px; }
            .info-btn { width: 25px; height: 25px; font-size: 16px; bottom: 25px; }
            .time-bar { height: 15px; }
            .tutorial-start-btn { padding: 8px 16px; font-size: 16px; }
          }
        </style>
        <h1 class="seo-title">Simulatore di Plasticita Mentale per Concorsi Forze Armate e Polizia</h1>
        <div data-s3cid="24" class="header-panel" role="toolbar" aria-label="Controlli del simulatore">
          <div data-s3cid="25" class="header-info">Difficolta:</div>
          <select id="difficultySelect" aria-label="Seleziona livello di difficolta">
            <option value="hard">Difficile</option>
            <option value="medium" selected>Media</option>
            <option value="easy">Facile</option>
          </select>
          <div data-s3cid="26" class="progress-bar" aria-label="Barra dei progressi">
            <div data-s3cid="27" class="progress-fill" id="progressFill"></div>
          </div>
          <div data-s3cid="28" class="header-info" id="scoreInfo">
            <span id="scoreText">0 / 10</span> | <span id="attemptText">Tentativi: 0 / 30</span>
          </div>
          <button id="startBtn" aria-label="Avvia il simulatore">Avvia Simulatore</button>
          <button id="restartBtn" aria-label="Reset del simulatore">Reset</button>
        </div>
        <div data-s3cid="29" class="game-wrapper">
          <div data-s3cid="30" class="game-container" id="gameContainer" role="region" aria-label="Area di gioco">
            <div data-s3cid="31" class="tutorial" id="tutorial">
              <p>Benvenuto nel Simulatore di Plasticita Mentale!<br>
                Individua la posizione del mezzo che pulsa e la posizione del simbolo A2.<br>Dopo il punto interrogativo,<br> individua prima la posizione dell'auto e poi quella del simbolo A2;)<br>
                Le auto cambiano posizione a ogni step: tieni gli occhi aperti!</p>
              <button class="tutorial-start-btn" id="tutorialStartBtn" aria-label="Avvia il simulatore dal tutorial">Avvia Simulatore</button>
              <div data-s3cid="32" class="copyright">© 2025 Serem.it - Tutti i diritti riservati</div>
            </div>
            <div data-s3cid="33" class="info-panel" id="infoPanel">
              <p><strong>Istruzioni di Gioco</strong><br>
                1. Osserva quale auto pulsa e memorizza la posizione del simbolo A2.<br>
                2. Dopo che gli elementi scompaiono, seleziona l'auto corretta cliccandoci sopra.<br>
                3. Clicca nel settore dove pensi fosse il simbolo A2.<br>
                4. Hai un tempo limitato per rispondere: fai attenzione al timer!<br>
                5. Raggiungi 10 punti per vincere, ma hai solo 30 tentativi.<br>
                <em>Consiglio: esercitati a schermo intero per un'esperienza ottimale.</em><br>
                Clicca qui per chiudere.</p>
              <div data-s3cid="34" class="copyright">© 2025 Serem.it - Tutti i diritti riservati</div>
            </div>
            <div data-s3cid="35" class="countdown" id="countdown"><span></span></div>
            <div data-s3cid="36" class="end-feedback" id="endFeedback"></div>
            <div data-s3cid="37" class="feedback" id="feedback"></div>
            <div data-s3cid="38" class="timer-text" id="timerText"></div>
            <div data-s3cid="39" class="time-bar" id="timeBar"><div data-s3cid="40" class="time-fill" id="timeFill"></div></div>
            <div data-s3cid="41" class="question-mark" id="questionMark">
              <img decoding="async" src="//www.serem.it/wp-content/swift-ai/images/wp-content/uploads/2025/03/Simulatore-Auto-Punto-Interrogativo-png.webp" alt="Punto interrogativo" style="width: 100%; height: 100%;" data-s3image="6aa56aa1/0" />
            </div>
            <button class="fullscreen-btn" id="fullscreenBtn" aria-label="Attiva modalita schermo intero">Schermo Intero</button>
            <button class="info-btn" id="infoBtn" aria-label="Mostra istruzioni di gioco">i</button>
          </div>
        </div>
      `;
      this.correctCarType = null;
      this.symbolSector = null;
      this.gameState = null;
      this.currentHandler = null;
    }

connectedCallback() {
      this.initGame();
    }

disconnectedCallback() {
      if (this.gameState && this.gameState.timerFrame) {
        cancelAnimationFrame(this.gameState.timerFrame);
      }
    }

initGame() {
      var self = this;
      
      var container = this.shadowRoot.getElementById('gameContainer');
      var difficultySelect = this.shadowRoot.getElementById('difficultySelect');
      var progressFill = this.shadowRoot.getElementById('progressFill');
      var scoreText = this.shadowRoot.getElementById('scoreText');
      var attemptText = this.shadowRoot.getElementById('attemptText');
      var startBtn = this.shadowRoot.getElementById('startBtn');
      var restartBtn = this.shadowRoot.getElementById('restartBtn');
      var feedbackDiv = this.shadowRoot.getElementById('feedback');
      var endFeedback = this.shadowRoot.getElementById('endFeedback');
      var timerText = this.shadowRoot.getElementById('timerText');
      var tutorial = this.shadowRoot.getElementById('tutorial');
      var countdown = this.shadowRoot.getElementById('countdown');
      var countdownSpan = countdown.querySelector('span');
      var questionMark = this.shadowRoot.getElementById('questionMark');
      var timeFill = this.shadowRoot.getElementById('timeFill');
      var fullscreenBtn = this.shadowRoot.getElementById('fullscreenBtn');
      var infoBtn = this.shadowRoot.getElementById('infoBtn');
      var infoPanel = this.shadowRoot.getElementById('infoPanel');
      var tutorialStartBtn = this.shadowRoot.getElementById('tutorialStartBtn');

var partialMessages = [
        "Stai piu attento! C'eri quasi.",
        "Bel tentativo, ma rivedi la tua scelta.",
        "Quasi perfetto! Riprova, ci sei quasi."
      ];

var gameActive = false;
      var score = 0;
      var attempts = 0;
      var errorsCount = 0;
      var totalResponseTime = 0;
      var userCarChoice = null;
      var userSymbolSector = null;
      var interactivePhaseActive = false;
      var startTime = 0;
      var timerFrame = null;
      var isFullscreen = false;

var SECTORS = 12;
      var QUESTION_TIME = 3000;
      var TARGET_SCORE = 10;
      var MAX_ATTEMPTS = 30;
      var MIN_DISTANCE = 100;

var difficulties = {
        hard: { displayTime: 1.0, interactiveTime: 2.0 },
        medium: { displayTime: 1.5, interactiveTime: 2.5 },
        easy: { displayTime: 3.0, interactiveTime: 4.0 }
      };

var feedbackMessages = {
        easy: {
          sarcastic: [
            "Dieci punti a Facile? Wow, un detective da cartoni animati! Non esaltarti troppo.",
            "Da 5 a 9 punti? Minimo sindacale, come un vigile che multa solo bici. Sveglia!",
            "Meno di 5 punti? Hai perso contro un'auto e un simbolo. Ripassa i segnali stradali."
          ],
          funny: [
            "Dieci punti a Facile! Re del parcheggio vuoto. Ora non perderti al prossimo livello!",
            "Da 5 a 9 punti? L'auto l'hai vista, ma il simbolo ti ha salutato dal finestrino!",
            "Meno di 5 punti? Auto e simbolo ti ridono dietro. Serve una patente mentale!"
          ],
          formal: [
            "Dieci punti a Facile: buon inizio, ma non basta per i concorsi. Continua cosi.",
            "Da 5 a 9 punti: discreto, ma serve piu precisione nella memoria visiva.",
            "Meno di 5 punti: insufficiente. Intensifica l'allenamento."
          ]
        },
        medium: {
          sarcastic: [
            "Dieci punti a Media? Non male, ma non sei ancora un asso. Il difficile ti aspetta!",
            "Da 5 a 9 punti? Quasi in orario, ma ti sei perso al distributore. Dai!",
            "Meno di 5 punti? Auto e simbolo ti hanno fregato. Prendi appunti!"
          ],
          funny: [
            "Dieci punti a Media! Memoria da pro, ma con qualche graffio sul paraurti!",
            "Da 5 a 9 punti? Hai guidato bene, ma poi hai preso la rotonda sbagliata!",
            "Meno di 5 punti? Surclassato da un furgone e un cartello. Serve benzina!"
          ],
          formal: [
            "Dieci punti a Media: solida performance, ma non perfetta. Rafforza la concentrazione.",
            "Da 5 a 9 punti: accettabile, ma migliorabile. Focalizzati sulla precisione.",
            "Meno di 5 punti: preparazione debole. Serve piu allenamento."
          ]
        },
        hard: {
          sarcastic: [
            "Dieci punti a Difficile? Un genio della strada! Sara solo fortuna?",
            "Da 5 a 9 punti? Non un disastro, ma la tua memoria e ancora in officina.",
            "Meno di 5 punti? Auto e simbolo ti hanno asfaltato. Riparti da zero!"
          ],
          funny: [
            "Dieci punti a Difficile! Pilota mentale da F1, con qualche pit-stop di troppo!",
            "Da 5 a 9 punti? Bene, ma hai preso la rotonda sbagliata. Occhio al simbolo!",
            "Meno di 5 punti? Auto e simbolo ti fanno le pernacchie. Serve un turbo!"
          ],
          formal: [
            "Dieci punti a Difficile: ottimo, mente pronta. Mantieni il livello.",
            "Da 5 a 9 punti: buon potenziale, ma con errori da correggere.",
            "Meno di 5 punti: insufficiente. Rivedi l'approccio e intensifica."
          ]
        }
      };

var getRandomFeedback = function(difficulty, scoreRange) {
        var tones = ["sarcastic", "funny", "formal"];
        var tone = tones[Math.floor(Math.random() * tones.length)];
        return feedbackMessages[difficulty][tone][scoreRange];
      };

var updateUI = function() {
        var percent = (score / TARGET_SCORE) * 100;
        progressFill.style.width = percent + '%';
        scoreText.textContent = score + ' / ' + TARGET_SCORE;
        attemptText.textContent = 'Tentativi: ' + attempts + ' / ' + MAX_ATTEMPTS;
      };

var getRandomSectorPosition = function(sector) {
        var sectorAngle = 360 / SECTORS;
        var angle = sector * sectorAngle + (Math.random() * sectorAngle * 0.8 - sectorAngle * 0.4);
        var radius = Math.min(container.clientWidth, container.clientHeight) / 2 - 50;
        var centerX = container.clientWidth / 2;
        var centerY = container.clientHeight / 2;
        var x = centerX + radius * Math.cos(angle * Math.PI / 180) - 25;
        var y = centerY + radius * Math.sin(angle * Math.PI / 180) - 25;
        return { x: x, y: y };
      };

var createCarsAndSymbol = function() {
        var availableSectors = [];
        for (var i = 0; i < SECTORS; i++) {
          availableSectors.push(i);
        }
        
        for (var i = availableSectors.length - 1; i > 0; i--) {
          var j = Math.floor(Math.random() * (i + 1));
          var temp = availableSectors[i];
          availableSectors[i] = availableSectors[j];
          availableSectors[j] = temp;
        }

var car1Sector = availableSectors.pop();
        var car1Pos = getRandomSectorPosition(car1Sector);
        var car1 = document.createElement('img');
        car1.src = self.basePath + 'Simulatore-Auto-1-Sportiva-Rossa.png';
        car1.classList.add('car', 'car1');
        car1.style.left = car1Pos.x + 'px';
        car1.style.top = car1Pos.y + 'px';
        car1.style.setProperty('--rotate', '8deg');
        container.appendChild(car1);

var car2Sector = availableSectors.pop();
        var car2Pos = getRandomSectorPosition(car2Sector);
        var car2 = document.createElement('img');
        car2.src = self.basePath + 'Simulatore-Auto-2-Furgone-Beige.png';
        car2.classList.add('car', 'car2');
        car2.style.left = car2Pos.x + 'px';
        car2.style.top = car2Pos.y + 'px';
        car2.style.setProperty('--rotate', '-4deg');
        container.appendChild(car2);

var randomPick = Math.random() < 0.5;
        var highlightedCar = randomPick ? car1 : car2;
        highlightedCar.classList.add('highlighted');
        self.correctCarType = highlightedCar.classList.contains('car1') ? 'car1' : 'car2';

var symbolX, symbolY, symbolSector;
        var carPositions = [
          { x: car1Pos.x + 50, y: car1Pos.y + 30 },
          { x: car2Pos.x + 50, y: car2Pos.y + 30 }
        ];
        do {
          symbolSector = availableSectors[Math.floor(Math.random() * availableSectors.length)];
          var symbolPos = getRandomSectorPosition(symbolSector);
          symbolX = symbolPos.x;
          symbolY = symbolPos.y;
        } while (!isPositionValid(symbolX, symbolY, carPositions));

var symbol = document.createElement('img');
        symbol.src = self.basePath + 'Simulatore-Autostrada-Simbolo-dellAutostrada-A2.png';
        symbol.classList.add('symbol');
        symbol.style.left = symbolX + 'px';
        symbol.style.top = symbolY + 'px';
        container.appendChild(symbol);
        self.symbolSector = symbolSector;
      };

var hideElements = function() {
        var els = container.querySelectorAll('.car, .symbol');
        for (var i = 0; i < els.length; i++) {
          els[i].style.opacity = '0';
        }
        questionMark.style.opacity = '1';
        questionMark.classList.add('active');
      };

var showClickEffect = function(x, y, success) {
        var effect = document.createElement('div');
        effect.classList.add(success ? 'explode-animation' : 'wrong-x');
        effect.style.left = (x - 40) + 'px';
        effect.style.top = (y - 40) + 'px';
        container.appendChild(effect);
        setTimeout(function() { effect.remove(); }, 1000);
      };

var showFeedback = function(message, type) {
        feedbackDiv.textContent = message;
        feedbackDiv.className = 'feedback ' + type;
        feedbackDiv.style.display = 'block';
        setTimeout(function() {
          feedbackDiv.style.display = 'none';
          feedbackDiv.className = 'feedback';
        }, 2000);
      };

var handleSymbolClick = function(e) {
        var rect = container.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;
        var centerX = container.clientWidth / 2;
        var centerY = container.clientHeight / 2;
        var angle = Math.atan2(y - centerY, x - centerX) * 180 / Math.PI;
        if (angle < 0) angle += 360;
        userSymbolSector = Math.floor(angle / (360 / SECTORS));
        checkAnswer({ x: x, y: y });
      };

var checkAnswer = function(clickPosition) {
        cancelAnimationFrame(timerFrame);
        interactivePhaseActive = false;
        var responseTime = performance.now() - startTime;
        totalResponseTime += responseTime;
        attempts++;

var diff = Math.abs(userSymbolSector - self.symbolSector);
        if (diff > SECTORS / 2) diff = SECTORS - diff;
        var isSymbolCorrect = difficultySelect.value === 'easy' ? diff <= 2 : diff <= 1;
        var isCarCorrect = userCarChoice === self.correctCarType;

var carElement = container.querySelector('.' + (userCarChoice || 'car1'));
        if (carElement) {
          showClickEffect(carElement.offsetLeft + carElement.offsetWidth / 2, carElement.offsetTop + carElement.offsetHeight / 2, isCarCorrect);
        }
        if (!isCarCorrect) errorsCount++;

showClickEffect(clickPosition.x, clickPosition.y, isSymbolCorrect);
        if (!isSymbolCorrect) errorsCount++;

if (isCarCorrect && isSymbolCorrect) {
          score++;
          showFeedback('Ottimo! Hai ricordato tutto correttamente!', 'success');
        } else if (isCarCorrect || isSymbolCorrect) {
          var randomIndex = Math.floor(Math.random() * partialMessages.length);
          showFeedback(partialMessages[randomIndex], '');
        } else {
          if (score > 0) score--;
          showFeedback('Peccato! Qualcosa e andato storto.', 'failure');
        }

updateUI();
        setTimeout(function() {
          if (score >= TARGET_SCORE || attempts >= MAX_ATTEMPTS) {
            endGame();
          } else {
            nextRound();
          }
        }, 2000);
      };

var startInteractivePhase = function(interactiveTime) {
        clearOldElements();
        interactivePhaseActive = true;

var car1 = document.createElement('img');
        car1.src = self.basePath + 'Simulatore-Auto-1-Sportiva-Rossa.png';
        car1.classList.add('car', 'car1');
        car1.style.left = '39%';
        car1.style.top = '56%';
        car1.style.setProperty('--rotate', '8deg');
        container.appendChild(car1);

var car2 = document.createElement('img');
        car2.src = self.basePath + 'Simulatore-Auto-2-Furgone-Beige.png';
        car2.classList.add('car', 'car2');
        car2.style.left = '49%';
        car2.style.top = '61%';
        car2.style.setProperty('--rotate', '-4deg');
        container.appendChild(car2);

var updateTimer = function(timestamp) {
          if (!startTime) startTime = timestamp;
          var elapsed = (timestamp - startTime) / 1000;
          var remaining = Math.max(0, interactiveTime - elapsed);
          timerText.textContent = remaining.toFixed(1);
          timeFill.style.width = ((remaining / interactiveTime) * 100) + '%';
          if (remaining <= 0) {
            failRoundTimeExpired();
            return;
          }
          timerFrame = requestAnimationFrame(updateTimer);
        };
        startTime = 0;
        timerFrame = requestAnimationFrame(updateTimer);

car1.style.cursor = 'pointer';
        car2.style.cursor = 'pointer';
        
        car1.addEventListener('click', function(e) {
          handleCarClick(car1, e);
        }, { once: true });
        
        car2.addEventListener('click', function(e) {
          handleCarClick(car2, e);
        }, { once: true });
      };

var nextRound = function() {
        if (!gameActive || score >= TARGET_SCORE || attempts >= MAX_ATTEMPTS) return;
        clearOldElements();
        createCarsAndSymbol();
        var displayTime = difficulties[difficultySelect.value].displayTime;
        var interactiveTime = difficulties[difficultySelect.value].interactiveTime;
        setTimeout(hideElements, displayTime * 1000);
        setTimeout(function() {
          startInteractivePhase(interactiveTime);
        }, displayTime * 1000 + QUESTION_TIME);
      };

var startGame = function() {
        gameActive = true;
        score = 0;
        attempts = 0;
        errorsCount = 0;
        totalResponseTime = 0;
        endFeedback.style.display = 'none';
        updateUI();
        startBtn.textContent = 'Gioco in Corso';
        startBtn.disabled = true;
        tutorial.style.display = 'none';
        infoPanel.style.display = 'none';
        startCountdown(nextRound);
      };

var resetGame = function() {
        clearOldElements();
        gameActive = false;
        score = 0;
        attempts = 0;
        errorsCount = 0;
        totalResponseTime = 0;
        isFullscreen = false;
        fullscreenBtn.textContent = 'Schermo Intero';
        updateUI();
        startBtn.textContent = 'Avvia Simulatore';
        startBtn.disabled = false;
        endFeedback.style.display = 'none';
        tutorial.style.display = 'flex';
        infoPanel.style.display = 'none';
        if (document.fullscreenElement) document.exitFullscreen();
      };

var endGame = function() {
        gameActive = false;
        clearOldElements();
        startBtn.textContent = 'Avvia Simulatore';
        startBtn.disabled = false;
        var avgTime = attempts > 0 ? (totalResponseTime / attempts / 1000).toFixed(2) : 0;
        var scoreRange = score >= TARGET_SCORE ? 0 : score >= 5 ? 1 : 2;
        var feedbackText = getRandomFeedback(difficultySelect.value, scoreRange);
        endFeedback.innerHTML = '<div data-s3cid="42" class="summary"><strong>' + (score >= TARGET_SCORE ? 'Complimenti!' : 'Peccato!') + '</strong><br>Hai totalizzato ' + score + ' punti in ' + attempts + ' tentativi con ' + errorsCount + ' errori.<br>Tempo medio: ' + avgTime + ' sec.</div><div data-s3cid="43" class="message">' + feedbackText + '</div>';
        endFeedback.className = 'end-feedback ' + (score >= TARGET_SCORE ? 'success' : 'failure');
        endFeedback.style.display = 'flex';
      };

var toggleInfoPanel = function() {
        infoPanel.style.display = infoPanel.style.display === 'flex' ? 'none' : 'flex';
      };

startBtn.addEventListener('click', function() {
        if (typeof window.dataLayer !== 'undefined') {
          window.dataLayer.push({
            'event': 'avvia_simulatore',
            'event_category': 'Button',
            'event_label': 'Auto_AvviaSimulatore_Top',
            'simulatore': 'Auto'
          });
        }
        startGame();
      });

tutorialStartBtn.addEventListener('click', function() {
        if (typeof window.dataLayer !== 'undefined') {
          window.dataLayer.push({
            'event': 'avvia_simulatore',
            'event_category': 'Button',
            'event_label': 'Auto_AvviaSimulatore_Tutorial',
            'simulatore': 'Auto'
          });
        }
        startGame();
      });

restartBtn.addEventListener('click', resetGame);
      fullscreenBtn.addEventListener('click', toggleFullscreen);
      infoBtn.addEventListener('click', toggleInfoPanel);
      infoPanel.addEventListener('click', toggleInfoPanel);
    }
  }

customElements.define('plasticita-mentale-simulatore-auto', PlasticitaMentaleSimulatoreAuto);
})();