<?php
declare(strict_types=1);
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Pragma: no-cache');
header('Expires: 0');
require_once __DIR__ . '/api/session-guard.php';
session_guard_start_session();
session_guard_try_restore_from_remember_cookie();

if (empty($_SESSION['logged_in'])) {
    header('Location: activation/');
    exit;
}

if (!session_guard_current_access_is_valid()) {
    session_guard_refuse_expired_or_disabled(false);
}

session_guard_enforce_current_device_or_exit(false);

$activationMessage = '';
if (!empty($_SESSION['device_status'])) {
    if ($_SESSION['device_status'] === 'added') {
        $activationMessage = 'Chrono Party est activé sur ce navigateur/appareil ✅';
    } elseif ($_SESSION['device_status'] === 'existing') {
        $activationMessage = 'Chrono Party est activé ✅';
    }
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

  <link rel="manifest" href="./manifest.json">
  <meta name="theme-color" content="#7c5cff">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="Chrono Party">
  <link rel="apple-touch-icon" href="./apple-touch-icon.png">

  <title>Chrono Party</title>

<link rel="stylesheet" href="./assets/css/chrono-party.css">
<script>
window.CHRONO_ACCESS_CODE = <?= json_encode($_SESSION['access_token'] ?? '') ?>;
window.CHRONO_ACCESS_LABEL = <?= json_encode($_SESSION['access_label'] ?? '') ?>;
</script>
</head>

<body>
  <?php if ($activationMessage !== ''): ?>
    <div id="activationBanner" style="position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:99999;background:rgba(20,180,120,.96);color:#fff;padding:12px 18px;border-radius:999px;font-family:Arial,Helvetica,sans-serif;font-weight:800;box-shadow:0 12px 40px rgba(0,0,0,.25);text-align:center;max-width:92vw;transition:opacity .35s ease, transform .35s ease;">
      <?= htmlspecialchars($activationMessage, ENT_QUOTES, 'UTF-8') ?>
    </div>
    <script>
      setTimeout(function(){
        var banner = document.getElementById('activationBanner');
        if(!banner) return;
        banner.style.opacity = '0';
        banner.style.transform = 'translateX(-50%) translateY(-12px)';
        setTimeout(function(){
          if(banner && banner.parentNode){
            banner.parentNode.removeChild(banner);
          }
        }, 400);
      }, 2000);
    </script>
  <?php endif; ?>
  <div class="app">

<section class="screen active" id="homeScreen">
  <div class="mobileHomeScreen">

    <div class="mobileHomeTop">
  <button class="mobileProfileBtn" id="btnInstallBadge" type="button" aria-label="Installer l’application">
  📲
</button>
    </div>

    <div class="mobileDecor mobileDecor1 homeFloat1">🎉</div>
<div class="mobileDecor mobileDecor2 homeFloat2">🎭</div>
<div class="mobileDecor mobileDecor3 homeFloat3">⏱️</div>
<div class="mobileDecor mobileDecor4 homeFloat4">😂</div>

    <div class="homeHeroCard">
      <div class="mobileHomeCenter">

        <img
          class="mobileHomeLogo homeFade1 homeLogoGlow"
          src="./logo-chronoparty.png"
          alt="Chrono Party"
          onerror="this.style.display='none'; document.getElementById('fallbackHomeBrand').style.display='block';"
        />

        <div id="fallbackHomeBrand" style="display:none">
          <h1 class="mobileFallbackTitle">CHRONO<br><span>PARTY</span></h1>
        </div>

        <div class="mobileHomeCatch homeFade2">
          Le jeu de soirée rapide en 4 manches
        </div>

        <div class="homeFeaturePills homeFade3">
          <span>⏱️ 4 manches</span>
          <span>👥 Entre amis ou en famille</span>
          <span>⚡ Partie rapide</span>
        </div>

        <button class="mobilePlayBtn homePulse" id="btnQuickStart" type="button" aria-label="Lancer une partie rapide">
          <span class="playTriangle">▶</span>
          <span class="playLabel">Jouer</span>
        </button>

        <button class="mobileConfigBtn homeFade4" id="btnGoConfig" type="button">
          🎭 Configurer la partie
        </button>
    
      </div>
    </div>

<div class="mobileHomeLegal">
  <a href="mentions-legales.html" target="_blank" rel="noopener noreferrer">Mentions légales</a>
  <span>•</span>
  <a href="cgv.html" target="_blank" rel="noopener noreferrer">CGV</a>
  <span>•</span>
  <a href="cgu.html" target="_blank" rel="noopener noreferrer">CGU</a>
  <span>•</span>
  <a href="politique-confidentialite.html" target="_blank" rel="noopener noreferrer">Confidentialité</a>
</div>

<div class="mobileHomeBottom">
  <button class="mobileNavBtn" type="button" id="btnHomeStats">
  <span>📊</span>
  <small>Stats</small>
</button>

  <button class="mobileNavBtn" type="button" id="btnGoRules">
    <span>📜</span>
    <small>Règles</small>
  </button>

  <button class="mobileNavBtn" type="button" id="btnVideo">
    <span>▶️</span>
    <small>Vidéo</small>
  </button>

  <button class="mobileNavBtn" type="button" id="btnHomeGift">
    <span>🎁</span>
    <small>Offrir</small>
  </button>

<button class="mobileNavBtn" type="button" id="btnHomeScores">
  <span>👤</span>
  <small>Profil</small>
</button>
</div>

  </div>
</section>
 
    <section class="screen" id="rulesScreen">
      <div class="rulesScreenWrap">
        <div class="rulesCard">
          <div class="rulesTop">
            <h2 class="rulesTitle">Règles du jeu</h2>
            <span class="pill">Chrono Party</span>
          </div>

          <div class="rulesLead">
            Chrono Party se joue en 4 manches. Vous pouvez jouer en mode Classique, avec des équipes qui s’affrontent,
            ou en mode Coopératif, tous ensemble contre le Boss Chrono.
          </div>

          <div class="rulesGrid">
            <div class="ruleBlock">
              <h3>1. Choisir le mode de jeu</h3>
              <p>
                <strong>Mode Classique :</strong> les joueurs sont répartis en équipes et cherchent à marquer le plus de points possible.<br>
                <strong>Mode Coopératif :</strong> tous les joueurs jouent ensemble contre le Boss Chrono. L’objectif n’est plus de battre une autre équipe,
                mais de vaincre le Boss avant d’atteindre la limite de tours.
              </p>
            </div>

            <div class="ruleBlock">
              <h3>2. Mode Classique</h3>
              <p>
                Le mode Classique se joue de 4 à 12 joueurs. Chaque joueur fait deviner des mots à son équipe pendant le temps imparti.
                Chaque mot trouvé rapporte 1 point. À la fin des 4 manches, l’équipe avec le meilleur score total gagne la partie.
              </p>
            </div>

            <div class="ruleBlock">
              <h3>3. Mode Coopératif</h3>
              <p>
                Le mode Coopératif se joue de 2 à 12 joueurs. Les joueurs forment un seul groupe et affrontent le Boss Chrono.
                Le groupe doit réussir les 4 manches en utilisant le moins de tours possible. Si la limite du Boss est dépassée, le Boss gagne.
              </p>
            </div>

            <div class="ruleBlock">
              <h3>4. Les Boss Chrono</h3>
              <p>
                Chaque Boss propose un niveau de défi différent :<br>
                🥉 <strong>Apprenti</strong> : idéal pour découvrir le mode Coop.<br>
                🥈 <strong>Chrono</strong> : difficulté standard.<br>
                🥇 <strong>Titan</strong> : pour les joueurs expérimentés.<br>
                👑 <strong>Légendaire</strong> : le défi ultime.
              </p>
            </div>

            <div class="ruleBlock">
              <h3>5. Déroulement d’un tour</h3>
              <p>
                Un joueur fait deviner les mots avant la fin du chrono. Quand un mot est trouvé, appuyez sur “Trouvé”.
                Pour passer un mot, utilisez “Passer” si les réglages l’autorisent. L’écran de correction permet ensuite de vérifier les mots validés.
              </p>
            </div>

            <div class="ruleBlock">
              <h3>6. Les 4 manches</h3>
              <p>
                <strong>Manche 1 :</strong> description libre, sans dire le mot exact.<br>
                <strong>Manche 2 :</strong> un seul mot autorisé.<br>
                <strong>Manche 3 :</strong> mime uniquement, sans parler.<br>
                <strong>Manche 4 :</strong> statue sonore : pose fixe, bruitages ou fredonnements autorisés, mais sans parler.
              </p>
            </div>

            <div class="ruleBlock">
              <h3>7. Difficulté des mots</h3>
              <p>
                Vous pouvez choisir des mots <strong>Faciles</strong>, <strong>Moyens</strong>, <strong>Difficiles</strong>, ou mélanger plusieurs niveaux
                comme <strong>Facile + Moyen</strong> ou <strong>Moyen + Difficile</strong>. Pour une partie avec des enfants ou des débutants,
                commencez plutôt avec Facile ou Facile + Moyen.
              </p>
            </div>

            <div class="ruleBlock">
              <h3>8. Profils et statistiques</h3>
              <p>
                Les parties Classiques alimentent les scores, les classements et les statistiques des joueurs.
                Les parties Coopératives enregistrent les Boss affrontés et les Boss vaincus dans les profils.
                Une défaite Coop ne compte pas comme une défaite individuelle classique.
              </p>
            </div>
          </div>

          <div class="rulesActions">
            <button class="ghost" id="btnRulesBackHome">Retour à l’accueil</button>
            <button class="primary" id="btnRulesGoConfig">Configurer la partie</button>
          </div>
        </div>
      </div>
    </section>

    <section class="screen" id="configScreen">
      <header>
        <div class="brand">
          <div class="logo"></div>
          <div>
            <h1>Chrono Party</h1>
            <div class="sub">Thèmes mixables • Difficultés mixables • 4 manches • Sons • Équipes + joueurs • Scores cumulés</div>
          </div>
        </div>
        <div class="top-actions">
          <button class="ghost" id="btnBackHomeConfig">Accueil</button>
          <button class="ghost" id="btnReset">Réinitialiser</button>
          <button class="ghost" id="btnSave">Sauver réglages</button>
          <button class="ghost" id="btnLoad">Charger réglages</button>
        </div>
      </header>

      <div class="row">
  <section class="panel configScreenPaddingFix" id="setupPanel">
  <h2>Préparer la partie</h2>

  <div class="configIntro">
    <div class="configIntroTitle">Configurez votre partie en quelques secondes</div>
    <div class="configIntroText">
      Ajoutez les joueurs, composez les équipes, choisissez une ambiance, puis lancez la partie.
      Les réglages avancés restent disponibles si vous voulez tout personnaliser.
    </div>
  </div>

  <input type="hidden" id="gameMode" value="classic">
  <input type="hidden" id="coopBossLevel" value="standard">

  <div class="setupStep" id="gameModeStep">
    <div class="setupStepHeader">
      <div>
        <div class="setupStepTitle">Mode de jeu</div>
        <div class="setupStepHint">Choisissez le mode classique ou le mode coopératif pour 2 joueurs et plus.</div>
      </div>
    </div>

    <div class="coopModeChoiceGrid">
      <button class="presetCard gameModeCard selected" type="button" data-game-mode="classic">
        <div class="presetIcon">⚔️</div>
        <div class="presetTitle">Classique</div>
        <div class="presetText">Équipes contre équipes. De 4 à 12 joueurs.</div>
      </button>

      <button class="presetCard gameModeCard" type="button" data-game-mode="coop">
        <div class="presetIcon">🤝</div>
        <div class="presetTitle">Coopératif</div>
        <div class="presetText">Tous ensemble contre le Boss Chrono. De 2 à 12 joueurs.</div>
      </button>
    </div>

    <div class="coopBossConfig hidden" id="coopBossConfig">
      <div class="coopBossHeader">
        <div class="coopBossIcon">👹</div>
        <div>
          <div class="coopBossTitle">Boss Chrono</div>
          <div class="coopBossText">Objectif : terminer les 4 manches avant la limite de tours. Les points d’équipe sont désactivés en Coop.</div>
        </div>
      </div>

      <div class="coopBossLevels">
        <button class="coopBossLevelCard" type="button" data-coop-level="easy">🥉 Petit Boss<br><span>Plus accessible</span><small data-coop-turns-info="easy">—</small></button>
        <button class="coopBossLevelCard selected" type="button" data-coop-level="standard">🥈 Boss Chrono<br><span>Équilibré</span><small data-coop-turns-info="standard">—</small></button>
        <button class="coopBossLevelCard" type="button" data-coop-level="hard">🥇 Grand Boss<br><span>Plus tendu</span><small data-coop-turns-info="hard">—</small></button>
        <button class="coopBossLevelCard" type="button" data-coop-level="legend">🏆 Boss Légende<br><span>Très difficile</span><small data-coop-turns-info="legend">—</small></button>
      </div>
    </div>
  </div>

   <div class="setupStep" id="teamsStep">
    <div class="setupStepHeader">
      <div>
        <div class="setupStepTitle">1. Joueurs et équipes</div>
        <div class="setupStepHint">Vous pouvez choisir les équipes vous-même ou laisser le jeu répartir les joueurs.</div>
      </div>
    </div>

    <div class="grid2">
      <div>
        <label>Nombre d’équipes</label>
        <div class="configNumberLine">
          <button class="ghost miniBtn" id="btnTeamMinus" type="button">−</button>
          <input id="teamCount" type="number" min="2" max="12" step="1" value="2" readonly />
          <button class="ghost miniBtn" id="btnTeamPlus" type="button">+</button>
        </div>
      </div>

      <div>
        <label>Comment créer les équipes ?</label>
        <select id="teamMode">
          <option value="manual">Je choisis les équipes</option>
          <option value="random">Répartition automatique des joueurs</option>
        </select>
      </div>
    </div>

    <div class="modeBox" id="manualModeBox">
      <div class="small" style="font-weight:1000; margin-bottom:10px">
  Mode manuel : vous choisissez les équipes et les prénoms. Le jeu choisira ensuite le joueur de départ.
</div>

<div class="quickSetupRequired" style="margin-bottom:10px;">
  Les prénoms des joueurs sont obligatoires *
</div>

<div id="teamsBox"></div>
    </div>

    <div class="modeBox hidden" id="randomModeBox">
      <div class="small" style="font-weight:1000; margin-bottom:10px">
        Mode automatique : nommez les équipes, collez tous les prénoms, puis le jeu répartit les joueurs.
      </div>

      <div id="randomTeamNamesBox"></div>

     <label>Liste complète des joueurs <span class="requiredStar">*</span></label>
<div class="quickSetupRequired" style="margin-bottom:8px;">
  Les prénoms des joueurs sont obligatoires *
</div>
<textarea id="randomPlayersInput" placeholder="Pierre
Sophie
Marc
Julie
Thomas
Emma"></textarea>
      <div class="small" id="randomPlayersInfo" style="margin-top:8px">0 joueur saisi</div>
    </div>
  </div>

  <div class="setupStep" id="presetStep">
    <div class="setupStepHeader">
      <div>
        <div class="setupStepTitle">2. Choisissez une ambiance</div>
        <div class="setupStepHint">Les réglages sont préremplis automatiquement. Vous pouvez les modifier ensuite.</div>
      </div>
    </div>

 <div class="presetGrid">

  <button class="presetCard" type="button" data-preset="kids">
    <div class="presetIcon">🧒</div>
    <div class="presetTitle">Mode enfants</div>
    <div class="presetText">
      Mots plus simples pour jouer en famille avec les enfants.
    </div>
    <div class="presetMeta">
      Dès 7 ans • 25 mots • 45 sec • 10 pass
    </div>
  </button>

  <button class="presetCard" type="button" data-preset="familiale">
    <div class="presetIcon">👨‍👩‍👧‍👦</div>
    <div class="presetTitle">Famille</div>
    <div class="presetText">
      Une partie simple pour commencer.
    </div>
    <div class="presetMeta">
      30 mots • 30 sec • 5 pass
    </div>
  </button>

  <button class="presetCard" type="button" data-preset="classique">
    <div class="presetIcon">🎲</div>
    <div class="presetTitle">Classique</div>
    <div class="presetText">
      Partie équilibrée pour tous.
    </div>
    <div class="presetMeta">
      40 mots • 30 sec • 2 pass
    </div>
  </button>

  <button class="presetCard" type="button" data-preset="challenge">
    <div class="presetIcon">🔥</div>
    <div class="presetTitle">Challenge</div>
    <div class="presetText">
      Pour les joueurs qui veulent plus de difficulté.
    </div>
    <div class="presetMeta">
      50 mots • 30 sec • 0 pass
    </div>
  </button>

</div>

<div class="presetCustomLine">
  <button class="presetCustomBtn" type="button" data-preset="perso">
    ⚙️ Je préfère personnaliser moi-même
  </button>
</div>
  </div>

  <div class="setupStep" id="themesStep">
    <div class="setupStepHeader">
      <div>
        <div class="setupStepTitle">3. Choisissez les thèmes</div>
        <div class="setupStepHint">Vous pouvez sélectionner un ou plusieurs thèmes pour varier les mots.</div>
      </div>
      <span class="small" id="themeCountInfo"></span>
    </div>

    <div class="themeTools">
      <button class="ghost miniBtn" id="btnAllThemes" type="button">Tout cocher</button>
      <button class="ghost miniBtn" id="btnNoThemes" type="button">Tout décocher</button>
    </div>

   <div class="themeDropdown" id="themeDropdown">
  <div class="themeDropdownHead" id="themeDropdownHead">
    <div>
      <div style="font-weight:900">Modifier les thèmes sélectionnés</div>
      <div class="small" id="themeSummary">Chargement…</div>
    </div>
    <div style="font-weight:1000" id="themeChevron">▾</div>
  </div>
  <div class="themeDropdownBody">
    <div id="themesBox" class="themeGrid"></div>
  </div>
</div>
  </div>

  

<div class="setupStep">
  <div class="setupStepHeader">
    <div>
      <div class="setupStepTitle">4. Durée et difficulté</div>
      <div class="setupStepHint">Choisissez rapidement le nombre de mots, la durée et les pass autorisés.</div>
    </div>
  </div>

  <div class="grid3">
    <div>
      <label>Nombre de mots</label>
      <input id="wordCount" type="hidden" min="10" max="80" step="5" value="40" />
      <div class="choiceGroup" data-target="wordCount">
        <button class="choiceBtn" type="button" data-value="25">25</button>
        <button class="choiceBtn" type="button" data-value="30">30</button>
        <button class="choiceBtn active" type="button" data-value="40">40</button>
        <button class="choiceBtn" type="button" data-value="50">50</button>
      </div>
    </div>

    <div>
      <label>Durée du tour</label>
      <input id="turnSeconds" type="hidden" min="15" max="60" step="1" value="30" />
      <div class="choiceGroup" data-target="turnSeconds">
        <button class="choiceBtn active" type="button" data-value="30">30 sec</button>
        <button class="choiceBtn" type="button" data-value="45">45 sec</button>
        <button class="choiceBtn" type="button" data-value="60">60 sec</button>
      </div>
    </div>

    <div>
      <label>Mots que l’on peut passer</label>
      <input id="passesPerTurn" type="hidden" min="0" max="10" step="1" value="2" />
      <div class="choiceGroup" data-target="passesPerTurn">
        <button class="choiceBtn" type="button" data-value="0">0</button>
        <button class="choiceBtn active" type="button" data-value="2">2</button>
        <button class="choiceBtn" type="button" data-value="5">5</button>
        <button class="choiceBtn" type="button" data-value="10">10</button>
      </div>
    </div>
  </div>

  <div class="grid2" style="margin-top:12px;">
    <div>
      <label>Niveau des mots</label>

      <div id="kidsAgeBox" style="display:none;margin:10px 0 12px;">
        <div class="small" style="margin-bottom:8px;">Raccourci âge enfants</div>
        <div class="choiceGroup kidsAgeChoiceGroup">
          <button class="choiceBtn kidsAgeChoiceBtn" type="button" data-kids-age="6-7">6–7 ans</button>
          <button class="choiceBtn kidsAgeChoiceBtn" type="button" data-kids-age="8-9">8–9 ans</button>
          <button class="choiceBtn kidsAgeChoiceBtn" type="button" data-kids-age="10+">10 ans +</button>
        </div>
      </div>

      <div class="themeTools">
        <button class="ghost miniBtn" id="btnAllDiffs" type="button">Tout cocher</button>
        <button class="ghost miniBtn" id="btnNoDiffs" type="button">Tout décocher</button>
        <span class="small" id="diffCountInfo"></span>
      </div>

      <div class="themeDropdown" id="diffDropdown">
        <div class="themeDropdownHead" id="diffDropdownHead">
          <div>
            <div style="font-weight:900">Modifier les difficultés</div>
            <div class="small" id="diffSummary">Chargement…</div>
          </div>
          <div style="font-weight:1000" id="diffChevron">▾</div>
        </div>

        <div class="themeDropdownBody">
          <div class="themeGrid" id="difficultyBox">
            <label class="themeItem" for="diff_facile">
              <input type="checkbox" name="difficultyCheck" id="diff_facile" value="facile" checked />
              <span>Facile</span>
            </label>

            <label class="themeItem" for="diff_moyen">
              <input type="checkbox" name="difficultyCheck" id="diff_moyen" value="moyen" />
              <span>Moyen</span>
            </label>

            <label class="themeItem" for="diff_difficile">
              <input type="checkbox" name="difficultyCheck" id="diff_difficile" value="difficile" />
              <span>Difficile</span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <div>
      <label>Sons</label>
      <select id="soundToggle">
        <option value="on">Activés</option>
        <option value="off">Désactivés</option>
      </select>

      <label>Voix d’annonce</label>
      <select id="voiceToggle">
        <option value="on">Activée</option>
        <option value="off">Désactivée</option>
      </select>

  </div>

<div class="adaptiveAiCard">
  <div class="adaptiveAiText">
    <div class="adaptiveAiBadge">Nouveau</div>
    <div class="adaptiveMasterTitle">IA adaptative</div>
    <div class="adaptiveMasterHint">
      Analyse les scores et ajuste légèrement le temps ou les passes pour garder une partie équilibrée.
    </div>
  </div>

  <button type="button" id="toggleAdaptiveMaster" class="adaptiveSwitch active">
    <span class="adaptiveSwitchDot"></span>
  </button>
</div>
<div class="setupStep" id="customWordsStep">
  <div class="setupStepHeader customWordsHeader" id="customWordsHeader">
    <div>
      <div class="setupStepTitle">5. Ajoutez vos propres mots</div>
      <div class="setupStepHint">
        Optionnel : ajoutez vos propres mots si vous voulez jouer avec une liste à vous.
      </div>
    </div>

    <div class="customWordsChevron" id="customWordsChevron">▾</div>
  </div>

  <div class="customWordsBody" id="customWordsBody">
    <textarea
      id="customWordsInput"
      rows="8"
      placeholder="Exemple :
Pizza
Titanic
Chat
Marseille
Guitare
Mario
Dentiste
Avion
Camping
Dauphin"></textarea>

    <div id="customWordsInfo" class="small" style="margin-top:8px;">
      Aucune liste personnalisée.
    </div>

    <div class="small" style="margin-top:8px; line-height:1.5;">
      Si vous ajoutez une liste personnalisée, Chrono Party utilisera uniquement ces mots.
      Minimum conseillé : 10 mots.
    </div>
  </div>
</div>

<div class="advancedBox hiddenDebugInfo" aria-hidden="true" style="display:none !important;">
  <div class="advancedBoxInner">
    <div class="small" id="dataInfo"></div>
    <div class="small" id="remoteInfo" style="margin-top:8px;">Banque de mots chargée</div>
  </div>
</div>

  <div class="setupSummary">
    <div class="setupSummaryTitle">Résumé de la partie</div>
    <div class="setupSummaryText" id="setupSummaryText">
      2 équipes • 40 mots • 30 secondes • Facile
    </div>
  </div>

<div class="startBar">
  <div>
    <div class="small">
      Vérifiez le résumé, puis lancez la partie quand tout le monde est prêt.
    </div>

    <div class="startRequirementMessage" id="startRequirementMessage">
      ⚠️ Renseignez les prénoms des joueurs pour démarrer la partie.
    </div>
  </div>

  <button class="primary" id="btnStartGame">Démarrer la partie</button>
</div>

</section>

<div class="mobileStartButton">
  <button class="primary" id="btnStartGameMobile">Démarrer la partie</button>
</div>

      </div>
    </section>

    <div class="modalBackdrop" id="modalBackdrop" role="dialog" aria-modal="true">
      <div class="modal">
        <div class="modalBody">
          <div style="display:flex; justify-content:space-between; align-items:center; gap:10px;">
            <h3 id="modalTitle" style="margin:0">—</h3>
            <span class="pill" id="modalPill">—</span>
          </div>
          <div id="modalText"></div>
        </div>
        <div class="modalFooter">
          <button class="ghost" id="modalCancel">Annuler</button>
          <button class="primary" id="modalOk">OK</button>
        </div>
      </div>
    </div>
  </div>

<div class="turnOverlay" id="turnOverlay">
  <div class="turnSheet" id="turnSheet">
    <div class="countdownOverlay" id="countdownOverlay">
      <div class="countdownNumber" id="countdownNumber">3</div>
    </div>

    <div class="turnWrap">
    <div class="turnTopMinimal">
  <button class="iconBtn" id="btnHomeFs" title="Accueil" aria-label="Accueil">⌂</button>
  <span class="pill" id="fsTopRound">Manche 1</span>
  <button class="iconBtn" id="btnExitFs" title="Sortir" aria-label="Sortir">✕</button>
</div>

      <div class="turnCenter">
        <div class="themeHero" id="fsThemeHero">Thème —</div>

        <div class="activePlayerHero">
          <div class="activePlayerLabel">Le joueur qui fait deviner est</div>
          <div class="activePlayerName" id="fsPlayerHero">Joueur -</div>
          <div class="activePlayerTeam" id="fsTeamHero">Équipe -</div>
        </div>

        <div class="turnInfoLine">
          <span class="turnInfoPill" id="fsRoundOnly">Manche -</span>
          <span class="turnInfoPill" id="fsRuleOnly">Règle -</span>
          <span class="turnInfoPill" id="fsCardsOnly">Mots restants -</span>
          <span class="turnInfoPill" id="fsPassOnly">Pass -</span>
        </div>

        <div class="fsCoopBossHud hidden" id="fsCoopBossHud">
          <div class="fsCoopBossHudTop">
            <span id="fsCoopBossLabel">👹 Boss Chrono</span>
            <strong id="fsCoopBossTurns">0/0 tours</strong>
          </div>
          <div class="fsCoopBossHudBar"><span id="fsCoopBossBar"></span></div>
          <div class="fsCoopBossHudText" id="fsCoopBossText">Objectif : terminer les 4 manches avant la limite.</div>
        </div>

        <div class="bigTimer" id="fsTimer">--</div>
        <div class="bigBar" id="fsBarWrap" aria-hidden="true">
          <div id="fsBar"></div>
        </div>

        <div class="wordCard">
          <div class="wordText" id="fsWord">—</div>
        </div>
      </div>

      <div class="turnBottom">
       <button class="bad" id="btnPassFs">⏭️ Passer<br><span style="font-size:12px;font-weight:900;opacity:.78;">mot suivant</span></button>
<button class="good" id="btnFoundFs">✅ Trouvé<br><span style="font-size:12px;font-weight:900;opacity:.78;">+1 point</span></button>
      </div>
    </div>
  </div>
</div>

  <div class="finalOverlay" id="finalOverlay">
    <div class="finalSheet">
      <div class="finalWrap">
        <div class="turnTop">
          <div class="turnTopLeft">
            <button class="iconBtn" id="btnHomeFinal" title="Accueil" aria-label="Accueil" style="display:none;">⌂</button>
            <span class="pill">Résultats finaux</span>
          </div>
          <div class="turnTopRight">
            <button class="iconBtn" id="btnCloseFinal" title="Fermer" aria-label="Fermer" style="display:none;">✕</button>
          </div>
        </div>

        <div class="finalCard" id="finalContent"></div>

<div class="finalActions">
  <div class="finalButtonsRow">
 
    <button id="btnShareFinalGame" class="primary" type="button">
      📤 Partager
    </button>

    <button id="btnFinalHome" class="ghost">🏠 Accueil</button>

    <button id="btnFinalScores" class="ghost" style="display:none;">📊 Scores</button>
  </div>
</div>
      </div>
    </div>
  </div>

  <div class="modalBackdrop" id="installHelpModal" style="display:none;">
  <div class="modal" style="max-width:720px;">
    <div class="modalBody">
      <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px;">
        <h3 id="installHelpTitle" style="margin:0;">Installer Chrono Party</h3>
        <button class="iconBtn" id="btnCloseInstallHelp" title="Fermer" aria-label="Fermer">✕</button>
      </div>

      <div id="installHelpContent"></div>
    </div>

    <div class="modalFooter" style="justify-content:flex-end; gap:10px; flex-wrap:wrap;">
      <button class="secondary" id="btnInstallAlreadyDone" type="button">J’ai déjà installé / ne plus afficher</button>
      <button class="primary" id="btnCloseInstallHelpBottom" type="button">Fermer</button>
    </div>
  </div>
</div>


  <div class="modalBackdrop" id="quickSetupModal" style="display:none;" role="dialog" aria-modal="true">
    <div class="modal" style="max-width:900px;">
      <div class="modalBody">
        <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px;">
          <h3 style="margin:0;">Préparez votre partie rapide</h3>
          <span class="pill">2 équipes • 4 joueurs</span>
        </div>

        <div class="small" style="line-height:1.5;">
  Indiquez le prénom suivi d’une initiale. Exemple : Bruno D.
          Indiquez les prénoms pour savoir facilement à qui c’est le tour pendant la partie.
          <br>
          <span class="quickSetupRequired">Les 4 champs joueurs sont obligatoires.</span>
        </div>

        <div class="quickSetupGrid">
          <div class="quickSetupCard">
            <div class="quickSetupTitle" id="quickTeam1Label">Équipe violette</div>

            <label for="quickTeam1">Nom de l’équipe</label>
            <input id="quickTeam1" type="text" value="Équipe violette" />

            <label for="quickPlayer1">Joueur 1 <span class="quickSetupRequired">*</span></label>
            <input id="quickPlayer1" type="text" placeholder="Ex : Bruno D" />

            <label for="quickPlayer2">Joueur 2 <span class="quickSetupRequired">*</span></label>
            <input id="quickPlayer2" type="text" placeholder="Ex : Bruno D" />
          </div>

          <div class="quickSetupCard">
            <div class="quickSetupTitle" id="quickTeam2Label">Équipe bleue</div>

            <label for="quickTeam2">Nom de l’équipe</label>
            <input id="quickTeam2" type="text" value="Équipe bleue" />

            <label for="quickPlayer3">Joueur 3 <span class="quickSetupRequired">*</span></label>
            <input id="quickPlayer3" type="text" placeholder="Ex : Bruno D" />

            <label for="quickPlayer4">Joueur 4 <span class="quickSetupRequired">*</span></label>
            <input id="quickPlayer4" type="text" placeholder="Ex : Bruno D" />
          </div>
        </div>

        <div class="quickSetupHint">
          Conseil : utilisez le prénom + une initiale pour mieux identifier les joueurs dans les statistiques.
        </div>
      </div>

      <div class="modalFooter">
        <button class="ghost" id="btnCloseQuickSetup">Fermer</button>
        <button class="primary" id="btnStartQuickSetup" disabled>Démarrer la partie</button>
      </div>
    </div>
  </div>

<script>
window.CHRONO_PARTY_CLIENT = <?= json_encode([
  'client_id' => $_SESSION['client_id'] ?? '',
  'client_name' => $_SESSION['client_name'] ?? '',
  'gift_code' => $_SESSION['gift_code'] ?? '',
  'access_type' => $_SESSION['access_type'] ?? 'premium'
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
</script>
<script src="./config-client.js"></script>
<script src="./assets/js/config-premium.js"></script>
<script src="./assets/js/chrono-party.js?v=202606031000"></script>

<script>
if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("./sw.js")
      .then(() => console.log("Service Worker enregistré"))
      .catch((err) => console.log("Erreur SW :", err));
  });
}
</script>

