/* =====================================================================
   styles.css — Thème clair et moderne pour Enigmaria
   ===================================================================== */

:root {
  --accent:   #5b5ef0;   /* indigo */
  --accent-2: #7c5cff;   /* violet */
  --teal:     #14b8a6;
  --danger:   #ef4444;
  --bg:       #f5f6fb;
  --bg-2:     #ffffff;
  --texte:    #1f2540;
  --texte-doux:#5a6178;
  --bord:     #e6e8f2;
  --carte:    #ffffff;
  --ombre:    0 10px 30px rgba(40, 50, 90, 0.08);
  --ombre-fort:0 16px 44px rgba(40, 50, 90, 0.14);
  --radius:   18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Inter", -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--texte);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
}

/* Décor doux en fond (taches de couleur très légères) */
.fond-deco {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(640px 420px at 88% -8%, rgba(124, 92, 255, 0.10), transparent 60%),
    radial-gradient(560px 420px at -6% 8%, rgba(20, 184, 166, 0.10), transparent 60%),
    radial-gradient(620px 480px at 50% 118%, rgba(91, 94, 240, 0.08), transparent 60%);
}

.conteneur { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 26px 20px 64px; }

.ecran { display: none; animation: apparait 0.4s ease; }
.ecran.actif { display: block; }
@keyframes apparait { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

h1, h2, h3, .titre-jeu, .section-titre, .marque { font-family: "Poppins", sans-serif; }

/* ===================== BOUTONS ===================== */
.btn {
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px;
  border: none; border-radius: 12px; padding: 12px 20px; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.2s, filter 0.2s; color: #fff;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.large { width: 100%; padding: 14px; font-size: 16px; }
.btn.petit { padding: 9px 15px; font-size: 14px; }
.btn.tres-petit { padding: 7px 12px; font-size: 13px; border-radius: 10px; }

.btn-principal { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 16px rgba(91, 94, 240, 0.30); }
.btn-principal:hover { filter: brightness(1.06); box-shadow: 0 10px 24px rgba(91, 94, 240, 0.40); }
.btn-secondaire { background: linear-gradient(135deg, var(--teal), #0ea5a0); box-shadow: 0 6px 16px rgba(20, 184, 166, 0.28); }
.btn-danger { background: linear-gradient(135deg, #f87171, var(--danger)); box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25); }
.btn-fantome { background: #eef0f7; color: var(--texte); }
.btn-fantome:hover { background: #e3e6f2; }

.lien-discret {
  background: none; border: none; color: var(--texte-doux); cursor: pointer;
  font-family: "Inter", sans-serif; font-size: 14px; margin: 14px 0; padding: 4px 0; text-decoration: underline;
}
.lien-discret:hover { color: var(--accent); }

/* ===================== ACCUEIL ===================== */
.carte-accueil {
  max-width: 540px; margin: 4vh auto 0; padding: 38px 34px; text-align: center;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 24px; box-shadow: var(--ombre-fort);
}

/* --- Vitrine (page de présentation / connexion) --- */
.vitrine { max-width: 920px; margin: 2vh auto 0; }
.vitrine-hero { text-align: center; background: linear-gradient(160deg, #eef2ff, #f7f0ff); border: 1px solid var(--bord); border-radius: 26px; padding: 36px 26px; box-shadow: var(--ombre); }
.vitrine-logo .logo-svg { width: 84px; height: 84px; }
.vitrine-titre { font-size: clamp(40px, 9vw, 60px); font-weight: 800; margin: 6px 0 2px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vitrine-accroche { font-size: clamp(17px, 3.5vw, 22px); font-weight: 700; color: var(--texte); margin: 6px auto; max-width: 640px; }
.vitrine-texte { color: var(--texte-doux); font-size: 16px; max-width: 620px; margin: 10px auto 22px; line-height: 1.55; }
.vitrine-soustitre { text-align: center; font-size: 22px; font-weight: 800; margin: 34px 0 14px; }
.vitrine-jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.vitrine-jeu { background: var(--carte); border: 1px solid var(--bord); border-radius: 18px; padding: 18px 16px; text-align: center; box-shadow: var(--ombre); transition: transform .12s; }
.vitrine-jeu:hover { transform: translateY(-3px); }
.vitrine-jeu-ic { font-size: 38px; line-height: 1; }
.vitrine-jeu-nom { font-weight: 800; margin: 8px 0 4px; font-size: 16px; }
.vitrine-jeu-desc { color: var(--texte-doux); font-size: 13.5px; line-height: 1.4; }
.vitrine-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.vitrine-invite { text-align: center; font-size: 18px; font-weight: 700; color: var(--accent); margin: 30px auto 6px; }
.vitrine-mail-accroche { text-align: center; font-size: 16px; font-weight: 700; color: var(--accent-2); margin: 14px auto 0; }
.logo-jeu { font-size: 64px; line-height: 1; }

/* Champs d'inscription (email + consentements) */
.auth-inscription { margin-top: 4px; }
.auth-optionnel { font-size: 13px; color: var(--texte-doux); background: #f1f3fb; border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px; margin: 4px 0 10px; line-height: 1.45; }
.auth-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--texte); cursor: pointer; text-align: left; }
.auth-check input[type="checkbox"] { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.logo-jeu .logo-svg { width: 92px; height: 92px; display: block; margin: 0 auto; }
.marque-logo { display: inline-flex; vertical-align: middle; }
.marque-logo .logo-svg { width: 30px; height: 30px; }
.titre-jeu {
  font-size: 44px; font-weight: 800; margin-top: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sous-titre { color: var(--texte-doux); font-size: 17px; margin-top: 8px; }
.form-accueil { margin-top: 24px; text-align: left; }
.champ-label { display: block; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14px; color: var(--texte); margin: 18px 0 8px; }
.champ-texte {
  width: 100%; padding: 13px 16px; font-size: 16px; font-family: "Inter", sans-serif;
  background: #fff; border: 1.5px solid var(--bord); border-radius: 12px; color: var(--texte);
}
.champ-texte:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 94, 240, 0.15); }
.champ-texte::placeholder { color: #aab0c4; }
.grille-avatars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar-choix { font-size: 30px; padding: 10px 0; background: #f5f6fb; border: 2px solid transparent; border-radius: 14px; cursor: pointer; transition: 0.15s; }
.avatar-choix:hover { background: #eef0f7; transform: scale(1.06); }
.avatar-choix.selectionne { border-color: var(--accent); background: rgba(91, 94, 240, 0.1); }
.note-petite { font-size: 13px; color: var(--texte-doux); margin-top: 12px; }
.accueil-liens { text-align: center; margin-top: 8px; }

/* ===================== TOPBAR ===================== */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.marque { font-size: 22px; font-weight: 800; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pieces-chip {
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; color: #8a5a00;
  background: linear-gradient(135deg, #ffe7a8, #ffd267); padding: 9px 16px; border-radius: 20px;
  border: 1px solid #f5c84e;
}
.pieces-chip.grand { font-size: 17px; padding: 11px 20px; }

/* ===================== CARTE AVATAR ===================== */
.carte-avatar {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--radius);
  padding: 26px 30px; box-shadow: var(--ombre);
}
.avatar-grand {
  font-size: 70px; line-height: 1; flex-shrink: 0;
  width: 116px; height: 116px; display: flex; align-items: center; justify-content: center;
  background: #f5f6fb; border-radius: 50%; border: 2px solid var(--bord);
}
.avatar-infos { flex: 1; min-width: 240px; }
.avatar-nom { font-family: "Poppins", sans-serif; font-size: 28px; font-weight: 700; }
.avatar-titre { color: var(--accent-2); font-size: 16px; margin-top: 2px; font-weight: 600; }
.avatar-etoiles { color: #f59e0b; font-size: 20px; letter-spacing: 3px; margin-top: 4px; text-shadow: 0 1px 1px rgba(0,0,0,.1); }
.apercu-etoiles { color: #f59e0b; letter-spacing: 1px; }
/* Fonds décoratifs derrière l'avatar (et aperçu boutique) */
.fond-ciel { background: linear-gradient(160deg, #a1c4fd, #c2e9fb) !important; }
.fond-sunset { background: linear-gradient(160deg, #ff9a9e, #fad0c4 55%, #fbc2eb) !important; }
.fond-foret { background: linear-gradient(160deg, #43e97b, #38f9d7) !important; }
.fond-ocean { background: linear-gradient(160deg, #2193b0, #6dd5ed) !important; }
.fond-or { background: linear-gradient(160deg, #f6d365, #fda085) !important; }
.fond-galaxie { background: linear-gradient(160deg, #7028e4, #0f0c29 60%, #302b63) !important; }
.xp-wrap { margin-top: 14px; }
.xp-ligne { font-size: 15px; margin-bottom: 6px; }
.xp-chiffre { color: var(--texte-doux); float: right; }
.barre { height: 14px; background: #eceef6; border-radius: 10px; overflow: hidden; }
.barre.petite { height: 8px; }
.barre-remplie { height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.6s ease; }
.stats-ligne { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.stat-box { flex: 1; min-width: 90px; text-align: center; padding: 12px 8px; background: #f7f8fc; border: 1px solid var(--bord); border-radius: 14px; }
.stat-icone { font-size: 20px; }
.stat-valeur { font-family: "Poppins", sans-serif; font-size: 22px; font-weight: 700; }
.stat-label { font-size: 12px; color: var(--texte-doux); margin-top: 2px; }

.section-titre { font-size: 22px; margin: 34px 0 16px; }

/* ===================== SALLES ===================== */
.grille-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.carte-categorie {
  position: relative; padding: 22px; border-radius: var(--radius); cursor: pointer; overflow: hidden;
  background: var(--carte); border: 1px solid var(--bord); border-top: 4px solid var(--couleur);
  transition: transform 0.15s, box-shadow 0.2s;
}
.carte-categorie:hover { transform: translateY(-4px); box-shadow: var(--ombre-fort); }
.cat-icone { font-size: 38px; }
.cat-nom { font-size: 19px; margin: 8px 0 6px; }
.cat-desc { font-size: 14px; color: var(--texte-doux); min-height: 40px; }
.cat-niveaux { font-size: 13px; color: var(--couleur); font-weight: 600; margin: 6px 0; }
.cat-prog { font-size: 12px; color: var(--texte-doux); margin-top: 6px; text-align: right; }

.modes-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.mode-box { position: relative; padding: 18px; border-radius: 16px; background: var(--carte); border: 1px solid var(--bord); }
.mode-box.actif { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(91, 94, 240, 0.12); }
.mode-box.bientot { opacity: 0.6; }
.mode-icone { font-size: 28px; }
.mode-nom { font-size: 17px; margin: 6px 0 4px; }
.mode-desc { font-size: 14px; color: var(--texte-doux); }
.badge-bientot { position: absolute; top: 12px; right: 12px; font-family: "Poppins", sans-serif; font-size: 10px; padding: 3px 8px; border-radius: 20px; background: #eef0f7; color: var(--texte-doux); }

/* ===================== ÉCRAN SALLE / NIVEAUX ===================== */
.barre-haut { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.cat-banniere { display: flex; align-items: center; gap: 20px; padding: 24px 28px; background: var(--carte); border: 1px solid var(--bord); border-left: 5px solid var(--couleur); border-radius: var(--radius); margin-bottom: 24px; }
.cat-banniere-icone { font-size: 52px; }
.cat-banniere-titre { font-size: 28px; }
.cat-banniere-desc { color: var(--texte-doux); font-size: 15px; margin-top: 4px; }
.liste-niveaux { display: flex; flex-direction: column; gap: 12px; }

/* Sudoku : paliers repliables */
.sudoku-paliers { display: flex; flex-direction: column; gap: 12px; }
.palier { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; box-shadow: var(--ombre); overflow: hidden; }
.palier-tete { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; font-weight: 800; font-size: 17px; }
.palier-tete::-webkit-details-marker { display: none; }
.palier-tete::after { content: "▾"; color: var(--texte-doux); transition: transform .2s; }
.palier[open] .palier-tete::after { transform: rotate(180deg); }
.palier.verrouille .palier-tete { color: var(--texte-doux); }
.palier-compte { font-size: 13px; font-weight: 600; color: var(--texte-doux); background: #eef0fb; border-radius: 999px; padding: 3px 10px; }
.palier .liste-niveaux { padding: 0 16px 16px; }
.palier-verrou { padding: 4px 20px 18px; color: var(--texte-doux); font-size: 14px; }
.carte-niveau { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; }
.carte-niveau.verrouille { opacity: 0.6; }
.niveau-gauche { display: flex; align-items: center; gap: 16px; }
.niveau-num { width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 700; background: var(--couleur); color: #fff; border-radius: 12px; }
.niveau-nom { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 17px; }
.niveau-meta { font-size: 14px; color: var(--texte-doux); margin-top: 2px; }
.niveau-verrou { font-size: 13px; color: var(--texte-doux); font-style: italic; }

/* ===================== JEU / QUIZ ===================== */
.jeu-titre { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 19px; }
.zone-quiz, .zone-sudoku { max-width: 680px; margin: 0 auto; background: var(--carte); border: 1px solid var(--bord); border-radius: 20px; padding: 30px; box-shadow: var(--ombre); }
.quiz-progress { font-family: "Poppins", sans-serif; font-size: 13px; color: var(--accent); text-align: center; font-weight: 600; }
.quiz-question { font-size: 22px; line-height: 1.4; margin: 16px 0 22px; text-align: center; font-weight: 600; }
.quiz-choix { display: flex; flex-direction: column; gap: 12px; }
.quiz-choix-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; justify-items: center; }
.btn-choix { font-family: "Inter", sans-serif; font-size: 17px; text-align: left; padding: 15px 20px; border-radius: 12px; cursor: pointer; color: var(--texte); background: #f7f8fc; border: 1.5px solid var(--bord); transition: 0.15s; }
.btn-choix:hover { background: #eef0f7; border-color: var(--accent); }
.btn-choix.case-choix { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 70px; }
.btn-choix.bon { background: #dcfce7; border-color: #22c55e; color: #166534; }
.btn-choix.mauvais { background: #fee2e2; border-color: var(--danger); color: #991b1b; }
.quiz-feedback { margin-top: 22px; text-align: center; }
.feedback-bulle { padding: 14px 18px; border-radius: 12px; font-size: 16px; margin-bottom: 16px; line-height: 1.5; }
.feedback-bulle.ok { background: #dcfce7; border: 1px solid #22c55e; }
.feedback-bulle.ko { background: #eef0fb; border: 1px solid var(--accent); }

/* Dominos (SVG avec points) */
.suite-dominos { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 8px 0 18px; }
.domino-wrap { display: inline-flex; }
.domino-svg { width: 44px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12)); }
.domino-mystere { width: 44px; height: 84px; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: var(--accent); border: 2px dashed var(--accent); border-radius: 8px; }
.btn-choix.case-choix .domino-svg { width: 40px; }

/* Cubes (construction + 3 vues) */
.cubes-media { text-align: center; margin: 8px 0 18px; }
.cube-svg { width: min(78%, 280px); height: auto; }
.vues-bloc { display: flex; gap: 18px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.vue { text-align: center; }
.vue-titre { font-size: 12px; color: var(--texte-doux); margin-bottom: 4px; font-weight: 600; }
.vue-svg { width: 64px; height: auto; }

/* Trouve l'intrus (images) */
.intrus-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; justify-items: center; }
.btn-choix.carte-image { padding: 8px; width: 100%; display: flex; align-items: center; justify-content: center; }
.img-svg { width: 100%; max-width: 130px; height: auto; }

.btn-choix.choisi { background: #eef0fb; border-color: var(--accent); }

/* Illustration de salle (affichée sur chaque question) */
.illus { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 8px 18px; border-radius: 14px;
  background: linear-gradient(0deg, rgba(255,255,255,0.80), rgba(255,255,255,0.80)), var(--couleur, #6366f1);
  border: 1px solid rgba(0,0,0,0.05); }
.illus-emoji { font-size: 38px; line-height: 1; }
.illus-deco .deco-svg { width: 52px; height: 52px; display: block; }

/* Suites en tuiles imagées */
.serie { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 8px 0 18px; }
.serie-tile { min-width: 46px; height: 54px; padding: 0 10px; display: flex; align-items: center; justify-content: center;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 22px; color: #1f2540;
  background: #fff; border: 2px solid #c7cde0; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.08); }
.serie-tile.mystere { color: var(--accent); border-style: dashed; border-color: var(--accent); }

/* ===================== CHÂTEAU (mode Aventure) ===================== */
.chateau-entree { text-align: center; background: linear-gradient(180deg, #eaf2ff, #f6f8ff); border: 1px solid var(--bord); border-radius: var(--radius); padding: 20px; }
.chateau-entree .chateau-svg { width: min(80%, 320px); height: auto; }
.chateau-entree .btn { margin-top: 10px; }
.chateau-header { text-align: center; margin-bottom: 6px; }
.chateau-header .chateau-svg { width: min(70%, 300px); height: auto; }

.tour { display: flex; flex-direction: column; gap: 14px; }
.etage { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 16px 18px; }
.etage.verrouille { opacity: 0.7; background: #f4f5fa; }
.etage-label { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 16px; color: var(--accent-2); margin-bottom: 12px; }
.portes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.porte { position: relative; text-align: center; padding: 18px 10px; border-radius: 14px; cursor: pointer;
  background: #fff; border: 1px solid var(--bord); border-bottom: 4px solid var(--couleur); transition: transform 0.15s, box-shadow 0.2s; }
.porte:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.porte.verrouille { cursor: default; opacity: 0.6; filter: grayscale(0.4); }
.porte.verrouille:hover { transform: none; box-shadow: none; }
.porte.finie { background: #f1fbf4; border-color: #bfe9cd; }
.porte-icone { font-size: 38px; }
.porte-nom { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14px; margin: 6px 0 4px; }
.porte-prog { font-size: 12px; color: var(--texte-doux); }
.etage-note { font-size: 12px; color: var(--texte-doux); font-style: italic; margin-top: 10px; }

@media (max-width: 560px) {
  .portes { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .porte { padding: 12px 4px; }
  .porte-icone { font-size: 28px; }
  .porte-nom { font-size: 12px; }
}

/* Matrices */
.matrice-grille { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; justify-content: center; margin: 8px 0 18px; }
.matrice-case { height: 64px; display: flex; align-items: center; justify-content: center; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 24px; background: #f1f3fb; border: 1.5px solid var(--bord); border-radius: 10px; }
.matrice-case.mystere { color: var(--accent); border: 2px dashed var(--accent); background: #fff; }


/* ===================== SUDOKU ===================== */
.sudoku-wrap { text-align: center; }
.sudoku-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 0; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; background: #2c3350; padding: 3px; border-radius: 8px; box-sizing: border-box; }
.sudoku-grid:focus { outline: none; }
.sudoku-grid.mode-notes { box-shadow: 0 0 0 3px #f59e0b; }
.sudoku-cell { position: relative; font-family: "Poppins", sans-serif; font-size: clamp(16px, 5vw, 26px); font-weight: 600; text-align: center; border: 1px solid #cdd3e6; background: #fff; color: var(--texte); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background 0.12s; }
.sudoku-cell.fixe { background: #eef0f7; font-weight: 800; cursor: default; }
.sudoku-cell.peer { background: #f1f5ff; }
.sudoku-cell.meme { background: #dbe6ff; }
.sudoku-cell.sel { background: #cfe0ff; box-shadow: inset 0 0 0 2px var(--accent); }
.sudoku-cell.erreur { background: #fee2e2; color: #991b1b; }
.sudoku-cell.ok { background: #dcfce7; color: #166534; }
.sudoku-cell.revele { background: #ede9fe; color: var(--accent-2); }
.sud-val { line-height: 1; color: var(--accent); font-weight: 700; }
.sudoku-cell.ok .sud-val { color: #166534; }
.sudoku-cell.revele .sud-val { color: var(--accent-2); }
.sud-notes { display: grid; grid-template-columns: repeat(var(--b), 1fr); width: 100%; height: 100%; padding: 1px; box-sizing: border-box; }
.sud-note { font-size: clamp(7px, 1.9vw, 11px); font-weight: 600; color: #64748b; display: flex; align-items: center; justify-content: center; line-height: 1; }
.sudoku-options-bar { display: flex; justify-content: center; margin-top: 16px; }
.sudoku-options.actif { background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(245, 130, 30, .35); }
.sudoku-pad { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.sudoku-pad-btn { width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid var(--bord); background: #fff; font-size: 22px; font-weight: 700; color: var(--texte); cursor: pointer; transition: transform .08s, background .15s; }
.sudoku-pad-btn:hover { background: #eef2ff; }
.sudoku-pad-btn:active { transform: scale(.92); }
.sudoku-pad-btn.effacer { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.sudoku-cell.bloc-gauche { border-left: 3px solid #2c3350; }
.sudoku-cell.bloc-haut { border-top: 3px solid #2c3350; }
.sudoku-cell.bord-droit { border-right: 3px solid #2c3350; }
.sudoku-cell.bord-bas { border-bottom: 3px solid #2c3350; }
.sudoku-actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.sudoku-msg { margin-top: 16px; font-size: 17px; min-height: 24px; }
.sudoku-msg.succes { color: #16a34a; font-weight: 700; }
.sudoku-msg.erreur { color: var(--danger); }
.sudoku-msg.info { color: var(--texte-doux); }

/* ===================== VICTOIRE ===================== */
.carte-victoire { max-width: 540px; margin: 4vh auto 0; text-align: center; padding: 40px 34px; background: var(--carte); border: 1px solid var(--bord); border-radius: 24px; box-shadow: var(--ombre-fort); }
.victoire-icone { font-size: 72px; animation: rebond 0.9s ease; }
@keyframes rebond { 0% { transform: scale(0.4); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.victoire-titre { font-size: 34px; margin-top: 8px; }
.victoire-sous { color: var(--texte-doux); font-size: 16px; margin-top: 6px; }
.victoire-stats { display: flex; gap: 12px; margin: 24px 0; }
.victoire-actions { display: flex; flex-direction: column; gap: 12px; }

/* ===================== BOUTIQUE ===================== */
.boutique-titre { font-size: 30px; margin-bottom: 16px; }
.boutique-apercu { display: flex; align-items: center; gap: 20px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--ombre); }
.apercu-txt { font-size: 16px; color: var(--texte-doux); }
.apercu-txt b { color: var(--texte); font-size: 18px; }
.auras-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.aura-box { text-align: center; padding: 18px 12px; background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; }
.aura-box.equipee { border-color: var(--accent); }
.aura-rond { font-size: 40px; width: 76px; height: 76px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; background: #f5f6fb; border-radius: 50%; }
.aura-nom { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.aura-etat { font-size: 13px; color: var(--texte-doux); }
.aura-etat.actuel { color: #16a34a; font-weight: 700; }
.aura-etat.verrou { color: var(--texte-doux); }
.grille-boutique { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.avatar-shop { position: relative; text-align: center; padding: 18px 12px; background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; }
.avatar-shop.legendaire { border: 2px solid #f59e0b; background: linear-gradient(160deg, #fffdf5, #fff7e6); box-shadow: 0 6px 18px rgba(245, 158, 11, .28); }
.avatar-shop-leg { font-size: 11px; font-weight: 800; color: #b45309; letter-spacing: .5px; margin-bottom: 4px; }
.avatar-shop.equipe { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(91,94,240,0.12); }
.avatar-shop-emoji { font-size: 44px; }
.avatar-shop-nom { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 14px; margin: 8px 0 10px; }
.avatar-shop-etat.actuel { color: #16a34a; font-weight: 700; font-size: 13px; }

/* ===================== AURAS (effet visuel sur l'avatar) ===================== */
.aura-bronze { box-shadow: 0 0 0 4px #cd7f32, 0 0 22px rgba(205, 127, 50, 0.55) !important; }
.aura-argent { box-shadow: 0 0 0 4px #c0c4cf, 0 0 24px rgba(180, 188, 204, 0.7) !important; }
.aura-or { box-shadow: 0 0 0 4px #f5c84e, 0 0 28px rgba(245, 200, 78, 0.8) !important; }
.aura-mystique { box-shadow: 0 0 0 4px #a855f7, 0 0 30px rgba(168, 85, 247, 0.85) !important; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px #a855f7, 0 0 22px rgba(168,85,247,0.6); } 50% { box-shadow: 0 0 0 4px #c084fc, 0 0 38px rgba(168,85,247,0.95); } }

/* ===================== ADMIN ===================== */
.carte-admin-login { max-width: 420px; margin: 6vh auto 0; text-align: center; padding: 36px 30px; background: var(--carte); border: 1px solid var(--bord); border-radius: 22px; box-shadow: var(--ombre-fort); }
.carte-admin-login .champ-texte, .carte-admin-login .btn { margin-top: 14px; }
.admin-cadenas { font-size: 54px; }
.admin-titre { font-size: 26px; margin-top: 6px; }
.admin-sous { color: var(--texte-doux); font-size: 15px; margin-top: 6px; }
.admin-erreur { color: var(--danger); font-size: 14px; min-height: 20px; margin-top: 8px; }
.admin-entete { margin-bottom: 18px; }
.admin-salle { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.admin-salle-titre { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 17px; list-style: none; }
.admin-salle-titre::-webkit-details-marker { display: none; }
.admin-salle-titre.salle-masquee { opacity: 0.55; text-decoration: line-through; }
.admin-liste { padding: 6px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.admin-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #f7f8fc; border: 1px solid var(--bord); border-radius: 10px; }
.admin-ligne.supprime { opacity: 0.55; background: #fdecec; }
.admin-ligne.supprime .admin-ligne-txt { text-decoration: line-through; }
.admin-ligne-txt { font-size: 14px; flex: 1; }

/* ===================== NARRATEUR (l'Oracle) ===================== */
.narrateur { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 18px;
  background: linear-gradient(135deg, #eef0fb, #f6f2fc); border: 1px solid #e0e0f5;
  border-left: 4px solid var(--accent-2); border-radius: 16px; padding: 16px 18px; }
.narrateur-avatar { font-size: 34px; flex-shrink: 0; width: 54px; height: 54px; display: flex;
  align-items: center; justify-content: center; background: #fff; border-radius: 50%;
  box-shadow: var(--ombre); }
.narrateur-bulle { font-size: 15.5px; line-height: 1.5; color: var(--texte); font-style: italic; }
.narrateur-nom { display: block; font-family: "Poppins", sans-serif; font-weight: 700; font-style: normal;
  color: var(--accent-2); margin-bottom: 2px; }

.carte-niveau.recommande { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(91, 94, 240, 0.18); }
.badge-reco { display: inline-block; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 600;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 2px 8px; border-radius: 20px; vertical-align: middle; }
.badge-best { display: inline-block; font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 700;
  color: #8a5a00; background: #ffe9b0; border: 1px solid #f5c84e; padding: 1px 8px; border-radius: 20px; vertical-align: middle; }

/* ===================== AUTH (connexion) ===================== */
.auth-onglets { display: flex; gap: 8px; margin-top: 22px; background: #f1f3fb; padding: 5px; border-radius: 14px; }
.auth-onglet { flex: 1; padding: 11px; border: none; background: transparent; border-radius: 10px; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px; color: var(--texte-doux); transition: 0.15s; }
.auth-onglet.actif { background: #fff; color: var(--accent); box-shadow: var(--ombre); }

/* ===================== TOAST / PIED ===================== */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 60px); background: var(--texte); color: #fff; font-family: "Poppins", sans-serif; font-weight: 600; padding: 13px 22px; border-radius: 14px; box-shadow: var(--ombre-fort); opacity: 0; transition: 0.4s; z-index: 50; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.pied { position: relative; z-index: 1; text-align: center; color: #9aa0b4; font-size: 13px; padding: 20px; }

/* ===================== JEUX DYNAMIQUES ===================== */
.bouton-jeux { margin: 6px 0 4px; }
.defis-barre { display: flex; gap: 12px; flex-wrap: wrap; }
.defis-barre .btn { flex: 1 1 220px; }
.jeux-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.jeu-carte { text-align: center; padding: 20px 12px; border-radius: 16px; cursor: pointer; background: var(--carte);
  border: 1px solid var(--bord); border-top: 4px solid var(--couleur); transition: transform 0.15s, box-shadow 0.2s; }
.jeu-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-fort); }
.jeu-emoji { font-size: 40px; }
.jeu-nom { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 16px; margin: 6px 0 4px; }
.jeu-desc { font-size: 13px; color: var(--texte-doux); }

.jeu-zone { max-width: 680px; margin: 0 auto; background: var(--carte); border: 1px solid var(--bord); border-radius: 20px; padding: 26px; box-shadow: var(--ombre); text-align: center; }
.jeu-titre-grand { font-size: 26px; }
.jeu-soustitre { color: var(--texte-doux); font-size: 15px; margin: 6px 0 18px; }

/* --- Jeu de cordes (Flow) --- */
.flow-head { display: flex; gap: 10px; justify-content: center; margin: 6px 0 14px; flex-wrap: wrap; }
.flow-chip { background: #eef0fb; border-radius: 999px; padding: 6px 16px; font-weight: 700; color: #3a3f63; font-size: 15px; }
.flow-chip.temps { background: #fff4e0; color: #9a5b00; }
.flow-wrap { display: flex; justify-content: center; }
.flow-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(92vw, 460px); aspect-ratio: 1; background: #cbd2e0; border: 3px solid #2f3550; border-radius: 14px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.flow-cell { position: relative; background: #fbfcff; border: 1px solid #e6eaf3; cursor: pointer; }
/* Corde dessinée en lignes (centre + bras) reliant les pastilles */
.flow-seg { position: absolute; display: none; }
.flow-seg.c { top: 32%; left: 32%; width: 36%; height: 36%; border-radius: 30%; }
.flow-seg.u { left: 32%; width: 36%; top: 0; height: 50%; }
.flow-seg.d { left: 32%; width: 36%; top: 50%; height: 50%; }
.flow-seg.l { top: 32%; height: 36%; left: 0; width: 50%; }
.flow-seg.r { top: 32%; height: 36%; left: 50%; width: 50%; }
.flow-dot { position: absolute; top: 18%; left: 18%; width: 64%; height: 64%; border-radius: 50%; display: none; z-index: 2; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6), 0 1px 3px rgba(0, 0, 0, .25); }
.flow-actions { display: flex; justify-content: center; margin-top: 16px; }
.flow-note { text-align: center; color: #b45309; font-size: 14px; margin-top: 10px; min-height: 18px; font-weight: 600; }
.jeu-fin { text-align: center; padding: 14px; }
.jeu-fin-emoji { font-size: 64px; }
.jeu-fin h2 { font-size: 26px; margin: 6px 0; }
.jeu-fin-xp { color: var(--accent); font-weight: 700; font-family: "Poppins", sans-serif; }
.jeu-fin-bonus { margin-top: 10px; color: #16a34a; font-weight: 700; }
.jeu-fin-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* Calcul Express */
.ce-head { display: flex; justify-content: center; gap: 20px; margin-bottom: 14px; }
.ce-timer, .ce-score { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px; padding: 8px 16px; border-radius: 12px; background: #f1f3fb; }
.ce-op { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 44px; margin: 10px 0 16px; }
.ce-input { width: 180px; text-align: center; font-size: 30px; font-family: "Poppins", sans-serif; padding: 10px; border: 2px solid var(--bord); border-radius: 14px; }
.ce-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,94,240,0.15); }
.ce-feedback { min-height: 22px; margin-top: 10px; font-weight: 600; }
.ce-feedback.ok { color: #16a34a; }

/* Pyramides : chaque case = somme des deux du dessous */
.pyr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px auto; }
.pyr-row { display: flex; gap: 6px; justify-content: center; }
.pyr-case { width: clamp(40px, 11vw, 58px); height: clamp(40px, 11vw, 58px); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(15px, 4vw, 20px); box-sizing: border-box; }
.pyr-case.fixe { background: #fde9c8; border: 2px solid #f0b860; color: #92500a; }
.pyr-input { background: #fff; border: 2px solid var(--bord); color: var(--accent); text-align: center; outline: none; }
.pyr-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 94, 240, 0.15); }
.pyr-input.err { border-color: var(--danger); background: #fee2e2; color: #991b1b; }

/* Tables de multiplication : pile de 3 opérations (les 2 du haut descendent) */
.mult-pile { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 16px auto 8px; }
.mult-ligne { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: "Poppins", sans-serif; font-weight: 800; line-height: 1.1; min-height: 1.2em; }
.mult-ligne.preview { color: #aab1c6; }
.mult-pile .preview:nth-child(1) { font-size: clamp(18px, 4.5vw, 24px); opacity: 0.5; transform: scale(0.9); }
.mult-pile .preview:nth-child(2) { font-size: clamp(22px, 5.5vw, 30px); opacity: 0.85; transform: scale(0.96); }
.mult-ligne.active { font-size: clamp(30px, 8vw, 46px); color: var(--texte); margin-top: 6px; }
.mult-op { letter-spacing: 1px; }
.mult-input { width: 120px; text-align: center; font-size: clamp(26px, 7vw, 40px); font-family: "Poppins", sans-serif; font-weight: 800; padding: 4px 8px; border: 2.5px solid var(--accent); border-radius: 14px; outline: none; }
.mult-input:focus { box-shadow: 0 0 0 3px rgba(91, 94, 240, 0.15); }
@keyframes multDescend { from { transform: translateY(-33.333%); opacity: 0.65; } to { transform: translateY(0); opacity: 1; } }
.mult-pile.descend { animation: multDescend 0.18s ease-out; }

/* Tour de Hanoï */
.hanoi-moves { font-size: 15px; color: var(--texte-doux); margin-bottom: 12px; }
.hanoi-plateau { display: flex; gap: 12px; justify-content: center; align-items: flex-end; }
.hanoi-pic { position: relative; flex: 1; max-width: 200px; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 8px; border-radius: 12px; cursor: pointer; }
.hanoi-pic::before { content: ""; position: absolute; bottom: 18px; width: 8px; top: 16px; background: #cbd5e1; border-radius: 4px; }
.hanoi-pic.sel { background: #eef0fb; box-shadow: inset 0 0 0 2px var(--accent); }
.hanoi-stack { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; z-index: 1; }
.hanoi-disk { height: 20px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.18); }
.hanoi-base { width: 96%; height: 12px; background: #94a3b8; border-radius: 5px; margin-top: 4px; }

/* Mastermind */
/* --- Mes records --- */
.rec-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 14px; }
.rec-jeu { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 14px 16px; box-shadow: var(--ombre); }
.rec-jeu-tete { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.rec-lib { font-size: 12px; font-weight: 600; color: var(--texte-doux); background: #eef0fb; border-radius: 999px; padding: 2px 9px; margin-left: auto; }
.rec-liste { display: flex; flex-direction: column; }
.rec-item { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 6px 0; border-bottom: 1px dashed var(--bord); }
.rec-item:last-child { border-bottom: none; }
.rec-item b { color: var(--accent); white-space: nowrap; }
.rec-vide { text-align: center; color: var(--texte-doux); margin: 36px 0; font-size: 15px; }

/* Classement global */
.classement-moi { background: linear-gradient(135deg, #eef0fb, #f7f0ff); border: 1px solid var(--bord); border-radius: 14px; padding: 12px 16px; margin: 12px 0 16px; font-size: 15px; text-align: center; }
.classement-global { display: flex; flex-direction: column; gap: 8px; }
.cg-ligne { display: flex; align-items: center; gap: 12px; background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 12px 16px; box-shadow: var(--ombre); }
.cg-ligne.moi { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.cg-rang { width: 38px; flex-shrink: 0; font-weight: 800; font-size: 18px; text-align: center; }
.cg-avatar { font-size: 26px; }
.cg-nom { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-force { font-weight: 800; color: var(--accent); white-space: nowrap; }

.mm-secret { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 16px; }
.mm-secret-label { font-size: 13px; color: var(--texte-doux); font-weight: 700; }
.mm-secret-slot { position: relative; transition: box-shadow .3s ease; }
.mm-cache { position: absolute; inset: -2px; border-radius: 50%; background: linear-gradient(145deg, #94a3b8, #475569); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; border: 2px solid #334155; box-shadow: 0 2px 4px rgba(0,0,0,0.25); transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .55s ease; }
.mm-cache.ouvert { transform: translateY(-150%) scale(.85); opacity: 0; }
.mm-secret.gagne .mm-secret-slot { box-shadow: 0 0 0 3px #22c55e, 0 0 10px rgba(34,197,94,.6); }
.mm-histo { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; align-items: center; }
.mm-row { display: flex; align-items: center; gap: 14px; }
.mm-pions, .mm-courante { display: flex; gap: 8px; justify-content: center; }
.mm-courante { margin: 12px 0; }
.mm-slot { width: 32px; height: 32px; border-radius: 50%; background: #e5e7eb; border: 2px solid #cbd5e1; }
.mm-fb { display: grid; grid-template-columns: repeat(2, 10px); gap: 3px; }
.mm-peg { width: 10px; height: 10px; border-radius: 50%; }
.mm-peg.noir { background: #1f2540; }
.mm-peg.blanc { background: #fff; border: 1px solid #1f2540; }
.mm-palette { display: flex; gap: 10px; justify-content: center; margin: 14px 0; }
.mm-pion { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.15); cursor: pointer; }
.mm-pion:hover { transform: scale(1.1); }
.mm-pion.utilise { opacity: 0.28; cursor: default; }
.mm-pion.utilise:hover { transform: none; }
.mm-actions { display: flex; gap: 10px; justify-content: center; }

/* Mémoire */
.mem-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 280px; margin: 0 auto; }
.mem-cell { font-size: 40px; background: #f7f8fc; border: 1px solid var(--bord); border-radius: 12px; padding: 8px 0; }
.mem-compte { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 32px; color: var(--accent); margin-top: 14px; }

/* Mémoire express (chiffres / lettres) */
.memnum-suite { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px auto; max-width: 520px; }
.memnum-cell { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 30px; min-width: 46px; height: 56px; display: flex; align-items: center; justify-content: center; background: #f7f8fc; border: 2px solid var(--bord); border-radius: 12px; padding: 0 6px; }
.memnum-cell.saisie { background: #fff; border-style: dashed; color: var(--accent); }
.memnum-cell.rempli { border-style: solid; border-color: var(--accent); }
.memnum-cell.bon { background: #dcfce7; border-color: #22c55e; color: #15803d; }
.memnum-cell.mauvais { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }
.memnum-pad { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 360px; margin: 16px auto 0; }
.memnum-touche { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 20px; width: 52px; height: 52px; border: 1px solid var(--bord); border-radius: 12px; background: #fff; cursor: pointer; transition: transform .06s, background .15s; }
.memnum-touche:hover { background: #eef1fb; }
.memnum-touche:active { transform: scale(.94); }
.memnum-touche.efface { background: #fef3c7; }

/* Simon */
.simon-statut { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 20px; min-height: 26px; margin-bottom: 16px; color: var(--accent-2); }
.simon-statut.lecture { color: #d97706; }
.simon-statut.atoi { color: var(--accent); }
.simon-statut.ok { color: #16a34a; }
.simon-statut.ko { color: var(--danger); }
.simon-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: min(86vw, 420px); margin: 0 auto; }
.simon-pad { aspect-ratio: 1; border-radius: 24px; cursor: pointer; border: 5px solid rgba(0,0,0,0.18);
  filter: brightness(0.42) saturate(0.85); transition: filter 0.07s, transform 0.07s, box-shadow 0.07s; }
.simon-pad:hover { filter: brightness(0.55) saturate(0.9); }
.simon-pad.on { filter: brightness(1.35) saturate(1.45); transform: scale(1.07);
  box-shadow: 0 0 0 5px #fff, 0 0 42px 8px rgba(255,255,255,0.95); border-color: #fff; position: relative; z-index: 1; }

/* Taquin */
.taquin-coups { font-size: 15px; color: var(--texte-doux); margin-bottom: 12px; }
.taquin-grille { display: grid; gap: 6px; max-width: 320px; margin: 0 auto; aspect-ratio: 1; }
.taquin-cell { display: flex; align-items: center; justify-content: center; font-family: "Poppins", sans-serif; font-weight: 700; font-size: clamp(18px, 6vw, 30px);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-radius: 12px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.15); transition: transform 0.08s; }
.taquin-cell:hover { transform: scale(1.03); }
.taquin-cell.vide { background: transparent; box-shadow: none; cursor: default; }

/* Embouteillage (Rush Hour) */
.rush-coups { font-size: 15px; color: var(--texte-doux); margin-bottom: 12px; }
.rush-board { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto; background: #e5e7eb; border: 3px solid #94a3b8; border-right: none; border-radius: 10px; box-sizing: border-box; }
/* Bordure droite en deux segments : ouverture (porte) au niveau de la 3e ligne */
.rush-board::before, .rush-board::after { content: ""; position: absolute; right: -3px; width: 3px; background: #94a3b8; }
.rush-board::before { top: -3px; height: calc(33.333% + 3px); }   /* du coin haut jusqu'au haut de la porte */
.rush-board::after { bottom: -3px; height: calc(50% + 3px); }     /* du coin bas jusqu'au bas de la porte */
.rush-cell { position: absolute; width: 16.666%; height: 16.666%; box-sizing: border-box; border: 1px solid rgba(0,0,0,0.05); }
.rush-piece { position: absolute; box-sizing: border-box; border: 2px solid rgba(0,0,0,0.18); border-radius: 8px; padding: 3px; cursor: pointer; transition: left 0.12s, top 0.12s; }
.rush-piece.rouge { background: transparent; border: none; padding: 0; z-index: 1; }
.rush-car { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }
.rush-bloc-toit { position: absolute; background: rgba(255,255,255,0.4); border-radius: 4px; }
.rush-bloc-toit.h { left: 16%; right: 16%; top: 28%; bottom: 28%; }
.rush-bloc-toit.v { top: 16%; bottom: 16%; left: 28%; right: 28%; }
.rush-piece.sel { box-shadow: 0 0 0 3px var(--accent); z-index: 3; }

/* Yams */
.yams-dice { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.de { width: 58px; padding: 3px; border-radius: 14px; cursor: pointer; border: 3px solid transparent; transition: 0.1s; }
.de-svg { width: 100%; display: block; }
.de.tenu { border-color: var(--accent); background: #eef0fb; transform: translateY(-3px); box-shadow: 0 4px 10px rgba(91,94,240,0.3); }
.yams-controls { display: flex; justify-content: center; margin: 6px 0 10px; }
.yams-aide { font-size: 13px; color: var(--texte-doux); margin-bottom: 10px; }
.yams-grille { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; max-width: 620px; margin: 0 auto; }
.yams-section { flex: 1 1 240px; }
.yams-section-titre { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 14px; color: var(--accent-2); margin-bottom: 6px; text-align: left; }
.yams-table { display: flex; flex-direction: column; gap: 6px; }
.yams-cat.bonus { background: #fff7e6; border-color: #f5c84e; font-weight: 700; }
.de.roule { animation: deShake 0.12s linear infinite; }
@keyframes deShake { 0% { transform: rotate(-14deg) scale(1.06); } 50% { transform: rotate(14deg) scale(1.12); } 100% { transform: rotate(-14deg) scale(1.06); } }
.yams-cat { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #f7f8fc; border: 1px solid var(--bord); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.yams-cat .pts { font-family: "Poppins", sans-serif; font-weight: 700; color: var(--texte-doux); }
.yams-cat.dispo { cursor: pointer; border-color: var(--accent); }
.yams-cat.dispo:hover { background: #eef0fb; }
.yams-cat.dispo .pts { color: var(--accent); }
.yams-cat.utilise { opacity: 0.65; }
.yams-cat.utilise .pts { color: #16a34a; }
.yams-total { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 16px; margin-top: 14px; }

/* Puissance 4 */
.p4-statut { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--accent-2); min-height: 22px; margin-bottom: 12px; }
.p4-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: min(100%, 420px); margin: 0 auto; background: #2563eb; padding: 8px; border-radius: 14px; box-sizing: border-box; }
.p4-cell { aspect-ratio: 1; background: #fff; border-radius: 50%; cursor: pointer; box-shadow: inset 0 2px 4px rgba(0,0,0,0.18); position: relative; }
.p4-cell:hover { filter: brightness(0.97); }
.p4-disc { position: absolute; inset: 6%; border-radius: 50%; }
.p4-disc.rouge { background: radial-gradient(circle at 35% 30%, #ff7a7a, #ef4444); }
.p4-disc.jaune { background: radial-gradient(circle at 35% 30%, #fde68a, #facc15); }
.p4-disc.tombe { animation: p4drop 0.42s cubic-bezier(0.33, 0.66, 0.4, 1); }
@keyframes p4drop { 0% { transform: translateY(calc(var(--fall, 6) * -118%)); } 80% { transform: translateY(0); } 90% { transform: translateY(-7%); } 100% { transform: translateY(0); } }
.p4-disc.gagnant { animation: p4win 0.55s ease-in-out infinite alternate; z-index: 2; }
@keyframes p4win { from { box-shadow: 0 0 0 3px #fff, 0 0 8px 2px #f5c84e; transform: scale(1); } to { box-shadow: 0 0 0 4px #fff, 0 0 22px 7px #facc15; transform: scale(1.12); } }

/* Labyrinthe */
.laby-info { font-size: 15px; color: var(--texte-doux); margin-bottom: 10px; }
.laby-board { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; }
.laby-svg { display: block; width: 100%; height: 100%; border-radius: 8px; }
.laby-token { position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a8cf7, #5b5ef0); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,0.35);
  transition: left 0.18s linear, top 0.18s linear; }
.laby-dpad { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }
.laby-row { display: flex; gap: 8px; }
.laby-btn { width: 56px; height: 48px; font-size: 20px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 4px 10px rgba(91,94,240,0.3); }
.laby-btn:active { transform: translateY(1px); }

/* Le Compte est bon */
.compte-cible { font-family: "Poppins", sans-serif; font-size: 22px; margin: 4px 0; }
.compte-cible b { color: var(--accent); font-size: 30px; }
.compte-chrono { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--texte-doux); margin-bottom: 14px; }
.compte-zone { margin-bottom: 16px; }
.compte-label { font-size: 12px; color: var(--texte-doux); font-weight: 600; margin: 6px 0 4px; }
.compte-ligne { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 56px; }
.compte-ligne2 { border-top: 2px dashed var(--bord); padding-top: 12px; margin-top: 6px; }
.compte-vide { color: #aab0c4; font-style: italic; font-size: 14px; align-self: center; }
.compte-num.reference { cursor: default; }
.compte-num.reference:hover { transform: none; }
.compte-num { min-width: 56px; height: 56px; padding: 0 10px; display: flex; align-items: center; justify-content: center;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 24px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #0ea5e9, #0891b2); border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.15); transition: transform 0.1s; }
.compte-num:hover { transform: translateY(-2px); }
.compte-num.sel { box-shadow: 0 0 0 3px var(--accent); }
.compte-num.neuf { background: linear-gradient(135deg, #22c55e, #16a34a); }
.compte-num.used { background: #e2e8f0; color: #94a3b8; cursor: default; box-shadow: none; transform: none; }
.compte-ops { display: flex; gap: 12px; justify-content: center; margin-bottom: 12px; }
.compte-op { width: 52px; height: 52px; font-size: 26px; font-weight: 700; border: 2px solid var(--bord); background: #fff; border-radius: 12px; cursor: pointer; color: var(--accent-2); }
.compte-op:hover { background: #eef0fb; }
.compte-op.sel { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.compte-msg { min-height: 24px; font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.compte-msg.ok { color: #16a34a; }
.compte-msg.ko { color: var(--danger); }
.compte-msg.succes { color: #16a34a; font-family: "Poppins", sans-serif; font-size: 18px; }
.compte-actions { display: flex; gap: 10px; justify-content: center; }

/* Classement (meilleurs scores) */
.classement { background: #fffdf3; border: 1px solid #f1e3b0; border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; }
.classement-titre { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 16px; color: #8a5a00; }
.classement-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.classement-item { font-size: 13px; background: #fff; border: 1px solid #f1e3b0; border-radius: 8px; padding: 3px 10px; color: var(--texte-doux); }
.record-badge { display: inline-block; margin: 6px auto; background: linear-gradient(135deg, #f59e0b, #f5c84e); color: #5a3a00; font-family: "Poppins", sans-serif; font-weight: 700; padding: 6px 14px; border-radius: 20px; }

/* Défi Chrono */
.chrono-durees { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 18px auto; }
.chrono-durees .btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.chrono-best { font-size: 12px; font-weight: 600; background: rgba(255,255,255,0.25); padding: 2px 8px; border-radius: 12px; }
.chrono-head { display: flex; gap: 12px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.chrono-chip { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 18px; padding: 8px 18px; border-radius: 14px; background: #f1f3fb; }
.chrono-chip.temps { background: #fee2e2; color: #b91c1c; }
.chrono-chip.pts { background: #dcfce7; color: #166534; }

/* Défis du jour (3 imposés) */
/* Défi du jour : annonce des 3 défis + chrono flottant */
.defi-annonce { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--ombre); }
.defi-annonce-liste { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.defi-annonce-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f5f6fb; border-radius: 12px; font-size: 15px; }
.defi-annonce-item.fait { opacity: .7; }
.defi-annonce-num { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.defi-annonce .defi-ic { font-size: 20px; }
.defi-annonce-item .defi-ok { color: #16a34a; font-weight: 800; }
.defi-chrono-flottant { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #5b5ef0, #7c5cff); color: #fff; font-weight: 700; font-size: 15px; padding: 8px 16px; border-radius: 999px; box-shadow: 0 6px 18px rgba(91, 94, 240, .4); }
.defi-taches { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--ombre); }
.defi-titre { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.defi-tache { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--bord); }
.defi-tache.fait { opacity: 0.7; }
.defi-tache-info { font-size: 15px; }
.defi-ic { font-size: 20px; vertical-align: middle; }
.defi-ok { color: #16a34a; font-weight: 700; }
.defi-reward { margin-top: 10px; font-size: 14px; color: var(--accent); font-weight: 600; }

/* Calendrier */
.calendrier { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; padding: 18px; margin-bottom: 18px; }
.cal-titre { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 16px; margin-bottom: 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-jour-nom { text-align: center; font-size: 11px; color: var(--texte-doux); font-weight: 600; }
.cal-vide { }
.cal-cell { position: relative; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 8px; background: #f4f5fa; color: var(--texte); padding: 3px 1px; }
.cal-cell.partiel { background: #fef3c7; }
.cal-cell.fait { background: #dcfce7; color: #166534; }
.cal-cell.aujourd { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-num { font-size: 13px; font-weight: 600; }
.cal-mini { font-size: 9px; color: var(--texte-doux); white-space: nowrap; }
.cal-cell.fait .cal-mini { color: #166534; }
.cal-legende { margin-top: 10px; font-size: 12px; color: var(--texte-doux); }
.cal-invite { margin-top: 6px; font-size: 14px; color: var(--texte-doux); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 560px) {
  .carte-avatar { flex-direction: column; text-align: center; }
  .titre-jeu { font-size: 36px; }
  .victoire-stats { flex-direction: column; }
  .matrice-grille { grid-template-columns: repeat(3, 52px); }
  .matrice-case { height: 52px; font-size: 20px; }
  .conteneur { padding-left: 12px; padding-right: 12px; }
  .zone-quiz, .zone-sudoku, .jeu-zone { padding: 18px 14px; }
  .compte-num { min-width: 46px; height: 46px; font-size: 20px; }
  .compte-op { width: 44px; height: 44px; font-size: 22px; }
  .topbar-actions .btn { font-size: 13px; padding: 8px 12px; }
}