{SUITS.map((s) => { const finishRank = r.finishOrder.indexOf(s.k); return (

{s.sym} {s.name} {finishRank >= 0 && {["1er", "2e", "3e"][finishRank]} 🏁}

x.k === r.toll[s.k]).color }}>{SUITS.find((x) => x.k === r.toll[s.k]).sym}

); })}

⛽ Péage case {TOLL_AT} · chaque cheval doit tirer la couleur affichée au-dessus de sa ligne

{r.last && !r.done && (

{t("Carte tirée :","Card drawn:")} x.k === r.last).sym, c: (r.last === "h" || r.last === "d") ? "red" : "black" }} w={40} h={56} />

{r.cross && r.cross.length > 0 && (

{t("⛽ Péage franchi !","⛽ Toll cleared!")}

{r.cross.map((k) => SUITS.find((s) => s.k === k).sym).join(" ")} {r.cross.length > 1 ? "passent" : "passe"} le péage grâce au {SUITS.find((x) => x.k === r.last).sym}.

)} {r.recule && (

{t("⛔ Bloqué au péage","⛔ Stuck at the toll")}

{SUITS.find((x) => x.k === r.recule).sym} {t("recule (il lui faut","backs up (needs")} {SUITS.find((x) => x.k === r.toll[r.recule]).sym}). {(() => { const bt = players.filter((p) => bets[p] && bets[p].suit === r.recule); return bt.length ? bt.join(", ") + " " + (bt.length > 1 ? t("prennent","take") : t("prend","takes")) + t(" 1 pénalité."," 1 penalty.") : t("Les parieurs de ","Bettors of ") + SUITS.find((x) => x.k === r.recule).sym + t(" prennent 1 pénalité."," take 1 penalty."); })()}

)}

)} {r.done ? (

🏆

{SUITS.find((x) => x.k === winner).sym} {SUITS.find((x) => x.k === winner).name} gagne !

{t("Rejouer 🔁","Play again 🔁")}

) : (

{t("Carte suivante","Next card")} setAuto((a) => !a)}>{auto ? t("⏸ Pause auto","⏸ Auto-pause") : t("▶ Lecture auto","▶ Auto-play")}

)}

); } function ResultPMU({ players, bets, order }) { const place = ["1er", "2e", "3e", "4e"]; if (players.length === 0) { const w = SUITS.find((x) => x.k === order[0]); return

Classement : {order.map((k, i) => place[i] + " " + SUITS.find((s) => s.k === k).sym).join(" · ")}. Le 1er distribue le double de sa mise, le 2e distribue sa mise, le 3e prend sa mise, le dernier prend le double.

; } const lines = players.filter((p) => bets[p] && bets[p].suit).map((p) => { const b = bets[p]; const rk = order.indexOf(b.suit); const su = SUITS.find((s) => s.k === b.suit); const n = rk === 0 ? 2 * b.mise : rk === 1 ? b.mise : rk === 2 ? b.mise : 2 * b.mise; const give = rk <= 1; return { p, su, rk, n, give }; }).sort((a, b) => a.rk - b.rk); const noBet = players.filter((p) => !bets[p] || !bets[p].suit); return (

{lines.map(({ p, su, rk, n, give }) => (

{p} {su.sym} {place[rk]} {give ? "🎁 Distribue " : "🎯 Prends "}{n} pénalité{n > 1 ? "s" : ""}

))} {noBet.length > 0 &&

Sans pari : {noBet.join(", ")}

}

); } /* ====================== IMPOSTEUR (version unique) ====================== */ function Imposteur({ players, onBack, openPlayers }) { const cats = IMP_CATS; const [phase, setPhase] = useState("setup"); // setup | reveal | round | vote | elim const [nbImp, setNbImp] = useState(1); const [roles, setRoles] = useState([]); // { name, isImp, word, alive } const [cat, setCat] = useState("Aléatoire"); const [step, setStep] = useState(0); const [shown, setShown] = useState(false); const [secret, setSecret] = useState({ cat: "", word: "", decoy: "" }); const [order, setOrder] = useState([]); const [speaker, setSpeaker] = useState(0); const [votes, setVotes] = useState({}); const [secondsLeft, setSecondsLeft] = useState(120); const [elim, setElim] = useState(null); // { name, isImp } | { tie:true } const [winner, setWinner] = useState(null); // 'civils' | 'imposteurs' | null const [manche, setManche] = useState(1); const alive = roles.filter((r) => r.alive); const deal = () => { const ck = cat === "Aléatoire" ? pick(Object.keys(cats)) : cat; const words = cats[ck]; const word = pick(words); const decoy = pick(words.filter((w) => w !== word)); setSecret({ cat: ck, word, decoy }); const idx = shuffle(players.map((_, i) => i)).slice(0, nbImp); setRoles(players.map((name, i) => ({ name, isImp: idx.includes(i), word: idx.includes(i) ? decoy : word, alive: true }))); setOrder(shuffle(players)); setStep(0); setShown(false); setElim(null); setWinner(null); setManche(1); setPhase("reveal"); }; const startRound = (rs) => { const list = (rs || roles).filter((r) => r.alive).map((r) => r.name); setOrder(shuffle(list)); setSpeaker(0); setElim(null); setPhase("round"); }; const startVote = () => { setVotes({}); setSecondsLeft(120); setPhase("vote"); }; useEffect(() => { if (phase !== "vote") return; if (secondsLeft <= 0) { tally(); return; } const t = setTimeout(() => setSecondsLeft((s) => s - 1), 1000); return () => clearTimeout(t); }, [phase, secondsLeft]); const tally = () => { const entries = alive.map((r) => [r.name, votes[r.name] || 0]); const max = Math.max(0, ...entries.map((e) => e[1])); const top = entries.filter((e) => e[1] === max && max > 0).map((e) => e[0]); if (top.length !== 1) { setElim({ tie: true }); setPhase("elim"); return; } const name = top[0]; const r = roles.find((x) => x.name === name); const newRoles = roles.map((x) => (x.name === name ? { ...x, alive: false } : x)); const al = newRoles.filter((x) => x.alive); const imp = al.filter((x) => x.isImp).length; const civ = al.length - imp; let win = null; if (imp === 0) win = "civils"; else if (civ <= imp) win = "imposteurs"; setRoles(newRoles); setElim({ name, isImp: r.isImp }); setWinner(win); setPhase("elim"); }; const fmt = (s) => Math.floor(s / 60) + ":" + String(s % 60).padStart(2, "0"); if (phase === "setup") { const enough = players.length >= 3; return (

{t("Chacun reçoit un mot ; l'imposteur en a un voisin du même thème (ex. arbre / fleur). À chaque manche, tout le monde donne un mot lié au sien, puis on vote. L'éliminé est révélé. Les imposteurs gagnent dès que les civils sont en nombre égal ou inférieur aux imposteurs.","Everyone gets a word; the impostor gets a neighboring word from the same theme (e.g. tree / flower). Each round, everyone says a word linked to theirs, then you vote. The eliminated player is revealed. The impostors win as soon as the civilians are equal to or fewer than the impostors.")}

{!enough ? (

{t("Il faut au moins","You need at least")} {t("3 joueurs","3 players")} ({players.length} {t("pour l'instant).","so far).")}

{t("Ajouter des joueurs","Add players")}

) : ( <>

{t("Catégorie","Category")}

{["Aléatoire", ...Object.keys(cats)].map((k) => ())}

{t("Nombre d'imposteurs","Number of impostors")}

{[1, 2].map((n) => ())}

{t("Distribuer les mots 🎭","Deal the words 🎭")} )}

); } if (phase === "reveal") { const rl = roles[step]; const isLast = step === roles.length - 1; return (

{t("Passe le téléphone à","Pass the phone to")} {rl.name}

{shown && { if (isLast) startRound(); else { setStep((s) => s + 1); setShown(false); } }}>{isLast ? t("Tout le monde a vu →","Everyone has seen →") : t("J'ai vu, masquer","Seen it, hide")}}

); } if (phase === "round") { const last = speaker >= order.length - 1; return (

Manche {manche} · {alive.length} joueurs en jeu

{t("ORDRE DE PASSAGE","SPEAKING ORDER")}

{order.map((name, i) => (

{i + 1} {name}{i === speaker && {t("à toi de donner un mot","your turn to give a word")}}{i < speaker && ✓}

))}

{!last ? ( setSpeaker((s) => s + 1)}>{t("Joueur suivant →","Next player →")} ) : ( {t("Tout le monde a parlé · Voter ⏱","Everyone has spoken · Vote ⏱")} )}

); } if (phase === "vote") { const low = secondsLeft <= 20; return (

{t("Temps pour voter","Time to vote")}

{fmt(secondsLeft)}

{t("Ajoutez une voix par joueur. Le plus voté est éliminé.","Add one voice per player. The most-voted is eliminated.")}

{alive.map((r) => (

{r.name}

{votes[r.name] || 0}

))}

{t("Valider les votes","Confirm votes")}

); } // phase === "elim" if (elim && elim.tie) { return (