<script>
let deferredPrompt = null;

const installBtn = null;
const installHelpBtn = null;
const installBadgeBtn = document.getElementById("btnInstallBadge");

function isStandaloneMode(){
  return window.matchMedia("(display-mode: standalone)").matches
    || window.navigator.standalone === true;
}

function isIOSDevice(){
  return /iPhone|iPad|iPod/i.test(navigator.userAgent)
    || (navigator.userAgent.includes("Macintosh") && navigator.maxTouchPoints > 1);
}

function isAndroidDevice(){
  return /Android/i.test(navigator.userAgent);
}

function isDesktopDevice(){
  return !isIOSDevice() && !isAndroidDevice();
}

function canShowIOSInstallHelp(){
  return isIOSDevice() && !isStandaloneMode();
}

function getInstallHelpHtml(){
  if(isStandaloneMode()){
    return {
      title: "Chrono Party est déjà installé ✅",
      html: `
        <div class="installCard" style="margin-top:10px;">
          <div class="installCardIcon">✅</div>
          <div class="installCardTitle">Application déjà installée</div>
          <div class="installCardText">
            Chrono Party est déjà lancé comme une application.
            Vous pouvez le retrouver directement depuis votre écran d’accueil.
          </div>
        </div>
      `
    };
  }

  if(isAndroidDevice()){
    return {
      title: "Installer Chrono Party sur Android",
      html: `
        <div class="installCard" style="margin-top:10px;">
          <div class="installCardIcon">🤖</div>
          <div class="installCardTitle">Android</div>
          <div class="installCardText">
            Vous pouvez installer Chrono Party sur votre téléphone Android pour le lancer comme une vraie application.
            <br><br>
            Une fois installé, le jeu apparaîtra directement sur votre écran d’accueil.
          </div>

          <div style="margin-top:18px;">
            <button class="primary" id="btnAndroidInstallInside" type="button">
              Installer l’application
            </button>
          </div>

          <div class="small" style="margin-top:14px; line-height:1.5;">
            Si le bouton ne fonctionne pas, ouvrez Chrome, appuyez sur les
            <b>3 petits points</b> en haut à droite, puis choisissez
            <b>Installer l’application</b> ou <b>Ajouter à l’écran d’accueil</b>.
          </div>
        </div>
      `
    };
  }

  if(isIOSDevice()){
    return {
      title: "Installer Chrono Party sur iPhone",
      html: `
        <div class="installCard" style="margin-top:10px;">
          <div class="installCardIcon">🍎</div>
          <div class="installCardTitle">iPhone / iPad</div>
          <div class="installCardText">
            1. Ouvrez Chrono Party avec <b>Safari ou Chrome</b><br>
            2. Appuyez sur l’icône <b>Partager</b><br>
            3. Choisissez <b>Sur l’écran d’accueil</b><br>
            4. Appuyez sur <b>Ajouter</b>
            <br><br>
            Chrono Party apparaîtra ensuite comme une application sur votre iPhone.
          </div>
        </div>
      `
    };
  }

return {
  title: "Installer Chrono Party sur ordinateur",
  html: `
    <div class="installCard" style="margin-top:10px;">
      <div class="installCardIcon">💻</div>
      <div class="installCardTitle">Installation sur ordinateur</div>
      <div class="installCardText">
        Vous pouvez installer Chrono Party sur votre ordinateur pour le lancer comme une vraie application.
        <br><br>
        Une fois installé, Chrono Party pourra s’ouvrir directement depuis votre bureau, votre menu démarrer ou votre barre d’applications.
      </div>

      <div style="margin-top:18px;">
        <button class="primary" id="btnDesktopInstallInside" type="button">
          Installer l’application
        </button>
      </div>

      <div class="small" style="margin-top:14px; line-height:1.5;">
        Si le bouton ne fonctionne pas, ouvrez Chrome ou Edge, puis cliquez sur l’icône d’installation
        dans la barre d’adresse, ou allez dans le menu <b>⋮</b> puis choisissez
        <b>Installer Chrono Party</b>.
      </div>
    </div>
  `
};
}

