/* ===== Styles communs aux nouveaux jeux ===== */

.tableau-bord {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 12px;
}

/* Un canvas (feuille de dessin) centré, qui rétrécit sur téléphone */
.jeu-canvas {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: 2px solid var(--violet);
  border-radius: 14px;
  touch-action: none;            /* le doigt joue au lieu de faire défiler la page */
  background: #15102b;
}

/* Une zone de jeu « en boîte » */
.zone-jeu {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  border: 2px solid var(--violet);
  border-radius: 18px;
  background: linear-gradient(#0a1a6e, #3a1a8a);
}

.bouton-jeu { border: none; cursor: pointer; color: var(--texte); }
.centre { text-align: center; }
.message-jeu { text-align: center; font-size: 22px; font-weight: bold; min-height: 32px; }
.champ-jeu {
  padding: 12px;
  font-size: 22px;
  width: min(260px, 80%);
  text-align: center;
  border-radius: 12px;
  border: 2px solid var(--violet);
  background: rgba(0, 0, 0, 0.4);
  color: var(--texte);
}

/* ===== Les 10 nouveaux jeux ===== */
.note-nouveau { text-align: center; font-size: 14px; color: #ffd23f; margin-top: -6px; }
.manette { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px auto 0; max-width: 420px; }
.manette .bouton { border: none; cursor: pointer; color: var(--texte); font-size: 20px; padding: 12px 18px; margin: 0; touch-action: manipulation; user-select: none; }
.manette .bouton.choisie { background: #ffd23f; color: #111; }
[data-tour] { font-size: 15px !important; }
.gros-melange { font-size: clamp(30px, 9vw, 50px); font-weight: 900; color: #ffd23f; letter-spacing: 4px; margin: 10px 0; }
.plateau-taquin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(330px, 90vw); margin: 0 auto; }
.case-taquin { aspect-ratio: 1; border: none; border-radius: 14px; font-size: clamp(32px, 10vw, 52px); font-weight: 900; color: #fff; cursor: pointer;
               background: linear-gradient(135deg, var(--rose), var(--violet)); box-shadow: 0 4px 0 #5a1a8a; touch-action: manipulation; }
.case-taquin.bien { background: linear-gradient(135deg, #3ddc84, #1f9d55); box-shadow: 0 4px 0 #0f5a30; }
.case-taquin.trou { background: rgba(0,0,0,.35); box-shadow: none; cursor: default; }

/* 🎃 Tape-citrouilles : 9 trous dans la terre */
.champ-citrouilles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(360px, 92vw); margin: 0 auto; padding: 16px; border-radius: 18px;
                     background: linear-gradient(#1a0b2e, #2a1a10); border: 2px solid #ff8a1c; }
.champ-citrouilles .trou { aspect-ratio: 1; border: none; border-radius: 50%; background: radial-gradient(ellipse at 50% 70%, #120804 45%, #3a2412 70%); cursor: pointer;
        font-size: clamp(40px, 12vw, 58px); color: #fff; padding: 0; touch-action: manipulation; transition: transform .1s; user-select: none; }
.champ-citrouilles .trou.sorti { transform: translateY(-4px) scale(1.05); }
.champ-citrouilles .trou.tape { transform: scale(.85); }

/* ===== Les 20 jeux d'octobre 2026 ===== */
/* 🔢 2048 */
.plateau-2048 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(340px, 92vw); margin: 0 auto; padding: 8px;
                border-radius: 16px; background: rgba(0,0,0,.35); touch-action: none; user-select: none; }
.tuile-2048 { aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,.07); display: grid; place-items: center;
              font-size: clamp(22px, 8vw, 36px); font-weight: 900; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.tuile-2048.dore { box-shadow: 0 0 18px #ffd23f; }
/* 👆 Clic éclair */
.gros-bouton-clic { width: min(260px, 70vw); aspect-ratio: 1; border-radius: 50%; border: none; cursor: pointer; font-size: 30px; font-weight: 900; color: #fff;
                    background: radial-gradient(circle at 35% 30%, #ff7ab6, var(--rose) 45%, var(--violet)); box-shadow: 0 10px 0 #4a1470;
                    touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.gros-bouton-clic.boum { animation: clic-boum .12s; }
@keyframes clic-boum { 50% { transform: scale(.93); box-shadow: 0 4px 0 #4a1470; } }
/* 🎈 Mot mystère */
.ballons { font-size: 30px; letter-spacing: 2px; margin: 0; }
.mot-mystere { font-size: clamp(24px, 7vw, 38px); font-weight: 900; letter-spacing: 4px; color: #ffd23f; margin: 14px 0; word-break: break-all; }
.clavier-lettres { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.touche-lettre { margin: 0; padding: 10px 0; font-size: 17px; font-weight: 800; border: none; cursor: pointer; color: var(--texte); touch-action: manipulation; }
.touche-lettre.bonne { background: #1f9d55; }
.touche-lettre.mauvaise { background: #5a2130; opacity: .6; }
/* 💡 Allume tout */
.plateau-lampes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: min(330px, 90vw); margin: 0 auto; }
.lampe { aspect-ratio: 1; border: none; border-radius: 12px; background: #1b1530; font-size: clamp(22px, 7vw, 32px); cursor: pointer; touch-action: manipulation; transition: background .15s; }
.lampe.allumee { background: #ffe27a; box-shadow: 0 0 14px #ffd23f; }
/* ✊ Chifoumi */
.duel-chifoumi { display: flex; justify-content: center; align-items: center; gap: 24px; font-size: 22px; }
.duel-chifoumi div { display: flex; flex-direction: column; align-items: center; }
.duel-chifoumi span { font-size: 70px; line-height: 1.2; }
#lama.secoue { animation: chifoumi-secoue .15s linear 3; }
@keyframes chifoumi-secoue { 50% { transform: translateY(-12px); } }
/* 🔢 Plus ou moins, 🔐 Code secret */
.historique-essais { list-style: none; padding: 0; margin: 12px 0 0; font-size: 18px; line-height: 1.8; }
.coffre { font-size: 60px; margin: 0; }
.code-en-cours { font-size: 34px; letter-spacing: 4px; min-height: 44px; margin: 6px 0; }
.pion { font-size: 26px; padding: 8px 12px; }
/* 🌍 Capitales, ✅ Vrai ou faux */
.gros-calcul { font-size: clamp(26px, 8vw, 40px); font-weight: 900; margin: 10px 0 16px; transition: color .2s; }
.gros-calcul.ok { color: #3ddc84; }
.gros-calcul.non { color: #ff4d6d; }
.reponses-quiz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reponse-quiz { margin: 0; border: none; cursor: pointer; color: var(--texte); font-size: 18px; padding: 16px 8px; touch-action: manipulation; }
.reponse-quiz.vrai { background: #1f9d55; }
.reponse-quiz.faux { background: #b3263e; }
.bouton-vrai { background: #1f9d55 !important; font-size: 24px !important; padding: 18px 26px !important; }
.bouton-faux { background: #b3263e !important; font-size: 24px !important; padding: 18px 26px !important; }
/* 🗼 Tours de Hanoï */
.tours-hanoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 520px; margin: 0 auto; }
.tour-hanoi { position: relative; height: 200px; border: 2px solid transparent; border-radius: 14px; background: rgba(0,0,0,.3); cursor: pointer; padding: 0; touch-action: manipulation; }
.tour-hanoi.arrivee { background: rgba(61, 220, 132, .12); }
.tour-hanoi.choisie { border-color: #ffd23f; }
.tour-hanoi .tige { position: absolute; left: 50%; bottom: 8px; width: 8px; height: 160px; margin-left: -4px; border-radius: 4px; background: #8d6e63; }
.tour-hanoi .disque { position: absolute; left: 50%; height: 22px; border-radius: 11px; transform: translateX(-50%); box-shadow: 0 3px 0 rgba(0,0,0,.3); transition: bottom .15s; }
.tour-hanoi .disque.leve { bottom: 172px !important; }

/* Pour les vieux navigateurs qui ne connaissent pas « aspect-ratio » : une hauteur minimum */
@supports not (aspect-ratio: 1) {
  .champ-citrouilles .trou { height: 90px; }
  .case-taquin, .tuile-2048, .lampe { height: 70px; }
}

/* ===== ⏱️ 🔢 🦙 Les 3 jeux d'octobre ===== */
.zone-mini-jeu { max-width: 420px; margin: 1rem auto; padding: 1.5rem 1rem; text-align: center; border-radius: 18px; background: rgba(180, 76, 255, 0.10); border: 2px solid rgba(180, 76, 255, 0.35); }
.gros-chrono { font-size: clamp(2.6rem, 12vw, 4rem); font-weight: 800; font-variant-numeric: tabular-nums; margin: 0.5rem 0 1rem; letter-spacing: 2px; word-break: break-all; }
.gros-bouton { font-size: 1.3rem; padding: 0.8rem 2rem; }
.barre-temps { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin: 0 0 1rem; }
.barre-temps div { height: 100%; width: 0; background: #b44cff; }
.champ-chiffres { font-size: 1.4rem; text-align: center; letter-spacing: 3px; max-width: 220px; }
.pre-lamas { position: relative; height: 260px; border-radius: 14px; background: linear-gradient(#8fd3ff33, #3ca55c55); margin-bottom: 1rem; overflow: hidden; }
.pre-lamas span { position: absolute; font-size: 2rem; transform: translate(-50%, -50%); }
.boutons-nombres { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; margin-bottom: 1rem; }
.boutons-nombres button { font-size: 1.2rem; padding: 0.6rem 0; }

/* ===== 🔴 Puissance 4 ===== */
.tour-p4 { font-weight: 700; min-height: 1.4em; }
.grille-p4 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 8px; border-radius: 14px; background: #2546c8; max-width: 380px; margin: 0 auto 1rem; }
.grille-p4 button { aspect-ratio: 1; border: none; border-radius: 50%; background: #10142a; cursor: pointer; padding: 0; font-size: 0; }
.grille-p4 button.rouge { background: #ff4b5c; }
.grille-p4 button.jaune { background: #ffd23f; }
.grille-p4 button.gagne { box-shadow: 0 0 0 3px #fff inset; }
/* ===== 🪢 Le pendu ===== */
.vies-pendu { font-size: 1.3rem; min-height: 1.5em; }
.mot-pendu { font-size: clamp(1.6rem, 8vw, 2.4rem); font-weight: 800; letter-spacing: 0.35em; word-break: break-all; }
.clavier-pendu { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 380px; margin: 0 auto 1rem; }
.clavier-pendu button { padding: 0.5rem 0; font-weight: 700; }
.clavier-pendu button:disabled { opacity: 0.3; }
/* ===== 🔥 Les allumettes ===== */
.tas-allumettes { font-size: 1.8rem; line-height: 1.6; letter-spacing: 2px; min-height: 2em; }
.choix-allumettes { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

/* ===== Les 10 jeux d'octobre (2) ===== */
/* ❌ Morpion */
.grille-morpion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 300px; margin: 0 auto 1rem; }
.grille-morpion button { aspect-ratio: 1; font-size: 44px; border-radius: 12px; border: 2px solid var(--violet); background: #120c26; cursor: pointer; padding: 0; }
.grille-morpion button.gagne { background: rgba(61, 220, 132, 0.3); }
/* ⬅️ Flèches éclair */
.fleche-geante { font-size: 90px; margin: 0.2rem 0; }
.fleche-geante.secoue { animation: secoue 0.3s; }
@keyframes secoue { 25% { transform: translateX(-12px); } 75% { transform: translateX(12px); } }
.boutons-fleches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 320px; margin: 0 auto; }
.boutons-fleches .bouton, .choix-suite .bouton, .ingredients .bouton { margin: 0; padding: 12px 0; }
/* 🃏 Plus ou moins grand */
.carte-jeu-geante { width: 130px; height: 180px; margin: 0.5rem auto 1rem; border-radius: 14px; background: #fff; color: #111; font-size: 46px; font-weight: 900;
                    display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(180, 76, 255, 0.5); }
.carte-jeu-geante.retourne { animation: retourne 0.35s; }
@keyframes retourne { 0% { transform: rotateY(90deg); } 100% { transform: none; } }
.choix-plus-grand { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* 🔢 Suites logiques */
.suite-nombres { font-size: clamp(1.4rem, 6vw, 2.2rem); font-weight: 800; letter-spacing: 1px; }
.choix-suite { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 320px; margin: 0 auto 1rem; }
/* 👀 Trouve l'intrus */
.grille-intrus { display: grid; gap: 4px; max-width: 380px; margin: 0 auto 1rem; }
.grille-intrus button { aspect-ratio: 1; font-size: clamp(16px, 5vw, 30px); border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.06); cursor: pointer; padding: 0; }
.grille-intrus button.rate { background: rgba(255, 75, 92, 0.45); }
/* 🎈 Gonfle le ballon */
.zone-ballon { height: 220px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.ballon { font-size: 90px; border: none; background: none; cursor: pointer; transform-origin: bottom center; user-select: none; -webkit-user-select: none; touch-action: none; padding: 0; line-height: 1; }
/* 🍕 La pizzeria */
.commande-pizza { font-size: 34px; min-height: 1.4em; letter-spacing: 4px; }
.ma-pizza { font-size: 28px; min-height: 1.4em; }
.ingredients { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 360px; margin: 0 auto 1rem; }
.ingredients .bouton { font-size: 26px; }
/* 🟪 Grille mémoire */
.grille-memoire { display: grid; gap: 6px; max-width: 360px; margin: 0 auto 1rem; }
.grille-memoire button { aspect-ratio: 1; border: none; border-radius: 10px; background: #1d1640; cursor: pointer; transition: background 0.15s; }
.grille-memoire button.allumee { background: #b44cff; box-shadow: 0 0 14px #b44cff; }
.grille-memoire button.trouvee { background: #3ddc84; }
.grille-memoire button.rate { background: #ff4b5c; }
/* 🔁 Mots à l'envers */
.mot-envers { font-size: clamp(2rem, 9vw, 3rem); font-weight: 900; letter-spacing: 4px; margin: 0.4rem 0 1rem; }
/* 🎯 Stop la barre */
.piste-barre { position: relative; height: 46px; border-radius: 12px; background: #1d1640; overflow: hidden; margin: 1rem 0 0.5rem; }
.zone-barre { position: absolute; top: 0; bottom: 0; background: rgba(61, 220, 132, 0.55); border-left: 2px solid #3ddc84; border-right: 2px solid #3ddc84; }
.curseur-barre { position: absolute; top: -4px; bottom: -4px; width: 6px; margin-left: -3px; background: #fff; box-shadow: 0 0 10px #fff; border-radius: 3px; }
.piste-barre.flash-vert { animation: flash-vert 0.3s; }
@keyframes flash-vert { 0% { box-shadow: 0 0 24px #3ddc84; } }
.piste-barre.flash-rouge { box-shadow: 0 0 24px #ff4b5c; }

/* ===== Les 20 jeux d'octobre (3) ===== */
/* 🔨 Tape-lama */
.champ-taupes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 330px; margin: 0 auto 1rem; }
.trou-taupe { aspect-ratio: 1; border-radius: 50%; border: none; cursor: pointer; font-size: 46px; padding: 0;
              background: radial-gradient(circle at 50% 70%, #241406 55%, #4a2c10 56%); transition: transform 0.1s; }
.trou-taupe.sorti { transform: translateY(-6px); }
/* ✂️ Coupe le bon fil */
.consigne-fil { font-size: 22px; font-weight: 700; min-height: 2.2em; }
.consigne-fil strong { font-size: 28px; letter-spacing: 1px; }
.bombe-fils { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 0 auto 1rem; padding: 16px; border-radius: 16px; background: #222; border: 3px solid #555; }
.fil { height: 22px; border: none; border-radius: 11px; cursor: pointer; transition: transform 0.15s, opacity 0.2s; }
.fil:hover { transform: scaleY(1.3); }
.fil.coupe { opacity: 0.25; transform: scaleX(0.4); }
/* 🔟 Fais 10 · 🔢 De 1 à 25 · 🔥 Chaud ou froid */
.grille-dix, .grille-ordre { display: grid; gap: 6px; max-width: 340px; margin: 0 auto 1rem; }
.grille-dix { grid-template-columns: repeat(4, 1fr); }
.grille-ordre { grid-template-columns: repeat(5, 1fr); }
.grille-dix button, .grille-ordre button { aspect-ratio: 1; font-size: 24px; font-weight: 800; border: 2px solid var(--violet); border-radius: 12px; background: #120c26; color: inherit; cursor: pointer; }
.grille-dix button.choisi { background: var(--violet); }
.grille-ordre button.fait { opacity: 0.25; }
.grille-ordre button.rate { background: #ff4b5c; }
.grille-chaud { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; max-width: 360px; margin: 0 auto 1rem; }
.grille-chaud button { aspect-ratio: 1; border: none; border-radius: 6px; background: #2b2450; cursor: pointer; font-size: 16px; padding: 0; transition: background 0.2s; }
/* 🕐 Quelle heure */
.horloge-canvas { display: block; margin: 0 auto 1rem; max-width: 70%; }
/* 🏃 Sprint · 🚦 Feu rouge */
.piste-sprint { position: relative; height: 60px; border-radius: 10px; margin: 1rem 0; background: repeating-linear-gradient(90deg, #a5402a 0 46px, #b8513a 46px 50px); }
.piste-sprint #coureur { position: absolute; left: 0; top: 8px; font-size: 38px; transform: scaleX(-1); transition: left 0.08s linear; }
.piste-sprint .arrivee { position: absolute; right: 4px; top: 10px; font-size: 34px; }
.boutons-sprint { display: flex; gap: 12px; justify-content: center; }
.boutons-sprint .bouton { font-size: 32px; padding: 14px 34px; margin: 0; touch-action: manipulation; }
.feu { font-size: 70px; margin: 0; }
.bouton-avancer { user-select: none; -webkit-user-select: none; touch-action: none; }
.bouton-avancer.appuye { transform: scale(0.94); box-shadow: 0 0 20px #3ddc84; }
/* ⚖️ La balance */
.balance { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 1rem 0; }
.plateau { flex: 1; min-height: 70px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border-bottom: 4px solid #ffd23f; }
.poids { width: 38px; height: 38px; border-radius: 8px; background: #555a6e; color: #fff; font-weight: 900; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.pivot { font-size: 34px; }
/* 🔠 L'alphabet éclair */
.alphabet-fait { letter-spacing: 3px; color: #3ddc84; font-weight: 800; min-height: 1.3em; word-break: break-all; }
#lettre.secoue { animation: secoue 0.3s; }
/* ♻️ Le tri des déchets */
.dechet { font-size: 80px; margin: 0; }
.poubelles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 380px; margin: 0 auto 1rem; }
.poubelles .bouton { margin: 0; font-size: 17px; padding: 14px 6px; }
.poubelle-jaune { background: #c9a400 !important; } .poubelle-vert { background: #2e7d32 !important; }
.poubelle-marron { background: #6d4c41 !important; } .poubelle-gris { background: #424242 !important; }
/* ♞ Le cavalier */
.echiquier { display: grid; grid-template-columns: repeat(8, 1fr); max-width: 380px; margin: 0 auto 1rem; border: 4px solid #6d4c41; border-radius: 6px; overflow: hidden; }
.echiquier button { aspect-ratio: 1; border: none; padding: 0; font-size: clamp(18px, 6vw, 32px); cursor: pointer; position: relative; color: #111; }
.echiquier .blanche { background: #f0d9b5; } .echiquier .noire { background: #b58863; }
.echiquier .possible::after { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: rgba(61, 140, 70, 0.75); }
/* 🎨 Mélange de couleurs */
.melange { font-size: 28px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; }
.pastille { display: inline-block; width: 1.4em; height: 1.4em; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); vertical-align: middle; }
.bouton-couleur { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 16px; }
/* 🥞 Les crêpes */
.poeles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 380px; margin: 1rem auto; }
.poele { aspect-ratio: 1; border-radius: 50%; border: 8px solid #2b2b2b; cursor: pointer; font-size: 30px; padding: 0;
         background: radial-gradient(circle, var(--crepe, transparent) 58%, #3a3a3a 60%); box-shadow: 0 6px 0 #111; }
.poele.doree { box-shadow: 0 0 18px #ffd23f, 0 6px 0 #111; }
/* 🔐 La serrure */
.cadenas { font-size: 64px; margin: 0.3rem 0; cursor: pointer; transition: filter 0.05s; }
.cadran { position: relative; width: 200px; height: 200px; margin: 0 auto 1rem; border-radius: 50%; cursor: pointer;
          background: repeating-conic-gradient(#2b2450 0 5deg, #1d1640 5deg 10deg); border: 6px solid #888; }
.cadran.secoue { animation: secoue 0.3s; }
.aiguille { position: absolute; left: 50%; top: 10px; width: 6px; height: 90px; margin-left: -3px; border-radius: 3px; background: #ff4b5c; transform-origin: 50% 90px; }
/* 🪞 Symétrie */
.grille-symetrie { display: grid; gap: 3px; max-width: 360px; margin: 0 auto; }
.grille-symetrie button { aspect-ratio: 1; border: none; border-radius: 5px; padding: 0; cursor: pointer; background: #2b2450; }
.grille-symetrie .modele { background: #1a1533; cursor: default; }
.grille-symetrie .plein { background: #b44cff; }
.grille-symetrie .faux { box-shadow: inset 0 0 0 3px #ff4b5c; }
.grille-symetrie .miroir { box-shadow: 4px 0 0 #5ee7ff; }

/* ===== 🎨 Pixel peintre ===== */
.atelier-peintre { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.atelier-peintre > div { flex: 1 1 150px; max-width: 260px; }
.grille-peintre { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 4px; border-radius: 10px; background: #120c26; touch-action: none; user-select: none; }
.grille-peintre div { aspect-ratio: 1; border-radius: 3px; }
#toile div { cursor: crosshair; }
.modele-peintre { opacity: .95; }
.palette-peintre { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 6px; }
.pot { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff3; cursor: pointer; font-size: 20px; }
.pot.choisi { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 12px #fff8; }

/* ===== 🚀 Astéroïdes : les boutons pour téléphone ===== */
.manette-tactile { display: flex; gap: 10px; justify-content: center; margin: 10px 0; touch-action: none; user-select: none; }
.manette-tactile .bouton { min-width: 64px; font-size: 22px; padding: 12px 0; }
@media (hover: hover) and (pointer: fine) { .manette-tactile { opacity: .6; } }

/* ===== 🧩 Sudoku ===== */
.grille-sudoku { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; max-width: 340px; margin: 0 auto; padding: 4px; background: #b44cff; border-radius: 10px; }
.case-sudoku { aspect-ratio: 1; border: none; border-radius: 4px; background: #241b45; color: #5ee7ff; font: 800 24px sans-serif; cursor: pointer; padding: 0; }
.case-sudoku.donnee { background: #1a1333; color: #fff; cursor: default; }
.case-sudoku.choisie { background: #4a2d8a; box-shadow: inset 0 0 0 3px #ffd23f; }
.case-sudoku.faux { background: #ff4b5c; }
.case-sudoku.bord-d { margin-right: 3px; }
.case-sudoku.bord-b { margin-bottom: 3px; }
.chiffres-sudoku { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.chiffre-sudoku { min-width: 48px; font-size: 22px; }

/* ===== 🎳 La feuille de score du bowling ===== */
.feuille-bowling { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 520px; margin: 10px auto; }
.case-feuille { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; border-radius: 6px; background: #1a1333; border: 1px solid #ffffff22; min-height: 58px; }
.case-feuille small { color: var(--gris); font-size: 10px; }
.case-feuille .marques { font: 800 13px monospace; color: #5ee7ff; min-height: 18px; white-space: nowrap; }
.case-feuille strong { font-size: 14px; }
.case-feuille.en-cours { border-color: #ffd23f; box-shadow: 0 0 8px rgba(255, 210, 63, .5); }

/* ===== 🎨 Remplis la couleur ===== */
.grille-inonde { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; max-width: 360px; margin: 0 auto; border-radius: 10px; overflow: hidden; border: 3px solid #ffffff33; }
.grille-inonde div { aspect-ratio: 1; transition: background .25s; }
.couleurs-inonde { display: flex; gap: 10px; justify-content: center; margin: 14px 0 6px; flex-wrap: wrap; }
.pot-couleur { width: 50px; height: 50px; border-radius: 50%; border: 3px solid #fff8; cursor: pointer; }
.pot-couleur:hover { transform: scale(1.12); }
/* 🔦 les flèches à l'écran du labyrinthe */
.manette-tactile.croix .bouton { min-width: 56px; }
.plateau-puzzle-photo { display: grid; grid-template-columns: repeat(var(--taille, 4), 1fr); gap: 3px; width: min(360px, 92vw); aspect-ratio: 1; margin: 0 auto; }
.case-puzzle-photo { border: none; border-radius: 4px; cursor: pointer; background-color: #1a0b40; background-repeat: no-repeat; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.case-puzzle-photo.bien { box-shadow: inset 0 0 0 3px #3ddc84; }
.case-puzzle-photo.trou { background-image: none !important; background: rgba(0,0,0,.5); box-shadow: none; cursor: default; }