🤝

{t("Égalité","Tie")}

{t("Personne n'est éliminé ce tour.","No one is eliminated this round.")}

{ setManche((m) => m + 1); startRound(); }}>{t("Manche suivante →","Next round →")} {t("Revoter","Vote again")}

); } const imps = roles.filter((r) => r.isImp); return (

{t("Éliminé","Eliminated")}

{elim.name}

{elim.isImp ? t("C'était un imposteur 🕵️","That was an impostor 🕵️") : t("C'était un civil 😬","That was a civilian 😬")}

{winner ? (

{winner === "civils" ? "🎉" : "🕵️"}

{winner === "civils" ? t("Les civils gagnent !","The civilians win!") : t("Les imposteurs gagnent !","The impostors win!")}

{imps.length > 1 ? t("Imposteurs : ","Impostors: ") : t("Imposteur : ","Impostor: ")}{imps.map((r) => r.name).join(", ")}

Mot : {secret.word} · Mot imposteur : {secret.decoy}

{t("Rejouer 🔁","Play again 🔁")} setPhase("setup")}>{t("Réglages","Settings")}

) : ( { setManche((m) => m + 1); startRound(); }}>{t("Manche suivante →","Next round →")} )}

); } /* ====================== RIVIÈRE ====================== */ const RIV_TEAL = "#17C3B2"; function rivDeck() { const suits = [{ s: "♥", c: "red" }, { s: "♦", c: "red" }, { s: "♣", c: "black" }, { s: "♠", c: "black" }]; const ranks = [{ r: 2, l: "2" }, { r: 3, l: "3" }, { r: 4, l: "4" }, { r: 5, l: "5" }, { r: 6, l: "6" }, { r: 7, l: "7" }, { r: 8, l: "8" }, { r: 9, l: "9" }, { r: 10, l: "10" }, { r: 11, l: "J" }, { r: 12, l: "Q" }, { r: 13, l: "K" }, { r: 14, l: "A" }]; const d = []; suits.forEach((su) => ranks.forEach((ra) => d.push({ r: ra.r, l: ra.l, s: su.s, c: su.c }))); return shuffle(d).slice(0, 6); } const RIV_STEPS = ["hl", "hl", "hl", "color", "hl"]; // cartes 2..6 (la 6e = plus/moins) function RivCard({ card, faceUp, highlight, w = 46, h = 64 }) { const br = Math.max(6, Math.round(w * 0.14)); if (!faceUp) { return (

); } const col = card.c === "red" ? "#D4163C" : "#17101F"; const rk = Math.round(w * 0.3), pip = Math.round(w * 0.46), pad = Math.round(w * 0.1); return (

{card.l ? {card.l} : null} {card.s} {card.l ? {card.l} : null}

); } function Riviere({ players, onBack }) { const [deck, setDeck] = useState(() => rivDeck()); const [step, setStep] = useState(0); const [revealed, setRevealed] = useState(1); const [status, setStatus] = useState("play"); const [drink, setDrink] = useState(0); const [peek, setPeek] = useState(false); const restart = () => { setDeck(rivDeck()); setStep(0); setRevealed(1); setStatus("play"); setDrink(0); setPeek(false); }; const type = RIV_STEPS[step]; const target = step + 1; const prev = deck[target - 1]; const guess = (choice) => { const card = deck[target]; let ok; if (type === "hl") { const rel = card.r > prev.r ? "plus" : card.r < prev.r ? "moins" : "egal"; ok = choice === rel; } else ok = choice === "rouge" ? card.c === "red" : card.c === "black"; const nr = target + 1; setRevealed(nr); if (!ok) { setStatus("lost"); setDrink(nr); } else if (step === 4) setStatus("won"); else setStep(step + 1); }; return (

{t("Le meneur tient le téléphone et peut voir les cartes en secret pour bluffer. Qui se trompe prend autant de pénalités que de cartes retournées.","The leader holds the phone and can secretly see the cards to bluff. Whoever is wrong takes as many penalties as cards flipped.")}

{deck.map((c, i) => ())}

{status === "play" && (

Carte {target + 1} sur 6

{type === "hl" ? `${t("Plus, égal ou moins que","Higher, equal or lower than")} ${prev.l} ${prev.s} ?` : t("Rouge ou Noir ?","Red or Black?")}

{type === "hl" ? (<> guess("plus")} style={{ flex: 1, padding: "16px 6px" }}>{t("⬆ Plus","⬆ Higher")} guess("egal")} style={{ flex: 1, padding: "16px 6px" }}>{t("= Égal","= Equal")} guess("moins")} style={{ flex: 1, padding: "16px 6px" }}>{t("⬇ Moins","⬇ Lower")} ) : (<> guess("rouge")} style={{ flex: 1 }}>{t("● Rouge","● Red")} guess("noir")} style={{ flex: 1, border: `1px solid ${C.line}` }}>{t("● Noir","● Black")} )}

)} {status === "lost" && (

🎯

{t("Raté !","Wrong!")}

Tu prends {drink} pénalité{drink > 1 ? "s" : ""}

{t("Nouvelle rivière 🔁","New river 🔁")}

)} {status === "won" && (

🎉

{t("Rivière franchie !","River cleared!")}

{t("Distribue 6 pénalités à qui tu veux","Hand out 6 penalties to whoever you want")}

{t("Nouvelle rivière 🔁","New river 🔁")}

)} {peek && (

setPeek(false)} style={{ position: "fixed", inset: 0, background: "rgba(8,5,14,.96)", zIndex: 70, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 20, padding: 20 }}>

{t("Vue meneur — relâche pour cacher","Leader view, release to hide")}

{deck.map((c, i) => )}

)}

); } /* ====================== JOUEURS ====================== */ function PlayersSheet({ players, setPlayers, onClose }) { const [name, setName] = useState(""); const add = () => { const n = name.trim(); if (n && !players.includes(n)) { setPlayers([...players, n]); setName(""); } }; return (

e.stopPropagation()} style={{ background: C.bg2, width: "100%", maxWidth: 460, borderRadius: "24px 24px 0 0", padding: "22px 20px 30px", borderTop: `1px solid ${C.line}` }}>

{t("Joueurs","Players")}

{t("Ajoute au moins 2 joueurs pour lancer un jeu.","Add at least 2 players to start a game.")}

setName(e.target.value)} onKeyDown={(e) => e.key === "Enter" && add()} placeholder={t("Prénom","First name")} style={{ flex: 1, fontFamily: BODY, fontSize: 16, padding: "13px 14px", borderRadius: 13, border: `1px solid ${C.line}`, background: C.surface, color: C.text, outline: "none" }} />{t("Ajouter","Add")}