function openInstallHelpModal(){
  const modal = document.getElementById("installHelpModal");
  const title = document.getElementById("installHelpTitle");
  const content = document.getElementById("installHelpContent");

  if(!modal || !title || !content) return;

  const data = getInstallHelpHtml();

  title.textContent = data.title;
  content.innerHTML = data.html;

  modal.style.display = "flex";

  const androidInstallInsideBtn = document.getElementById("btnAndroidInstallInside");

  if(androidInstallInsideBtn){
    androidInstallInsideBtn.addEventListener("click", async () => {
      if(!deferredPrompt){
        showSimpleModal(
          "Installation",
          `
            L’installation automatique n’est pas disponible pour le moment.
            <br><br>
            Sur Android, ouvrez le menu <b>⋮</b> de Chrome, puis choisissez
            <b>Installer l’application</b> ou <b>Ajouter à l’écran d’accueil</b>.
          `,
          "OK"
        );
        return;
      }

      deferredPrompt.prompt();
      const choiceResult = await deferredPrompt.userChoice;

      console.log(
        choiceResult.outcome === "accepted"
          ? "Installation acceptée"
          : "Installation refusée"
      );

      deferredPrompt = null;
updateInstallButtons();
closeInstallHelpModal();
    });
  }

  const desktopInstallInsideBtn = document.getElementById("btnDesktopInstallInside");

  if(desktopInstallInsideBtn){
    desktopInstallInsideBtn.addEventListener("click", async () => {
      if(!deferredPrompt){
        showSimpleModal(
          "Installation",
          `
            L’installation automatique n’est pas disponible pour le moment.
            <br><br>
            Sur ordinateur, utilisez Chrome ou Edge, puis cliquez sur l’icône d’installation
            dans la barre d’adresse, ou ouvrez le menu <b>⋮</b> et choisissez
            <b>Installer Chrono Party</b>.
          `,
          "OK"
        );
        return;
      }

      deferredPrompt.prompt();
      const choiceResult = await deferredPrompt.userChoice;

      console.log(
        choiceResult.outcome === "accepted"
          ? "Installation acceptée"
          : "Installation refusée"
      );

     deferredPrompt = null;
updateInstallButtons();
closeInstallHelpModal();
    });
  }
}