{players.length === 0 && {t("Aucun joueur pour l'instant.","No players yet.")}}{players.map((p) => (

{p}

))}

); } /* ====================== PAYWALL ====================== */ function Menu({ lang, onLang, premium, loggedIn, userEmail, onSubscribe, onRestore, onLogin, onLogout, onClose }) { const [view, setView] = useState("home"); const [rating, setRating] = useState(0); const [msg, setMsg] = useState(""); const [from, setFrom] = useState(""); const [sent, setSent] = useState(false); const field = { width: "100%", boxSizing: "border-box", fontFamily: BODY, fontSize: 15, padding: "12px 14px", borderRadius: 13, border: `1px solid ${C.line}`, background: C.surface, color: C.text, outline: "none", marginBottom: 12, resize: "vertical" }; const send = (subject, body) => { mailto(subject, body); setSent(true); }; const row = (icon, label, onClick) => ( ); const titles = { home: t("Menu","Menu"), lang: t("Langue","Language"), sub: t("Gérer mon abonnement","Manage subscription"), restore: t("Restaurer / résilier","Restore / cancel"), rate: t("Évaluer Pardy","Rate Pardy"), propose: t("Proposer un jeu ou des questions","Suggest a game or questions"), contact: t("Nous contacter","Contact us") }; const done =

{t("Merci ! Ton e-mail est prêt à être envoyé.","Thanks! Your email is ready to send.")}

; let content; if (view === "home") { content = (

{false && (loggedIn ?

{userEmail}{premium ? " · Premium" : ""}

: row(, t("Se connecter","Sign in"), onLogin))} {row(, titles.lang, () => setView("lang"))} {row(, titles.sub, () => setView("sub"))} {row(, titles.restore, () => setView("restore"))} {row(, titles.rate, () => { setSent(false); setView("rate"); })} {row(, titles.propose, () => { setSent(false); setView("propose"); })} {row(, titles.contact, () => { setSent(false); setView("contact"); })}

); } else if (view === "lang") { const opt = (code, label) => ; content =

{opt("fr","🇫🇷 Français")}{opt("en","🇬🇧 English")}

{t("La traduction complète des questions arrive progressivement.","Full question translation is being rolled out.")}

; } else if (view === "sub") { content = premium ?

{t("Ton abonnement Premium est actif.","Your Premium subscription is active.")}

setView("restore")}>{t("Gérer / résilier","Manage / cancel")}

onSubscribe("annual")} style={{ marginBottom: 10 }}>{t("Annuel · 34,80 €/an (−35 %)","Yearly · €34.80/yr (−35%)")} onSubscribe("monthly")}>{t("Mensuel · 4,49 €/mois","Monthly · €4.49/mo")}