function closeInstallHelpModal(){
  const modal = document.getElementById("installHelpModal");
  if(modal){
    modal.style.display = "none";
  }
}

function markInstallHelpAsDone(){
  localStorage.setItem("chrono_install_help_done", "1");
  closeInstallHelpModal();
  updateInstallButtons();
}

function shouldSkipInstallHelp(){
  return localStorage.getItem("chrono_install_help_done") === "1";
}
function getInstallBadgeLabel(){
  if(isStandaloneMode()){
    return "";
  }

  if(isAndroidDevice()){
    return "📲 Installer l’application";
  }

  if(isIOSDevice()){
    return "📲 Comment installer l’application ?";
  }

  return "💻 Installer l’application";
}
function updateInstallButtons(){
    document.body.classList.toggle("appInstalled", isStandaloneMode());
  if(isStandaloneMode()){
    if(installBtn) installBtn.style.display = "none";
    if(installHelpBtn) installHelpBtn.style.display = "none";
    if(installBadgeBtn) installBadgeBtn.style.display = "none";
    return;
  }

  if(installHelpBtn){
    installHelpBtn.style.display = "inline-block";
  }

if(installBadgeBtn){
  installBadgeBtn.style.display = "inline-flex";

  if(isIOSDevice() || isAndroidDevice()){
    installBadgeBtn.textContent = "📲";
  }else{
    installBadgeBtn.textContent = "💻";
  }

  installBadgeBtn.title = getInstallBadgeLabel();
}

  /*
    Le bouton direct "Installer Chrono Party" n’apparaît que si Android/Chrome/Edge
    autorise vraiment l’installation automatique.
  */
  if(installBtn){
    installBtn.style.display = deferredPrompt ? "inline-block" : "none";
  }
}

window.addEventListener("beforeinstallprompt", (e) => {
  e.preventDefault();
  deferredPrompt = e;
  updateInstallButtons();
});

if(installBtn){
  installBtn.addEventListener("click", async () => {
    if(!deferredPrompt){
      openInstallHelpModal();
      return;
    }

    deferredPrompt.prompt();
    const choiceResult = await deferredPrompt.userChoice;

    console.log(
      choiceResult.outcome === "accepted"
        ? "Installation acceptée"
        : "Installation refusée"
    );

    deferredPrompt = null;
updateInstallButtons();
closeInstallHelpModal();
  });
}

if(installHelpBtn){
  installHelpBtn.addEventListener("click", openInstallHelpModal);
}

if(installBadgeBtn){
  installBadgeBtn.addEventListener("click", async () => {
    if(isStandaloneMode()){
      return;
    }

    // iPhone / iPad : installation automatique impossible
    if(isIOSDevice()){
      openInstallHelpModal();
      return;
    }

    // Android / ordinateur : installation directe si disponible
    if(deferredPrompt){
      deferredPrompt.prompt();
      const choiceResult = await deferredPrompt.userChoice;

      console.log(
        choiceResult.outcome === "accepted"
          ? "Installation acceptée"
          : "Installation refusée"
      );

      deferredPrompt = null;
updateInstallButtons();
closeInstallHelpModal();
      return;
    }

    // Si Chrome/Edge ne propose pas encore l'installation automatique
    openInstallHelpModal();
  });
}

const btnCloseInstallHelp = document.getElementById("btnCloseInstallHelp");
const btnCloseInstallHelpBottom = document.getElementById("btnCloseInstallHelpBottom");
const btnInstallAlreadyDone = document.getElementById("btnInstallAlreadyDone");
const installHelpModal = document.getElementById("installHelpModal");
if(btnCloseInstallHelp){
  btnCloseInstallHelp.addEventListener("click", closeInstallHelpModal);
}

if(btnCloseInstallHelpBottom){
  btnCloseInstallHelpBottom.addEventListener("click", closeInstallHelpModal);
}

if(btnInstallAlreadyDone){
  btnInstallAlreadyDone.addEventListener("click", markInstallHelpAsDone);
}

if(installHelpModal){
  installHelpModal.addEventListener("click", (e)=>{
    if(e.target === installHelpModal){
      closeInstallHelpModal();
    }
  });
}

window.addEventListener("appinstalled", () => {
  console.log("Application installée");
  localStorage.setItem("chrono_install_help_done", "1");
  deferredPrompt = null;
  updateInstallButtons();

  window.setTimeout(() => {
    showSimpleModal(
      "Application installée ✅",
      "Chrono Party est maintenant installé. Vous pouvez le retrouver sur votre écran d’accueil, votre bureau ou votre menu d’applications.",
      "OK"
    );
  }, 800);
});

function maybeOpenInstallAfterActivation(){
  const url = new URL(window.location.href);

  if(url.searchParams.get("activation") !== "ok"){
    return;
  }

  // Nettoie l’URL pour éviter que la fenêtre revienne à chaque rafraîchissement
  url.searchParams.delete("activation");
  const cleanUrl = url.pathname
    + (url.searchParams.toString() ? "?" + url.searchParams.toString() : "")
    + url.hash;

  window.history.replaceState({}, document.title, cleanUrl);

  if(isStandaloneMode() || shouldSkipInstallHelp()){
    return;
  }

  // Petite attente : Chrome peut déclencher beforeinstallprompt juste après le chargement
  window.setTimeout(() => {
    if(!isStandaloneMode()){
      openInstallHelpModal();
    }
  }, 700);
}