{t("Paiement géré par VitrinePro33.","Payment handled by VitrinePro33.")}

; } else if (view === "restore") { content =

{t("Restaurer mes achats","Restore my purchases")}

{t("Pour résilier ton abonnement, écris-nous et on s'occupe de tout.","To cancel your subscription, send us a message and we'll handle it.")}

{sent ? done : send("Pardy — " + t("Résiliation abonnement","Subscription cancellation"), t("Bonjour, je souhaite résilier mon abonnement Pardy.","Hello, I would like to cancel my Pardy subscription.") + "\n\nEmail: " + (userEmail || ""))}>{t("Demander la résiliation","Request cancellation")}}

; } else if (view === "rate") { content = sent ? done :

{[1,2,3,4,5].map((n) => )}

setMsg(e.target.value)} placeholder={t("Ton avis (optionnel)","Your feedback (optional)")} rows={4} style={field} />
      <Btn full bg={C.hot} color="#fff" onClick={() => send("Pardy — " + t("Évaluation","Rating") + " " + rating + "/5", t("Note","Rating") + ": " + rating + "/5\n\n" + msg)}>{t("Envoyer","Send")}</Btn>
    </div>;
  } else if (view === "propose") {
    content = sent ? done : <div>
      <textarea value={msg} onChange={(e) => setMsg(e.target.value)} placeholder={t("Ton idée de jeu ou de questions...","Your game or question idea...")} rows={5} style={field} />
      <input value={from} onChange={(e) => setFrom(e.target.value)} placeholder={t("Ton e-mail (optionnel)","Your email (optional)")} style={field} />
      <Btn full bg={C.hot} color="#fff" onClick={() => send("Pardy — " + t("Proposition de jeu ou de questions","Game or question suggestion"), msg + "\n\n" + t("De","From") + ": " + from)}>{t("Envoyer","Send")}</Btn>
    </div>;
  } else {
    content = sent ? done : <div>
      <textarea value={msg} onChange={(e) => setMsg(e.target.value)} placeholder={t("Ton message...","Your message...")} rows={5} style={field} />
      <input value={from} onChange={(e) => setFrom(e.target.value)} placeholder={t("Ton e-mail","Your email")} style={field} />
      <Btn full bg={C.hot} color="#fff" onClick={() => send("Pardy — Contact", msg + "\n\n" + t("De","From") + ": " + from)}>{t("Envoyer","Send")}</Btn>
      <p style={{ fontFamily: BODY, color: C.muted, fontSize: 12, marginTop: 12, textAlign: "center" }}>support.pardy@gmail.com</p>
    </div>;
  }
  return (
    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.7)", display: "flex", alignItems: "flex-end", justifyContent: "center", zIndex: 70 }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: C.bg2, width: "100%", maxWidth: 460, borderRadius: "24px 24px 0 0", padding: "22px 22px 32px", borderTop: `1px solid ${C.line}`, maxHeight: "85vh", overflowY: "auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            {view !== "home" ? <button onClick={() => { setView("home"); setSent(false); }} style={{ background: "none", border: "none", color: C.muted, fontSize: 22, cursor: "pointer" }}>←</button> : null}
            <h3 style={{ fontFamily: DISPLAY, fontWeight: 800, fontSize: 20, margin: 0, color: C.text }}>{titles[view]}</h3>
          </div>
          <button onClick={onClose} style={{ background: "none", border: "none", color: C.muted, fontSize: 24, cursor: "pointer" }}>✕</button>
        </div>
        {content}
      </div>
    </div>
  );
}

/* ====================== APP ====================== */
function App() {
  const [screen, setScreen] = useState("home");
  const [players, setPlayers] = useState([]);
  const [sheet, setSheet] = useState(false);
  const [paywall, setPaywall] = useState(false);
  const [level, setLevel] = useState("soft");
  const [intro, setIntro] = useState(true);
  const [menu, setMenu] = useState(false);
  const [lang, setLang] = useState("fr");
  const changeLang = (l) => { LANG = l; setLang(l); };
  const [premium, setPremium] = useState(false);
  const PREMIUM_KEY = "pardy_premium_sub";
  const applyContent = (d) => {
    if (!d) return;
    AV.hot = d.av.hot; AV.extreme = d.av.extreme;
    if (d.av_en) { AV_EN.hot = d.av_en.hot; AV_EN.extreme = d.av_en.extreme; }
    if (d.tp_en) { TP_EN.hot = d.tp_en.hot; TP_EN.extreme = d.tp_en.extreme; }
    if (d.jnj_en) { JNJ_EN.hot = d.jnj_en.hot; JNJ_EN.extreme = d.jnj_en.extreme; }
    if (d.qp_en) { QP_EN.hot = d.qp_en.hot; QP_EN.extreme = d.qp_en.extreme; }
    JNJ_POOLS.hot = d.jnj.hot; JNJ_POOLS.extreme = d.jnj.extreme;
    TP.hot = d.tp.hot; TP.extreme = d.tp.extreme;
    QP_POOLS.hot = d.qp.hot; QP_POOLS.extreme = d.qp.extreme;
    window.__premiumLoaded = true;
  };
  const loadFrom = async (opts) => {
    if (!window.CONTENT_URL) return false;
    try {
      const headers = { "Content-Type": "application/json" };
      const _key = opts.auth || window.SUPABASE_ANON_KEY || "";
      if (_key) headers["Authorization"] = "Bearer " + _key;
      if (window.SUPABASE_ANON_KEY) headers["apikey"] = window.SUPABASE_ANON_KEY;
      const res = await fetch(window.CONTENT_URL, { method: "POST", headers, body: JSON.stringify(opts.body || {}) });
      if (!res.ok) return false;
      const d = await res.json();
      if (!d || !d.ok) return false;
      if (d.sub_id) { try { localStorage.setItem(PREMIUM_KEY, d.sub_id); } catch (e) {} }
      applyContent(d.content);
      setPremium(true);
      return true;
    } catch (e) { return false; }
  };
  const verifyAndLoad = async (payload) => loadFrom({ body: payload });
  const loadWithSession = async () => {
    if (!window.sb) return false;
    try { const { data } = await window.sb.auth.getSession(); const s = data && data.session; if (!s) return false; return await loadFrom({ auth: s.access_token }); } catch (e) { return false; }
  };
  const startCheckout = (plan) => {
    const link = plan === "monthly" ? window.STRIPE_LINK_MONTHLY : window.STRIPE_LINK_ANNUAL;
    if (!link) { alert(t("Paiement non configuré (config.js).", "Payment not configured (config.js).")); return; }
    window.location.href = link;
  };
  const restoreAccess = async () => {
    if (!window.sb) { alert(t("Restauration indisponible (config.js).", "Restore unavailable (config.js).")); return; }
    let email = "";
    try { email = window.prompt(t("Entre l'e-mail utilisé lors du paiement :", "Enter the email used at payment:")) || ""; } catch (e) {}
    email = email.trim();
    if (!email) return;
    try {
      const { error } = await window.sb.auth.signInWithOtp({ email, options: { emailRedirectTo: window.location.origin + window.location.pathname } });
      alert(error ? (error.message || t("Envoi impossible.", "Could not send.")) : t("Lien envoyé ! Ouvre ta boîte mail et clique sur le lien pour débloquer ton accès.", "Link sent! Open your inbox and click the link to unlock your access."));
    } catch (e) { alert(t("Envoi impossible pour le moment.", "Could not send right now.")); }
  };
  useEffect(() => {
    if (typeof window === "undefined") return;
    let params; try { params = new URLSearchParams(window.location.search); } catch (e) { params = null; }
    const sid = params ? params.get("session_id") : null;
    if (sid) {
      verifyAndLoad({ session_id: sid }).finally(() => {
        try { params.delete("session_id"); params.delete("paid"); const q = params.toString(); window.history.replaceState({}, "", window.location.pathname + (q ? "?" + q : "")); } catch (e) {}
      });
      return;
    }
    let stored = null; try { stored = localStorage.getItem(PREMIUM_KEY); } catch (e) {}
    if (stored) { verifyAndLoad({ sub_id: stored }); return; }
    if (window.sb) {
      loadWithSession();
      try { window.sb.auth.onAuthStateChange((_e, session) => { if (session) loadWithSession(); }); } catch (e) {}
    }
  }, []);

useEffect(() => {
    const l = document.createElement("link"); l.rel = "stylesheet";
    l.href = "https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Outfit:wght@300;400;500;600;700&display=swap";
    document.head.appendChild(l);
    return () => { try { document.head.removeChild(l); } catch (e) {} };
  }, []);
  const back = () => { setLevel("soft"); setScreen("home"); };
  const chooseLevel = async (lv) => {
    if (lv !== "soft" && !premium) { setPaywall(true); return; }
    if (lv !== "soft" && !window.__premiumLoaded) {
      let stored = null; try { stored = localStorage.getItem("pardy_premium_sub"); } catch (e) {}
      const ok = stored ? await verifyAndLoad({ sub_id: stored }) : false;
      if (!ok) { alert(t("Contenu Premium indisponible pour le moment.","Premium content unavailable right now.")); return; }
    }
    setLevel(lv);
  };
  // niveau effectif d'un jeu : soft si jeu non concerné
  const gl = (id) => (LEVELLED.includes(id) ? level : "soft");
  const openGame = (id) => { if (players.length < 2) { setSheet(true); return; } setScreen(id); };
  const handleSubscribe = (plan) => { setMenu(false); startCheckout(plan); };
  const handleRestore = () => { setMenu(false); restoreAccess(); };
  const demoLogin = () => { setMenu(false); };
  const demoLogout = () => { setMenu(false); };

return (
    <div style={{ minHeight: "100vh", background: C.bg, color: C.text, fontFamily: BODY }}>
      <div style={{ maxWidth: 460, margin: "0 auto", padding: "26px 20px 60px", minHeight: "100vh", boxSizing: "border-box" }}>
        {screen === "home" && <Home players={players} level={level} premium={premium} onPremium={() => setPaywall(true)} onOpen={openGame} onPlayers={() => setSheet(true)} onMenu={() => setMenu(true)} />}
        {screen === "av" && <ActionVerite players={players} level={gl("av")} premium={premium} onChooseLevel={chooseLevel} onBack={back} />}
        {screen === "tp" && <TuPrefere level={gl("tp")} premium={premium} onChooseLevel={chooseLevel} onBack={back} />}
        {screen === "jnj" && <JeNaiJamais level={gl("jnj")} premium={premium} onChooseLevel={chooseLevel} onBack={back} />}
        {screen === "qp" && <QuiPourrait level={gl("qp")} premium={premium} onChooseLevel={chooseLevel} onBack={back} />}
        {screen === "pmu" && <PMU players={players} onBack={back} />}
        {screen === "riv" && <Riviere players={players} onBack={back} />}
        {screen === "imp" && <Imposteur players={players} onBack={back} openPlayers={() => setSheet(true)} />}
      </div>
      {sheet && <PlayersSheet players={players} setPlayers={setPlayers} onClose={() => setSheet(false)} />}
      {paywall && <Paywall onClose={() => setPaywall(false)} onUnlock={startCheckout} onRestore={restoreAccess} />}
      {intro && !premium && <Intro onClose={() => setIntro(false)} onSubscribe={() => { setIntro(false); startCheckout("monthly"); }} />}
      {menu && <Menu lang={lang} onLang={changeLang} premium={premium} loggedIn={false} userEmail={null} onSubscribe={handleSubscribe} onRestore={handleRestore} onLogin={demoLogin} onLogout={demoLogout} onClose={() => setMenu(false)} />}
    </div>
  );
}