window.addEventListener("load", () => {
  updateInstallButtons();
  maybeOpenInstallAfterActivation();
});
</script>

<script>
function getSpeechRecognition(){
  return window.SpeechRecognition || window.webkitSpeechRecognition || null;
}

function isIOSDeviceForVoice(){
  return /iPhone|iPad|iPod/i.test(navigator.userAgent)
    || (navigator.userAgent.includes("Macintosh") && navigator.maxTouchPoints > 1);
}

function canUseVoiceAnswer(){
  return !isIOSDeviceForVoice() && !!getSpeechRecognition();
}

let guidedPreset = "familiale";
let guidedGameMode = "classic";
let guidedCoopBossLevel = "standard";
let guidedPlayerCount = 4;
let guidedTeamCount = 2;
let guidedNames = [];
let guidedPlayersDraft = [];

function getAutoTeamCount(playerCount) {
  if (playerCount <= 6) return 2;
  if (playerCount <= 9) return 3;
  if (playerCount <= 12) return 4;
  return 4;
}

function speakVoiceStep(text, callback){
  if(!window.speechSynthesis){
    if(callback) callback();
    return;
  }

  window.speechSynthesis.cancel();

  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = "fr-FR";
  utterance.rate = 1.05;
  utterance.pitch = 1;
  utterance.volume = 1;

  utterance.onend = () => callback && callback();
  utterance.onerror = () => callback && callback();

  window.speechSynthesis.speak(utterance);
}

function closeGuidedParty(){
  if(window.speechSynthesis){
    window.speechSynthesis.cancel();
  }

guidedPreset = "familiale";
guidedGameMode = "classic";
guidedCoopBossLevel = "standard";
guidedPlayerCount = 4;
guidedTeamCount = 2;
guidedNames = [];
guidedPlayersDraft = [];

  const modal = document.getElementById("modalBackdrop");
  if(modal){
    modal.classList.remove("show");
    modal.style.display = "none";
  }

  if(typeof showScreen === "function"){
    showScreen("homeScreen");
  }
}

function extractPlayerCount(text){
  const normalized = String(text || "").toLowerCase();

  const wordsToNumbers = {
    "deux": 2, "trois": 3, "quatre": 4, "cinq": 5, "six": 6,
    "sept": 7, "huit": 8, "neuf": 9, "dix": 10, "onze": 11, "douze": 12
  };

  const digitMatch = normalized.match(/(^|\s)(10|11|12|[2-9])(\s|\.|,|;|:|!|\?|$)/);
  if(digitMatch) return parseInt(digitMatch[2], 10);

  for(const word in wordsToNumbers){
    if(normalized.includes(word)) return wordsToNumbers[word];
  }

  return null;
}

function extractVoicePreset(text){
  const value = String(text || "").toLowerCase();

  if(value.includes("enfant") || value.includes("kids")) return "kids";
  if(value.includes("famille") || value.includes("familial")) return "familiale";
  if(value.includes("classique")) return "classique";
  if(value.includes("challenge") || value.includes("difficile")) return "challenge";

  return null;
}

function getPresetLabel(preset){
  if(preset === "kids") return `Mode enfants ${getGuidedKidsAgeLabel(guidedKidsAge)}, ${getGuidedKidsAgeDifficultyLabel(guidedKidsAge)}, 25 mots, 45 secondes, 10 pass, 8 thèmes`;
  if(preset === "classique") return "Classique, niveau facile et moyen, 40 mots, 30 secondes, 2 pass, 10 thèmes";
  if(preset === "challenge") return "Challenge, niveau moyen et difficile, 50 mots, 30 secondes, 0 pass, tous les thèmes";
  return "Famille, niveau facile, 30 mots, 30 secondes, 5 pass, 6 thèmes";
}

function applyPresetFromGuided(preset){
  guidedPreset = preset;

  const btn = document.querySelector(`.presetCard[data-preset="${preset}"]`);
  if(btn){
    btn.click();
  }
}


function getGuidedKidsAgeDifficulties(age){
  if(age === "8-9") return ["facile", "moyen"];
  if(age === "10+") return ["moyen", "difficile"];
  return ["facile"];
}

function getGuidedKidsAgeLabel(age){
  if(age === "8-9") return "8–9 ans";
  if(age === "10+") return "10 ans et +";
  return "6–7 ans";
}

function getGuidedKidsAgeDifficultyLabel(age){
  return getGuidedKidsAgeDifficulties(age).join(" + ");
}

function applyGuidedKidsAgeDifficulty(age){
  guidedKidsAge = age || "6-7";

  if(typeof window.applyKidsAgeDifficulty === "function"){
    window.applyKidsAgeDifficulty(guidedKidsAge);
    return;
  }

  if(typeof setDifficulties === "function"){
    setDifficulties(getGuidedKidsAgeDifficulties(guidedKidsAge));
  }
}

function startVoiceRecognitionOnce(onSuccess, delayBeforeStart = 500){
  const SpeechRecognition = getSpeechRecognition();

  if(!canUseVoiceAnswer()){
    onSuccess("");
    return;
  }

  setTimeout(() => {
    const recognition = new SpeechRecognition();
    recognition.lang = "fr-FR";
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;

    recognition.onresult = (event) => {
      const text = event.results[0][0].transcript;
      onSuccess(text);
    };

    recognition.onerror = () => onSuccess("");
    recognition.onnomatch = () => onSuccess("");

    try{
      recognition.start();
    }catch(e){
      onSuccess("");
    }
  }, delayBeforeStart);
}

let guidedKidsAge = "6-7";

function startGuidedParty(){
  guidedPreset = "familiale";
  guidedGameMode = "classic";
  guidedCoopBossLevel = "standard";
  guidedKidsAge = "6-7";
  guidedPlayerCount = 4;
  guidedTeamCount = 2;
  guidedNames = [];

askGuidedPreset();

setTimeout(() => {
  speakVoiceStep(
    "Bienvenue dans Chrono Party. Choisissez une ambiance."
  );
}, 300);
}

function askGuidedPreset(){
  const voiceButton = canUseVoiceAnswer()
    ? `<button class="ghost" type="button" id="btnVoicePresetAnswer">🎤 Répondre vocalement</button>`
    : "";

  showSimpleModal(
  "Ambiance de la partie",
  `
    <div class="small" style="line-height:1.6;">
      Choisissez une ambiance :
    </div>

    <div class="adaptiveMasterRow" style="margin:12px 0 16px;">
      <div>
        <div class="adaptiveMasterTitle">IA adaptative</div>
        <div class="adaptiveMasterHint">
          L’IA équilibre automatiquement la partie..
        </div>
      </div>

      <button
        type="button"
        id="toggleAdaptiveMasterGuided"
        class="adaptiveSwitch ${state.adaptiveMaster ? "active" : ""}"
      >
        <span class="adaptiveSwitchDot"></span>
      </button>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;">
      <button class="primary" type="button" onclick="validateGuidedPreset('kids')">🧒 Enfants</button>
      <button class="primary" type="button" onclick="validateGuidedPreset('familiale')">👨‍👩‍👧‍👦 Famille</button>
      <button class="primary" type="button" onclick="validateGuidedPreset('classique')">🎲 Classique</button>
      <button class="primary" type="button" onclick="validateGuidedPreset('challenge')">🔥 Challenge</button>
    </div>

      <div style="margin-top:14px;">
        ${voiceButton}
      </div>

      <div style="margin-top:18px;">
        <button class="ghost" type="button" onclick="closeGuidedParty()">
          Quitter la partie guidée
        </button>
      </div>
    `,
    "Continuer",
continueAfterGuidedPreset
  );

  setTimeout(() => {
    const btn = document.getElementById("btnVoicePresetAnswer");
    if(btn){
      btn.addEventListener("click", () => {
        speakVoiceStep("Quelle ambiance voulez-vous ?", () => {
          startVoiceRecognitionOnce((text) => {
            const preset = extractVoicePreset(text);
            if(preset){
              validateGuidedPreset(preset);
            }else{
              showSimpleModal(
                "Ambiance non reconnue",
                "Choisissez l’ambiance avec les boutons.",
                "OK",
                askGuidedPreset
              );
            }
          });
        });
      });
    }
  }, 50);
}

function getGuidedPresetShortLabel(preset){
  if(preset === "kids") return "Mode enfants";
  if(preset === "classique") return "Classique";
  if(preset === "challenge") return "Challenge";
  return "Famille";
}

function getGuidedPresetConfirmText(preset){
  if(preset === "kids"){
    return "Une ambiance pensée pour les enfants, avec des mots plus simples, plus de temps et davantage de pass.";
  }

  if(preset === "classique"){
    return "Une ambiance équilibrée pour une partie conviviale avec un peu plus de variété.";
  }

  if(preset === "challenge"){
    return "Une ambiance plus difficile, plus rapide, avec moins de pass pour pimenter la partie.";
  }

  return "Une ambiance idéale pour jouer simplement entre amis ou en famille.";
}