{!premium && (
        <button onClick={onPremium} style={{ marginTop: 22, width: "100%", border: "none", cursor: "pointer", borderRadius: 18, padding: "13px 15px", background: "linear-gradient(100deg," + C.hot + "," + C.purple + ")", WebkitTapHighlightColor: "transparent", display: "flex", alignItems: "center", gap: 13, textAlign: "left", boxShadow: "0 10px 26px rgba(154,91,255,.30)", position: "relative", overflow: "hidden" }}>
          <span style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,rgba(255,255,255,.18),transparent 42%)", pointerEvents: "none" }} />
          <span style={{ flex: "0 0 40px", height: 40, borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(255,255,255,.18)", position: "relative" }}>
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="#fff" strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round"><path d="M5 4h14l3 5-10 12L2 9z" /><path d="M2 9h20M9 4l-2.5 5L12 21M15 4l2.5 5L12 21" /></svg>
          </span>
          <span style={{ flex: 1, display: "flex", flexDirection: "column", position: "relative" }}>
            <span style={{ fontFamily: DISPLAY, fontWeight: 800, fontSize: 16.5, color: "#fff", lineHeight: 1.1 }}>{t("Passer au Premium","Go Premium")}</span>
            <span style={{ fontFamily: BODY, fontWeight: 500, fontSize: 12.5, color: "rgba(255,255,255,.85)", marginTop: 3 }}>{t("Hot, Extrême et tous les niveaux · dès 4,49 €","Hot, Extreme and all levels · from €4.49")}</span>
          </span>
          <span style={{ position: "relative", color: "rgba(255,255,255,.92)", fontSize: 24, fontWeight: 300 }}>{"\u203a"}</span>
        </button>
      )}

<button onClick={onPlayers} style={{ marginTop: 16, marginBottom: 22, width: "100%", textAlign: "left", background: C.surface, border: `1px solid ${C.line}`, borderRadius: 16, padding: "14px 16px", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", WebkitTapHighlightColor: "transparent" }}>
        <span style={{ fontFamily: BODY, color: C.text, fontWeight: 600, display: "flex", alignItems: "center", gap: 9 }}><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke={C.pink} strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><circle cx="9" cy="8" r="3.2" /><path d="M3.5 19a5.5 5.5 0 0 1 11 0" /><path d="M16 5.5a3.2 3.2 0 0 1 0 6.2" /><path d="M17 14.2A5.5 5.5 0 0 1 20.5 19" /></svg><span>{t("Joueurs","Players")} {players.length > 0 && <span style={{ color: C.muted, fontWeight: 400 }}>· {players.join(", ")}</span>}</span></span>
        <span style={{ fontFamily: BODY, color: C.muted, fontSize: 14 }}>{players.length === 0 ? t("Ajouter","Add") : t("Modifier","Edit")}</span>
      </button>

<div style={{ display: "grid", gap: 14 }}>
        {GAMES.map((g) => {
          const showsLevel = g.levelled && isHot;
          const lv = LEVELS[level];
          return (
            <button key={g.id} onClick={() => onOpen(g.id)} style={{ position: "relative", overflow: "hidden", textAlign: "left", cursor: "pointer", background: C.surface, border: "none", borderRadius: 22, padding: "22px 20px", display: "flex", alignItems: "center", gap: 16, WebkitTapHighlightColor: "transparent", transition: "transform .12s ease" }}
              onPointerDown={(e) => (e.currentTarget.style.transform = "scale(.985)")} onPointerUp={(e) => (e.currentTarget.style.transform = "scale(1)")} onPointerLeave={(e) => (e.currentTarget.style.transform = "scale(1)")}>
              <div style={{ position: "absolute", right: -30, top: "50%", transform: "translateY(-50%)", width: 130, height: 130, borderRadius: "50%", background: g.color, opacity: 0.16, filter: "blur(6px)" }} />
              <div style={{ position: "relative", width: 54, height: 54, flexShrink: 0 }}>
                <div style={{ position: "absolute", inset: 0, borderRadius: 16, fontSize: 28, display: "flex", alignItems: "center", justifyContent: "center", background: g.color + "26", border: `1.5px solid ${g.color}` }}>{g.emoji}</div>
                {g.img && <img src={g.img} alt="" style={{ position: "absolute", inset: 0, width: 54, height: 54, borderRadius: 16, objectFit: "cover", border: `1.5px solid ${g.color}` }} onError={(e) => (e.currentTarget.style.display = "none")} />}
              </div>
              <div style={{ position: "relative", flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ fontFamily: DISPLAY, fontWeight: 800, fontSize: 20, color: C.text }}>{LANG === "en" ? GAME_I18N[g.id].name : g.name}</span>
                  {showsLevel && <span style={{ fontFamily: BODY, fontWeight: 700, fontSize: 10.5, color: lv.color, border: `1px solid ${lv.color}`, padding: "1px 6px", borderRadius: 20 }}>{lv.badge}</span>}
                </div>
                <div style={{ fontFamily: BODY, fontSize: 13, color: C.muted, marginTop: 2 }}>{LANG === "en" ? GAME_I18N[g.id].tag : g.tag}</div>
              </div>
            </button>
          );
        })}
      </div>
      <p style={{ textAlign: "center", fontFamily: BODY, color: C.muted, fontSize: 12, marginTop: 26 }}>{t("Réservé aux adultes · 18+","Adults only · 18+")}</p>
      <div style={{ textAlign: "center", marginTop: 14, paddingBottom: 8 }}>
        <a href="mentions-legales.html" target="_blank" rel="noopener" style={{ fontFamily: BODY, color: C.muted, fontSize: 11.5, textDecoration: "none", opacity: 0.8 }}>{t("Mentions légales","Legal notice")}</a>
        <span style={{ color: C.muted, fontSize: 11.5, opacity: 0.5, margin: "0 8px" }}>·</span>
        <a href="cgv.html" target="_blank" rel="noopener" style={{ fontFamily: BODY, color: C.muted, fontSize: 11.5, textDecoration: "none", opacity: 0.8 }}>{t("CGV","Terms")}</a>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

{title}

{t("Joueurs","Players")}