function showGuidedPresetConfirmModal(preset){
  const shortLabel = getGuidedPresetShortLabel(preset);
  const fullLabel = getPresetLabel(preset);
  const confirmText = getGuidedPresetConfirmText(preset);

  showSimpleModal(
    `Ambiance ${shortLabel} sélectionnée`,
    `
      <div style="line-height:1.6;">
        ${confirmText}
        <br><br>
        <b>Réglages :</b><br>
        ${fullLabel}
        <br><br>
        Si cette ambiance vous convient, cliquez sur <b>Continuer</b>.
      </div>
    `,
    "Continuer",
    () => {
      askGuidedGameMode();
    },
    "Retour",
    askGuidedPreset
  );

  setTimeout(() => {
    speakVoiceStep(
      `Ambiance ${shortLabel} sélectionnée. ${confirmText} Cliquez sur Continuer pour choisir le mode de jeu.`
    );
  }, 250);
}

function askGuidedKidsAge(){
  showSimpleModal(
    "Âge des enfants",
    `
      <div class="small" style="line-height:1.6;">
        Choisissez la tranche d’âge pour adapter automatiquement la difficulté des mots.
      </div>

      <div class="guidedModeGrid">
        <button class="guidedModeCard coopBossLevelCard kidsAgeCard" type="button" data-age="6-7" data-coop-level="easy" onclick="validateGuidedKidsAge('6-7')">
          <strong>👶 6–7 ans</strong>
          <span>Mots faciles avec emojis très évidents.</span>
        </button>

        <button class="guidedModeCard coopBossLevelCard kidsAgeCard" type="button" data-age="8-9" data-coop-level="standard" onclick="validateGuidedKidsAge('8-9')">
          <strong>🧒 8–9 ans</strong>
          <span>Mots faciles + moyens pour plus de variété.</span>
        </button>

        <button class="guidedModeCard coopBossLevelCard kidsAgeCard" type="button" data-age="10+" data-coop-level="legend" onclick="validateGuidedKidsAge('10+')">
          <strong>👦 10 ans et +</strong>
          <span>Mots moyens + difficiles pour les plus grands.</span>
        </button>
      </div>
    `,
    "Retour",
    askGuidedPreset
  );

  setTimeout(() => {
    speakVoiceStep("Choisissez l’âge des enfants pour adapter les mots.");
  }, 250);
}

function validateGuidedKidsAge(age){
  applyGuidedKidsAgeDifficulty(age);
  showGuidedPresetConfirmModal("kids");
}

function validateGuidedPreset(preset){
  applyPresetFromGuided(preset);

  if(preset === "kids"){
    guidedKidsAge = guidedKidsAge || "6-7";
    askGuidedKidsAge();
    return;
  }

  showGuidedPresetConfirmModal(preset);
}

function continueAfterGuidedPreset(){
  showGuidedPresetConfirmModal(guidedPreset || "familiale");
}
function getGuidedModeLabel(){
  return guidedGameMode === "coop" ? "Coopératif — Boss Chrono" : "Classique";
}

function getGuidedCoopLevelLabel(level = guidedCoopBossLevel){
  if(level === "easy") return "Petit Boss";
  if(level === "hard") return "Grand Boss";
  if(level === "legend") return "Boss Légende";
  return "Boss Chrono";
}

function getGuidedCoopLevelIcon(level = guidedCoopBossLevel){
  if(level === "easy") return "🥉";
  if(level === "hard") return "🥇";
  if(level === "legend") return "🏆";
  return "🥈";
}

function getGuidedCoopMaxTurns(level = guidedCoopBossLevel){
  const ratios = { easy: 2.4, standard: 3, hard: 3.5, legend: 4 };
  const wordCount = Math.max(1, Number(document.getElementById("wordCount")?.value || 30));
  const ratio = ratios[level] || ratios.standard;
  return Math.max(1, Math.ceil((wordCount * 4) / ratio));
}

function getGuidedCoopLevelHelp(level = guidedCoopBossLevel){
  const turns = getGuidedCoopMaxTurns(level);
  const words = Math.max(1, Number(document.getElementById("wordCount")?.value || 30));
  return `${words} mots × 4 manches à terminer en ${turns} tours maximum.`;
}

function askGuidedGameMode(){
  showSimpleModal(
    "Mode de jeu",
    `
      <div class="small" style="line-height:1.6;">
        Choisissez comment vous voulez jouer avec l’ambiance sélectionnée.
      </div>

      <div class="guidedModeGrid">
        <button class="guidedModeCard gameModeCard guidedGameModeCard" type="button" data-game-mode="classic" onclick="validateGuidedGameMode('classic')">
          <strong>⚔️ Classique</strong>
          <span>Équipes contre équipes. De 4 à 12 joueurs.</span>
        </button>

        <button class="guidedModeCard gameModeCard guidedGameModeCard" type="button" data-game-mode="coop" onclick="validateGuidedGameMode('coop')">
          <strong>🤝 Coopératif</strong>
          <span>Tous ensemble contre le Boss Chrono. De 2 à 12 joueurs.</span>
        </button>
      </div>
    `,
    "Retour",
    showGuidedPresetConfirmModal.bind(null, guidedPreset || "familiale")
  );

  setTimeout(() => {
    speakVoiceStep("Choisissez le mode classique ou le mode coopératif.");
  }, 250);
}

function validateGuidedGameMode(mode){
  guidedGameMode = mode === "coop" ? "coop" : "classic";

  if(guidedGameMode === "coop"){
    askGuidedCoopBossLevel();

    setTimeout(() => {
      speakVoiceStep(
        "Mode coopératif sélectionné. Choisissez maintenant le Boss Chrono à affronter."
      );
    }, 300);

    return;
  }

  askGuidedPlayerCount();

  setTimeout(() => {
    speakVoiceStep("Combien de joueurs participent ?");
  }, 300);
}

function askGuidedCoopBossLevel(){
  showSimpleModal(
    "Défi coopératif",
    `
      <div class="small" style="line-height:1.6;">
        En Coop, vous devez terminer les 4 manches avant la limite de tours du Boss.
      </div>

      <div class="guidedModeGrid">
        <button class="guidedModeCard coopBossLevelCard" type="button" data-coop-level="easy" onclick="validateGuidedCoopBossLevel('easy')">
          <strong>🥉 Petit Boss</strong>
          <span>${getGuidedCoopLevelHelp('easy')}</span>
        </button>
        <button class="guidedModeCard coopBossLevelCard" type="button" data-coop-level="standard" onclick="validateGuidedCoopBossLevel('standard')">
          <strong>🥈 Boss Chrono</strong>
          <span>${getGuidedCoopLevelHelp('standard')}</span>
        </button>
        <button class="guidedModeCard coopBossLevelCard" type="button" data-coop-level="hard" onclick="validateGuidedCoopBossLevel('hard')">
          <strong>🥇 Grand Boss</strong>
          <span>${getGuidedCoopLevelHelp('hard')}</span>
        </button>
        <button class="guidedModeCard coopBossLevelCard" type="button" data-coop-level="legend" onclick="validateGuidedCoopBossLevel('legend')">
          <strong>🏆 Boss Légende</strong>
          <span>${getGuidedCoopLevelHelp('legend')}</span>
        </button>
      </div>
    `,
    "Retour",
    askGuidedGameMode
  );
}

function validateGuidedCoopBossLevel(level){
  guidedCoopBossLevel = level || "standard";

  const label = getGuidedCoopLevelLabel(guidedCoopBossLevel);
  const turns = getGuidedCoopMaxTurns(guidedCoopBossLevel);

  askGuidedPlayerCount();

  setTimeout(() => {
    speakVoiceStep(`${label} sélectionné. Objectif : terminer les quatre manches en ${turns} tours maximum. Combien de joueurs participent au défi coopératif ?`);
  }, 300);
}


function askGuidedPlayerCount(){
  const voiceButton = canUseVoiceAnswer()
    ? `<button class="ghost" type="button" id="btnVoicePlayerCountAnswer">🎤 Répondre vocalement</button>`
    : "";

  showSimpleModal(
    "Nombre de joueurs",
    `
      <div class="small" style="line-height:1.6;">
        Indiquez le nombre de joueurs.
        <br>
        Minimum : ${guidedGameMode === "coop" ? "2" : "4"} joueurs.
      </div>

      <input
        id="guidedPlayerCountInput"
        type="number"
        min="${guidedGameMode === "coop" ? "2" : "4"}"
        max="12"
        value="${guidedPlayerCount || (guidedGameMode === "coop" ? 2 : 4)}"
        style="width:100%;margin-top:12px;"
      />

      <div style="margin-top:14px;">
        ${voiceButton}
      </div>

      <div style="margin-top:18px;">
        <button class="ghost" type="button" onclick="closeGuidedParty()">
          Quitter la partie guidée
        </button>
      </div>
    `,
    "Valider",
    validateGuidedPlayerCount
  );

  setTimeout(() => {
    const input = document.getElementById("guidedPlayerCountInput");
    if(input){
      input.focus();
      input.select();
    }

    const btn = document.getElementById("btnVoicePlayerCountAnswer");
    if(btn){
      btn.addEventListener("click", () => {
        speakVoiceStep("Combien de joueurs participent à la partie ?", () => {
          startVoiceRecognitionOnce((text) => {
            const count = extractPlayerCount(text);
            if(count){
              const input = document.getElementById("guidedPlayerCountInput");
              if(input) input.value = String(count);
            }else{
              showSimpleModal(
                "Nombre non reconnu",
                "Je n’ai pas bien compris. Saisissez le nombre par écrit.",
                "OK",
                askGuidedPlayerCount
              );
            }
          });
        });
      });
    }
  }, 50);
}

function validateGuidedPlayerCount(){
  const value = parseInt(document.getElementById("guidedPlayerCountInput")?.value || "0", 10);

  const minPlayers = guidedGameMode === "coop" ? 2 : 4;

  if(!value || value < minPlayers){
    showSimpleModal(
      "Nombre incorrect",
      `Il faut au minimum ${minPlayers} joueurs.`,
      "OK",
      askGuidedPlayerCount
    );
    return;
  }

guidedPlayerCount = value;
guidedTeamCount = guidedGameMode === "coop" ? 1 : getAutoTeamCount(value);
guidedNames = new Array(value).fill("");

askGuidedNames();

setTimeout(() => {
  speakVoiceStep(
    guidedGameMode === "coop"
      ? `${guidedPlayerCount} joueurs. En mode coopératif, tout le monde joue ensemble. Entrez maintenant les prénoms.`
      : `${guidedPlayerCount} joueurs. Le jeu fera automatiquement ${guidedTeamCount} équipes. Entrez maintenant les prénoms.`
  );
}, 300);
}
function askGuidedNames(){
  let html = `
    <div class="small" style="line-height:1.6;">
      Entrez le prénom suivi d’une initiale pour chaque joueur. Exemple : Bruno D.
      <br>
      ${guidedGameMode === "coop" ? "Tous les joueurs seront dans le même groupe coopératif." : "Les équipes seront réparties automatiquement."}
    </div>
  `;

  for(let i = 0; i < guidedPlayerCount; i++){
    html += `
      <div style="margin-top:10px;">
        <label>Joueur ${i + 1}</label>
        <input
          id="guidedName${i}"
          type="text"
          value="${escapeHtml(guidedPlayersDraft[i] || guidedNames[i] || "")}"
          placeholder="Ex : Bruno D"
          style="width:100%;margin-top:6px;"
        />
      </div>
    `;
  }

  html += `
    <div style="margin-top:18px;">
      <button class="ghost" type="button" onclick="closeGuidedParty()">
        Quitter la partie guidée
      </button>
    </div>
  `;

  showSimpleModal(
    "Prénoms des joueurs",
    html,
    "Voir le récapitulatif",
    validateGuidedNames
  );

  setTimeout(() => {
    if(typeof initChronoGuidedPlayerSuggestions === "function"){
      initChronoGuidedPlayerSuggestions(document);
    }
    if(typeof loadChronoKnownPlayers === "function"){
      loadChronoKnownPlayers(true);
    }

    const first = document.getElementById("guidedName0");
    if(first){
      first.focus();
      if(typeof renderChronoGuidedPlayerSuggestions === "function"){
        renderChronoGuidedPlayerSuggestions(first);
      }
    }
  }, 50);
}

function validateGuidedNames(){
  guidedPlayersDraft = [];

for(let i = 0; i < guidedPlayerCount; i++){
  const value = formatPlayerIdentity(
    document.getElementById(`guidedName${i}`)?.value?.trim() || ""
  );

  guidedPlayersDraft.push(value);
}

  const names = [];

  for(let i = 0; i < guidedPlayerCount; i++){
    const value = guidedPlayersDraft[i] || "";

    if(!value){
      showSimpleModal(
        "Prénom manquant",
        `Le prénom du joueur ${i + 1} est obligatoire.`,
        "OK",
        askGuidedNames
      );
      return;
    }

    if(!isValidPlayerIdentity(value)){
      showSimpleModal(
        "Nom incomplet",
        `Merci d’indiquer le prénom suivi d’une initiale. Exemple : Bruno D<br><br>À corriger : <b>${escapeHtml(value)}</b>`,
        "OK",
        askGuidedNames
      );
      return;
    }

    names.push(value);
  }

  guidedNames = names;
  guidedPlayersDraft = names.slice();
  showGuidedSummary();
}

function showGuidedSummary(){
  showSimpleModal(
    "Récapitulatif de la partie ✅",
    `
      <div class="small" style="line-height:1.7;">
        <b>Ambiance :</b> ${getPresetLabel(guidedPreset)}
        ${guidedPreset === "kids" ? `<br><b>Âge :</b> ${getGuidedKidsAgeLabel(guidedKidsAge)} — ${getGuidedKidsAgeDifficultyLabel(guidedKidsAge)}` : ""}
        <br>
        <b>Mode :</b> ${getGuidedModeLabel()}
        ${guidedGameMode === "coop" ? `<br><b>Défi :</b> ${getGuidedCoopLevelIcon()} ${getGuidedCoopLevelLabel()} — ${getGuidedCoopMaxTurns()} tours maximum` : ""}
        <br>
        <b>Joueurs :</b> ${guidedPlayerCount}
        <br>
        ${guidedGameMode === "coop" ? `<b>Groupe :</b> 1 équipe coopérative` : `<b>Équipes :</b> ${guidedTeamCount} équipes automatiques`}
        <br><br>
        <b>Prénoms :</b>
        <br>
        ${guidedNames.map(name => `• ${name}`).join("<br>")}
      </div>

      <div style="margin-top:16px;">
        <button class="ghost" type="button" onclick="askGuidedPreset()">Modifier l’ambiance</button>
        <button class="ghost" type="button" onclick="askGuidedGameMode()">Modifier le mode</button>
        <button class="ghost" type="button" onclick="askGuidedPlayerCount()">Modifier les joueurs</button>
      </div>

      <div style="margin-top:18px;">
        <button class="ghost" type="button" onclick="closeGuidedParty()">
          Quitter la partie guidée
        </button>
      </div>
    `,
    "Démarrer la partie",
    applyGuidedConfigAndStart
  );

  speakVoiceStep("Votre partie est prête. Vérifiez le récapitulatif puis démarrez la partie.");
}

function applyGuidedConfigAndStart(){
  document.getElementById("btnGoConfig")?.click();

  setTimeout(() => {
    const teamCountInput = document.getElementById("teamCount");
    const teamMode = document.getElementById("teamMode");
    const randomPlayersInput = document.getElementById("randomPlayersInput");
    const voiceToggle = document.getElementById("voiceToggle");
    const gameModeInput = document.getElementById("gameMode");
    const coopBossLevelInput = document.getElementById("coopBossLevel");

    applyPresetFromGuided(guidedPreset);

    if(guidedPreset === "kids"){
      applyGuidedKidsAgeDifficulty(guidedKidsAge);
    }

    if(gameModeInput){
      gameModeInput.value = guidedGameMode;
      gameModeInput.dispatchEvent(new Event("change", { bubbles:true }));
    }

    if(coopBossLevelInput){
      coopBossLevelInput.value = guidedCoopBossLevel;
      coopBossLevelInput.dispatchEvent(new Event("change", { bubbles:true }));
    }

    if(teamCountInput){
      teamCountInput.value = String(guidedGameMode === "coop" ? 2 : guidedTeamCount);
      teamCountInput.dispatchEvent(new Event("input", { bubbles:true }));
      teamCountInput.dispatchEvent(new Event("change", { bubbles:true }));
    }

    if(teamMode){
      teamMode.value = "random";
      teamMode.dispatchEvent(new Event("change", { bubbles:true }));
    }

    if(randomPlayersInput){
      randomPlayersInput.value = guidedNames.join("\n");
      randomPlayersInput.dispatchEvent(new Event("input", { bubbles:true }));
      randomPlayersInput.dispatchEvent(new Event("change", { bubbles:true }));
    }

    if(voiceToggle){
      voiceToggle.value = "on";
      voiceToggle.dispatchEvent(new Event("change", { bubbles:true }));
    }

    if(window.speechSynthesis){
      window.speechSynthesis.cancel();
    }

    setTimeout(() => {
      document.getElementById("btnStartGame")?.click();
    }, 300);
  }, 300);
}

const quickStartBtn = document.getElementById("btnQuickStart");

if(quickStartBtn){
  quickStartBtn.addEventListener("click", (e) => {
    e.preventDefault();
    e.stopImmediatePropagation();
    startGuidedParty();
  }, true);
}
</script>
</body>
</html>