:root{--ink:#0f0e0c;--cream:#faf7f2;--gold:#c9a84c;--gold2:#e8c96a;--rose:#e8675a;--sage:#7a9e87;--lav:#9b8ec4;
  --bg:#faf7f2;--surface:#ffffff;--text:#0f0e0c;--text-rgb:15,14,12;
  --border:rgba(var(--text-rgb),0.1);--shadow:0 4px 24px rgba(var(--text-rgb),0.08);
  /* ── Identité KnowMe officielle (Marvens, 2026-08-10) : VIOLET + BLANC.
     Dégradé prélevé précisément sur le fond violet que tu as envoyé et
     confirmé ("c'est le fond violet à utiliser") : indigo profond en haut
     à gauche → magenta vif en haut à droite. Utilisé pour les headers et
     dégradés de boutons — pas la texture étoilée/glassmorphism de
     l'image, qui resterait trop "fond spatial sombre" pour la carte de
     profil blanche que tu as demandée ; dis-moi si tu veux au contraire
     cette texture en fond plein écran quelque part précis (Accueil ?
     Auth ?) et je l'intègre telle quelle. */
  --kw-violet-1:#12078C;--kw-violet-2:#7A0CC2;--kw-violet-3:#E016C9;
  --kw-violet:#7A0CC2;--kw-violet-rgb:122,12,194;
  --kw-header-grad:linear-gradient(135deg,var(--kw-violet-1) 0%,var(--kw-violet-2) 55%,var(--kw-violet-3) 100%);
}
:root.dark{--bg:#171513;--surface:#262420;--text:#f5f1ea;--text-rgb:245,241,234;
  --border:rgba(var(--text-rgb),0.12);--shadow:0 4px 24px rgba(0,0,0,0.5);}
/* Mode sombre retiré de la navigation (Marvens, 2026-08-10) : le bouton
   soleil/lune est masqué et initDark() ne bascule plus jamais .dark, donc
   ce bloc :root.dark ci-dessus devient du code mort inoffensif — on le
   laisse pour l'instant plutôt que de traquer les ~90 règles .dark
   éparpillées dans ce fichier, ce sera un nettoyage séparé si tu veux
   vraiment les supprimer physiquement. */
.dark-toggle{display:none!important;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s;}
.screen{display:none;min-height:100vh;flex-direction:column;}
.screen.active{display:flex;}

/* LANG BAR */
.lbar{display:flex;gap:4px;justify-content:center;padding:10px 0;flex-wrap:wrap;}
.lbtn{background:rgba(250,247,242,.08);border:1px solid rgba(250,247,242,.15);color:rgba(250,247,242,.6);font-size:11px;padding:4px 7px;border-radius:6px;cursor:pointer;font-family:inherit;transition:all .2s;}
.lbtn.on{background:rgba(var(--kw-violet-rgb),.15);border-color:var(--kw-violet);color:var(--kw-violet);font-weight:700;}
.lbar-light{display:flex;gap:4px;justify-content:flex-end;padding:8px 16px 0;}
.lbtn-light{background:rgba(var(--text-rgb),.04);border:1px solid var(--border);color:rgba(var(--text-rgb),.4);font-size:11px;padding:3px 7px;border-radius:6px;cursor:pointer;font-family:inherit;transition:all .2s;}
.lbtn-light.on{background:rgba(201,168,76,.12);border-color:var(--gold);color:var(--gold);font-weight:700;}

/* HOME — réagit maintenant au mode clair/sombre comme le reste de l'app
   (seul l'écran de connexion #s-auth reste volontairement toujours sombre) */
#s-home{
  color:var(--text);align-items:center;justify-content:center;text-align:center;padding:0 0 32px;overflow-y:auto;
  background:var(--bg);
}
:root.dark #s-home{background:var(--bg);}

/* ── Grand header violet KnowMe (Marvens, 2026-08-10) : reprend
   l'ambiance/texture de l'image violette officielle, teintée avec le
   dégradé de marque pour rester lisible et cohérente avec le reste de
   l'app, jusqu'au bouton "Créer mon quiz". ── */
.home-hero-violet{
  position:relative;width:100%;padding:14px 24px 26px;
  border-radius:0 0 32px 32px;overflow:hidden;
  background:
    linear-gradient(170deg,rgba(18,7,140,.42) 0%,rgba(122,12,194,.32) 45%,rgba(224,22,201,.38) 100%),
    url('assets/img/kw-auth-bg.webp') center 15%/cover no-repeat,
    var(--kw-header-grad);
  box-shadow:0 14px 32px rgba(var(--kw-violet-rgb),.22);
}
.home-hero-violet .lbar{background:transparent;}
#s-home .home-hero-violet .lbtn{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.9);}
#s-home .home-hero-violet .lbtn.on{background:#fff;border-color:#fff;color:var(--kw-violet);font-weight:800;}
.home-hero-violet .home-title{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25);}
.home-hero-violet .home-tag{color:rgba(255,255,255,.78);}
.home-hero-violet .home-pill{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;}
.home-hero-violet .home-pill:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);}
.home-hero-violet .dark-toggle.home-pill-icon,.home-hero-violet .music-toggle.home-pill-icon{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;
}
.home-hero-violet .btn-gold{background:#fff;color:var(--kw-violet);box-shadow:0 6px 20px rgba(0,0,0,.18);}
.home-hero-violet .btn-gold:hover{background:#f5f0ff;}
/* Bouton "Créer mon quiz" plus grand et plus visible sur l'accueil
   (Marvens, 2026-08-11, point 5) — c'est l'action principale de
   l'app, il doit sauter aux yeux avant tout le reste. */
.home-hero-violet .home-btns .btn-gold{
  padding:20px;font-size:17px;font-weight:800;letter-spacing:.2px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.home-body-pad{width:100%;padding:0 24px;display:flex;flex-direction:column;align-items:center;}
.home-title{font-family:Georgia,serif;font-size:clamp(52px,14vw,80px);font-weight:900;line-height:.9;letter-spacing:-3px;margin-bottom:14px;}
.home-title em{font-style:italic;color:var(--gold);}
.home-tag{font-size:13px;color:rgba(var(--text-rgb),.45);margin-bottom:24px;letter-spacing:.3px;}

/* ── Thème discret pour les membres Premium (particules dorées + badge) ── */
.home-vip-particles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.home-vip-particles span{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px 2px rgba(230,200,119,.7);
  opacity:0;animation:homeVipDrift 6s ease-in-out infinite;
}
@keyframes homeVipDrift{0%{opacity:0;transform:translateY(0);}20%{opacity:.7;}80%{opacity:.3;}100%{opacity:0;transform:translateY(-80px);}}
.home-vip-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,rgba(230,200,119,.15),rgba(201,168,76,.1));
  border:1px solid rgba(230,200,119,.35);color:var(--gold);
  font-size:10.5px;font-weight:700;letter-spacing:.5px;
  padding:4px 11px;border-radius:100px;margin:-6px 0 14px;position:relative;z-index:2;
}
.home-topbar{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.home-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:rgba(var(--text-rgb),.06);border:1px solid rgba(var(--text-rgb),.15);
  color:rgba(var(--text-rgb),.85);padding:8px 15px;border-radius:100px;
  font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:all .2s;position:relative;
}
.home-pill:hover{background:rgba(var(--text-rgb),.11);border-color:rgba(var(--text-rgb),.25);transform:translateY(-1px);}
.home-pill-icon{width:36px;height:36px;padding:0;flex-shrink:0;}
.home-pill-icon svg{width:16px;height:16px;}

/* ── Boutons soleil/lune et musique, une fois déplacés dans la barre du
   haut de l'accueil (voir goTo() dans main.js) : mêmes couleurs fixes
   que les autres pastilles de cette barre — theme-reactive maintenant que
   l'accueil réagit lui aussi au clair/sombre. ── */
.dark-toggle.home-pill-icon,.music-toggle.home-pill-icon{
  position:static;width:36px;height:36px;
  background:rgba(var(--text-rgb),.06);border:1px solid rgba(var(--text-rgb),.15);
  color:rgba(var(--text-rgb),.85);box-shadow:none;opacity:1;cursor:pointer;
}
.dark-toggle.home-pill-icon:hover,.music-toggle.home-pill-icon:hover{
  background:rgba(var(--text-rgb),.11);border-color:rgba(var(--text-rgb),.25);transform:translateY(-1px);
}
.music-toggle.home-pill-icon.muted{opacity:.5;}
.home-btns{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;margin:0 auto;}
.btn-gold{background:var(--gold);color:var(--ink);border:none;padding:16px;border-radius:100px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s;}
.btn-gold:hover{background:var(--gold2);transform:translateY(-2px);}
.btn-outline{background:transparent;color:rgba(var(--text-rgb),.75);border:1px solid rgba(var(--text-rgb),.2);padding:14px;border-radius:100px;font-size:14px;cursor:pointer;font-family:inherit;transition:all .2s;}
.btn-outline:hover{border-color:rgba(var(--text-rgb),.5);color:var(--text);}

/* ── Grille 2 colonnes — actions secondaires de l'accueil, style glassmorphism ── */
.home-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  width:100%;max-width:320px;margin-top:12px;
}
.home-card{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;padding:18px 10px;border-radius:18px;
  background:rgba(var(--text-rgb),.045);border:1px solid rgba(var(--text-rgb),.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:rgba(var(--text-rgb),.85);font-size:12.5px;font-weight:600;
  font-family:inherit;cursor:pointer;text-align:center;line-height:1.3;
  transition:all .22s cubic-bezier(.4,0,.2,1);
}
.home-card svg{width:22px;height:22px;color:var(--kw-violet);}
.home-card:hover{background:rgba(var(--text-rgb),.08);border-color:rgba(var(--kw-violet-rgb),.35);transform:translateY(-2px);}
.home-card:active{transform:translateY(0) scale(.96);transition-duration:.1s;}
.home-footer{margin-top:28px;font-size:11px;color:rgba(var(--text-rgb),.35);}
.home-footer a{color:rgba(var(--kw-violet-rgb),.85);text-decoration:none;}

/* Barre de langues de l'accueil spécifiquement (les autres .lbar sur fond
   var(--ink) fixe — dashboard, quiz, etc. — gardent leurs couleurs crème
   fixes ci-dessus, inchangées, car ce fond-là reste toujours sombre). */
#s-home .lbtn{background:rgba(var(--text-rgb),.08);border-color:rgba(var(--text-rgb),.15);color:rgba(var(--text-rgb),.6);}
#s-home .lbtn.on{background:rgba(201,168,76,.18);border-color:var(--gold);color:var(--gold);}

/* HEADER */
.s-hdr{display:flex;align-items:center;gap:10px;padding:16px 16px 0;flex-shrink:0;}
.btn-back{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:16px;display:grid;place-items:center;transition:all .2s;flex-shrink:0;}
.btn-back:hover{background:var(--ink);color:white;}
.prog{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden;}
.prog-fill{height:100%;background:var(--kw-violet);border-radius:2px;transition:width .4s;}
.s-body{padding:24px 18px 120px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.s-step{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--kw-violet);margin-bottom:8px;font-weight:600;}
.s-title{font-family:Georgia,serif;font-size:26px;font-weight:700;line-height:1.2;margin-bottom:6px;}
.s-sub{font-size:13px;color:rgba(var(--text-rgb),.45);margin-bottom:24px;line-height:1.6;}

/* FORM */
.flbl{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(var(--text-rgb),.45);margin-bottom:5px;display:block;}
.finp{width:100%;padding:13px 15px;border:1.5px solid var(--border);border-radius:12px;font-family:inherit;font-size:16px;background:var(--surface);color:var(--text);outline:none;margin-bottom:14px;transition:border-color .2s;}
.finp:focus{border-color:var(--kw-violet);}
.finp::placeholder{color:rgba(var(--text-rgb),.3);}
.pw-wrap{ position:relative; }
.pw-eye{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:16px; opacity:.5;
  padding:4px; line-height:1;
}
.pw-eye:hover{ opacity:.9; }
.pw-wrap .finp, .pw-wrap .auth-email-input{ padding-right:44px; }
.fta{width:100%;padding:12px 15px;border:1.5px solid var(--border);border-radius:12px;font-family:inherit;font-size:14px;background:var(--surface);color:var(--text);outline:none;margin-bottom:14px;min-height:70px;resize:vertical;transition:border-color .2s;}
.fta:focus{border-color:var(--kw-violet);}

/* PHOTO */
.photo-zone{position:relative;display:flex;align-items:center;gap:14px;margin-bottom:20px;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:14px;}
.photo-circle{width:60px;height:60px;border-radius:50%;background:rgba(var(--text-rgb),.06);border:2px dashed var(--border);display:grid;place-items:center;font-size:24px;overflow:hidden;flex-shrink:0;}
.photo-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.photo-info{flex:1;}
.photo-info label{font-size:13px;color:var(--kw-violet);font-weight:600;display:block;margin-bottom:3px;}
.photo-info span{font-size:11px;color:rgba(var(--text-rgb),.35);}

/* GENDER */
.ggrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:18px;}
.gbtn{padding:12px 6px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;text-align:center;font-family:inherit;transition:all .2s;}
.gbtn .ico{font-size:20px;display:block;margin-bottom:3px;}
.gbtn .lbl{font-size:11px;font-weight:500;color:rgba(var(--text-rgb),.55);}
.gbtn.on{border-color:var(--kw-violet);background:rgba(var(--kw-violet-rgb),.08);}
.gbtn.on .lbl{color:var(--kw-violet);font-weight:700;}

/* CATEGORIES */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.ccard{border:1.5px solid var(--border);border-radius:13px;background:var(--surface);padding:14px 10px;cursor:pointer;text-align:center;transition:all .2s;}
.ccard:active{transform:scale(.97);}
.ccard.on{border-color:var(--rose);background:rgba(232,103,90,.04);}
.cico{font-size:26px;margin-bottom:5px;}
.clbl{font-size:12px;font-weight:600;}

/* QUESTIONS */
.qitem{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:14px;margin-bottom:10px;transition:border-color .2s;}
.qitem.on{border-color:var(--kw-violet);background:rgba(var(--kw-violet-rgb),.04);}
.qtop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;}
.qtext{font-size:13px;font-weight:500;flex:1;line-height:1.4;}
.qbadge{font-size:10px;color:var(--kw-violet);font-weight:700;white-space:nowrap;flex-shrink:0;}
.qopts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.qopt{padding:6px 10px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);font-size:12px;cursor:pointer;font-family:inherit;transition:all .2s;}
.qopt.on{border-color:var(--kw-violet);background:rgba(var(--kw-violet-rgb),.1);color:var(--kw-violet);font-weight:700;}
.qother-inp{width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;font-family:inherit;font-size:13px;outline:none;margin-top:6px;}
.qother-inp:focus{border-color:var(--kw-violet);}
.qtoggle{display:flex;align-items:center;gap:7px;margin-top:8px;cursor:pointer;}
.qtoggle input{accent-color:var(--kw-violet);}
.qtoggle span{font-size:11px;color:rgba(var(--text-rgb),.4);}
.qconfirm{font-size:11px;color:var(--sage);font-weight:600;margin-top:5px;}
.qwarn{font-size:11px;color:var(--rose);margin-top:5px;}
.qopen{font-size:11px;color:var(--lav);font-style:italic;}

/* BUTTONS */
.btn-next{width:100%;background:var(--kw-violet);color:white;border:none;padding:15px;border-radius:13px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:16px;}
.btn-next:hover{background:#6a0ba8;}
.btn-next:disabled{opacity:.4;cursor:not-allowed;}
.btn-next.gold{background:var(--gold);color:var(--ink);}

/* SHARE */
#s-share{background:var(--bg);color:var(--text);align-items:center;justify-content:center;text-align:center;padding:0 24px 40px;overflow-y:auto;}
.share-ico{width:70px;height:70px;background:var(--kw-violet);border-radius:50%;display:grid;place-items:center;font-size:30px;margin:0 auto 18px;}
.share-ttl{font-family:Georgia,serif;font-size:24px;font-weight:700;margin-bottom:6px;}
.share-sub{font-size:13px;color:rgba(var(--text-rgb),.45);margin-bottom:24px;line-height:1.6;}
.lnkbox{background:rgba(250,247,242,.07);border:1px solid rgba(250,247,242,.15);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;margin-bottom:18px;width:100%;max-width:340px;}
.lnktxt{flex:1;font-size:12px;color:var(--kw-violet);font-weight:600;text-align:left;word-break:break-all;}
.btn-copy{background:var(--kw-violet);color:#fff;border:none;padding:8px 13px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0;}
.share-apps{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;}
.sapp{padding:9px 14px;border-radius:100px;border:1px solid rgba(var(--text-rgb),.15);background:transparent;color:var(--text);font-size:12px;cursor:pointer;font-family:inherit;transition:all .2s;}
.sapp:hover{border-color:rgba(250,247,242,.4);background:rgba(250,247,242,.07);}
.btn-txt{background:none;border:none;color:rgba(250,247,242,.4);font-size:12px;cursor:pointer;font-family:inherit;text-decoration:underline;}

/* PLAYER */
#s-player{background:var(--bg);overflow-y:auto;}
.player-hero{text-align:center;padding:24px 20px 16px;}
.player-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--kw-violet-2),var(--kw-violet-3));display:grid;place-items:center;font-size:32px;font-weight:700;color:white;margin:0 auto 12px;font-family:Georgia,serif;overflow:hidden;}
.player-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.player-ttl{font-family:Georgia,serif;font-size:22px;font-weight:700;margin-bottom:4px;}
.player-sub{font-size:13px;color:rgba(var(--text-rgb),.45);line-height:1.5;}
.player-form{padding:0 18px 80px;}

/* QUIZ */
#s-quiz{background:var(--bg);}
.qhdr{background:var(--ink);color:var(--cream);padding:14px 18px;flex-shrink:0;}
.qcreator{font-size:10px;color:rgba(250,247,242,.45);letter-spacing:1px;text-transform:uppercase;}
.qcreator strong{color:var(--kw-violet);}
.qcnt{font-size:12px;color:rgba(250,247,242,.45);margin-top:3px;}
.qprog{height:3px;background:rgba(250,247,242,.12);border-radius:2px;overflow:hidden;margin-top:7px;}
.qpfill{height:100%;background:var(--kw-violet);border-radius:2px;transition:width .4s;}
.qbody{padding:22px 18px;flex:1;overflow-y:auto;}
.qlbl{font-family:Georgia,serif;font-size:20px;font-weight:700;line-height:1.3;margin-bottom:18px;}
.choices{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.choice{padding:13px 15px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);font-family:inherit;font-size:14px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:9px;transition:all .2s;}
.choice:active{transform:scale(.98);}
.choice.on{border-color:var(--text);background:rgba(var(--text-rgb),.03);}
.cnum{width:22px;height:22px;border-radius:6px;background:rgba(var(--text-rgb),.06);display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0;}
.choice.on .cnum{background:var(--ink);color:white;}
.other-inp{width:100%;padding:11px 14px;border:1.5px solid var(--kw-violet);border-radius:10px;font-family:inherit;font-size:14px;outline:none;margin-top:6px;}
.open-note{font-size:11px;color:rgba(var(--text-rgb),.35);font-style:italic;margin-bottom:10px;text-align:center;}
.btn-quiz{width:100%;background:var(--ink);color:white;border:none;padding:14px;border-radius:12px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;}

/* RESULTS */
#s-results{background:var(--bg);}
.res-hero{background:var(--ink);color:var(--cream);padding:32px 20px;text-align:center;}
.sring{width:96px;height:96px;margin:0 auto 14px;position:relative;}
.sring svg{width:100%;height:100%;transform:rotate(-90deg);}
.rbg{fill:none;stroke:rgba(250,247,242,.1);stroke-width:8;}
.rfill{fill:none;stroke:var(--gold);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s ease;}
.sinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
.sn{font-family:Georgia,serif;font-size:23px;font-weight:900;color:var(--gold);line-height:1;}
.sd{font-size:11px;color:rgba(250,247,242,.4);margin-top:1px;}
.rlbl{font-family:Georgia,serif;font-size:19px;font-weight:700;margin-bottom:4px;}
.rdesc{font-size:13px;color:rgba(250,247,242,.5);}
.rlist{padding:14px 18px 32px;}
.ritem{background:var(--surface);border-radius:12px;padding:12px 13px;display:flex;gap:10px;margin-bottom:8px;}
.rico{width:23px;height:23px;border-radius:6px;display:grid;place-items:center;font-size:12px;flex-shrink:0;margin-top:1px;}
.ri-ok{background:rgba(122,158,135,.15);color:var(--sage);}
.ri-no{background:rgba(232,103,90,.1);color:var(--rose);}
.ri-open{background:rgba(155,142,196,.12);color:var(--lav);}
.rq{font-size:11px;color:rgba(var(--text-rgb),.4);margin-bottom:2px;}
.ra{font-size:14px;font-weight:600;}
.rcorr{font-size:11px;color:var(--sage);font-weight:600;margin-top:2px;}

/* DASHBOARD TABS */
.dash-tab{flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);font-size:13px;font-weight:700;cursor:pointer;text-align:center;transition:all .2s;font-family:inherit;}
.dash-tab.on{background:var(--ink);color:white;border-color:var(--ink);}

/* DASHBOARD */
#s-dash{background:var(--bg);color:var(--text);}
.dhdr{background:var(--kw-header-grad);color:#fff;padding:24px 18px 18px;flex-shrink:0;border-radius:0 0 24px 24px;}
.dttl{font-family:Georgia,serif;font-size:22px;font-weight:700;}

/* ══ PROFIL — en-tête (avatar façon Instagram/Discord) ══ */
.pprofile-header{display:flex;flex-direction:column;align-items:center;padding:8px 18px 18px;text-align:center;}
.pavatar-wrap{position:relative;width:100px;height:100px;margin-bottom:12px;}
.pavatar-ring{
  position:absolute;inset:-4px;border-radius:50%;
  background:rgba(255,255,255,.9);
}
.pavatar-wrap.vip .pavatar-ring{background:conic-gradient(from 0deg,var(--gold),#fff3c4,var(--gold2),var(--gold));animation:pAvatarRingSpin 6s linear infinite;}
@keyframes pAvatarRingSpin{to{transform:rotate(360deg);}}
.pavatar{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:var(--kw-header-grad);
  display:grid;place-items:center;color:white;
  border:3px solid #fff;
}
.pavatar-cam-btn{
  position:absolute;bottom:0;right:0;width:32px;height:32px;border-radius:50%;
  background:var(--kw-violet);color:#fff;border:3px solid #fff;
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:transform .2s;
}
.pavatar-cam-btn svg{width:15px;height:15px;}
.pavatar-cam-btn:hover{transform:scale(1.08);}
.pname-row{display:flex;align-items:center;gap:7px;font-size:19px;font-weight:800;color:var(--text);}
.pvip-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--ink);font-size:10px;font-weight:800;letter-spacing:.5px;
  padding:3px 8px;border-radius:100px;
}
.phandle-row{font-size:13px;color:rgba(var(--text-rgb),.45);margin-top:3px;}
.pthought-row{font-size:13px;color:rgba(var(--text-rgb),.62);font-style:italic;margin-top:10px;padding:0 8px;line-height:1.45;}

/* ── Header violet + carte blanche qui chevauche (Marvens, 2026-08-10) ── */
.kw-white-profile{background:var(--bg);}
.pprofile-violet-bg{
  min-height:130px;background:var(--kw-header-grad);
  border-radius:0 0 28px 28px;padding-bottom:8px;
}
.pprofile-white-card{
  position:relative;margin:-72px 14px 0;background:#fff;border-radius:24px;
  padding:0 18px 16px;box-shadow:0 12px 30px rgba(var(--kw-violet-rgb),.14);
}
.pprofile-white-card .pavatar-wrap{margin-top:-46px;}
.pministats-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(var(--text-rgb),.07);}
.pministat{display:flex;flex-direction:column;align-items:center;gap:2px;}
.pministat span{font-size:15px;font-weight:800;color:var(--text);}
.pministat small{font-size:10.5px;color:rgba(var(--text-rgb),.45);text-transform:uppercase;letter-spacing:.3px;}
.pministat-sep{width:1px;height:22px;background:rgba(var(--text-rgb),.1);}

/* ── Sections "Personnaliser" / "Communauté & récompenses" ── */
.psection-title{font-size:12.5px;font-weight:800;letter-spacing:.3px;color:rgba(var(--text-rgb),.4);text-transform:uppercase;margin:22px 2px 10px;}
.pcard-action{display:flex;align-items:center;gap:12px;cursor:pointer;transition:border-color .2s;}
.pcard-action:hover{border-color:var(--kw-violet);}
.pcard-action-icon{width:42px;height:42px;border-radius:12px;background:rgba(var(--kw-violet-rgb),.1);display:grid;place-items:center;font-size:19px;flex-shrink:0;}
.pcard-action-body{flex:1;min-width:0;}
.pcard-action-title{font-weight:700;font-size:14px;color:var(--text);}
.pcard-action-sub{font-size:12px;color:rgba(var(--text-rgb),.5);margin-top:2px;}
.pcard-action-arrow{font-size:20px;color:rgba(var(--text-rgb),.3);flex-shrink:0;}

/* ── Onglets ── */
.ptabs{display:flex;gap:4px;padding:0 14px 12px;border-bottom:1px solid var(--border);}
.ptab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  background:none;border:none;padding:8px 4px;cursor:pointer;font-family:inherit;
  color:rgba(var(--text-rgb),.4);font-size:10.5px;font-weight:700;
  border-radius:10px;transition:all .2s;position:relative;
}
.ptab svg{width:19px;height:19px;}
.ptab.on{color:var(--kw-violet);background:rgba(var(--kw-violet-rgb),.08);}
.ptab:not(.on):hover{color:rgba(var(--text-rgb),.65);}
.ptab-panel{animation:pTabFade .3s ease;padding-top:16px;}
@keyframes pTabFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ── Cartes / titres ── */
.pcard-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--text);}
.pcard-title svg{width:17px;height:17px;flex-shrink:0;}

/* ── Grille 2 colonnes (Prénom / Genre) ── */
.pgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
.ggrid-compact{display:flex;gap:6px;}
.gbtn-compact{
  flex:1;padding:12px 4px;border:1.5px solid var(--border);border-radius:12px;
  background:var(--surface);cursor:pointer;display:grid;place-items:center;
  color:rgba(var(--text-rgb),.5);transition:all .2s;
}
.gbtn-compact svg{width:18px;height:18px;}
.gbtn-compact.on{border-color:var(--kw-violet);background:rgba(var(--kw-violet-rgb),.08);color:var(--kw-violet);}

.km-notif-pref-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--text);cursor:pointer;}
.km-notif-pref-row input[type="checkbox"]{width:20px;height:20px;accent-color:var(--gold);cursor:pointer;}

/* ── Stats ── */
.pstats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px;}
.pstat-tile{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 6px;border-radius:14px;background:rgba(var(--text-rgb),.03);
  border:1px solid var(--border);text-align:center;
}
.pstat-tile svg{width:19px;height:19px;color:var(--gold);}
.pstat-val{font-size:17px;font-weight:800;color:var(--text);}
.pstat-lbl{font-size:9.5px;color:rgba(var(--text-rgb),.45);text-transform:uppercase;letter-spacing:.5px;}

/* ── VIP benefits ── */
.pvip-benefits{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.pvip-benefits div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(var(--text-rgb),.7);}
.pvip-benefits svg{width:16px;height:16px;color:var(--gold);flex-shrink:0;}

/* ── Zone dangereuse ── */
.pdanger{border-color:rgba(232,103,90,.3)!important;background:rgba(232,103,90,.04)!important;}

/* ══ CLASH OR COMPLIMENT — fond "Neon Dual" avant le vote (coupé en
   deux, rouge braises à gauche / vert émeraude à droite, séparés par un
   trait lumineux), puis bascule vers une ambiance pleine ("mood") une
   fois le camp choisi. Tout se passe sur #coc-guest-body — c'est LUI qui
   est réellement visible (#s-clash-guest lui-même est juste le
   conteneur), voir cocVote()/cocLoadGuestCard(). ══ */
#s-clash-guest{position:relative;}
#coc-guest-body{transition:background 1s ease;}

/* ── État par défaut (avant vote) : split rouge/vert ── */
#coc-guest-body:not(.coc-mood-clash):not(.coc-mood-compliment){
  background:linear-gradient(90deg,#2a0d0d 0%,#170a0a 46%,#0a1710 54%,#0d2a1f 100%);
}
#coc-guest-body:not(.coc-mood-clash):not(.coc-mood-compliment)::before{
  content:'';position:absolute;top:0;bottom:0;left:0;width:50%;pointer-events:none;z-index:0;
  background-image:radial-gradient(2px 2px at 25% 80%, rgba(239,68,68,.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 90%, rgba(251,146,60,.45) 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 60%, rgba(239,68,68,.4) 0%, transparent 100%);
  animation:cocEmbersRise 5s ease-in-out infinite;
}
#coc-guest-body:not(.coc-mood-clash):not(.coc-mood-compliment)::after{
  content:'';position:absolute;top:0;bottom:0;right:0;width:50%;pointer-events:none;z-index:0;
  background-image:radial-gradient(1.5px 1.5px at 30% 25%, rgba(52,211,153,.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 65% 15%, rgba(110,231,183,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 40%, rgba(52,211,153,.4) 0%, transparent 100%);
  animation:cocSparkleFloat 6s ease-in-out infinite;
}
@keyframes cocSparkleFloat{0%,100%{opacity:.5;transform:translateY(0);}50%{opacity:1;transform:translateY(-16px);}}

/* Diviseur lumineux au centre — respire lentement, quasi imperceptible */
#coc-divider-glow{
  position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(230,200,119,.6) 20%,rgba(230,200,119,.6) 80%,transparent);
  box-shadow:0 0 20px 2px rgba(230,200,119,.4);
  animation:cocDividerBreathe 4s ease-in-out infinite;
}
@keyframes cocDividerBreathe{0%,100%{opacity:.5;}50%{opacity:1;}}

/* ── Après le vote : ambiance pleine (le split disparaît, remplacé par
   la couleur du camp choisi qui "gagne" l'écran entier) ── */
#coc-guest-body.coc-mood-clash,#coc-guest-body.coc-mood-compliment{ }
#coc-guest-body.coc-mood-clash ~ #coc-divider-glow,
#coc-guest-body.coc-mood-compliment ~ #coc-divider-glow{ display:none; }
#coc-guest-body.coc-mood-clash{
  background:radial-gradient(ellipse at 50% 20%,#2a0d0d 0%,#150808 55%,#0a0a0f 100%);
}
#coc-guest-body.coc-mood-clash::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;width:auto;
  background-image:radial-gradient(2px 2px at 20% 85%, rgba(239,68,68,.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 90%, rgba(251,146,60,.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 45% 95%, rgba(239,68,68,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 80%, rgba(251,146,60,.4) 0%, transparent 100%);
  animation:cocEmbersRise 4s ease-in-out infinite;
}
#coc-guest-body.coc-mood-clash::after{content:none;}
#coc-guest-body.coc-mood-compliment{
  background:radial-gradient(ellipse at 50% 20%,#2a1020 0%,#1a0a18 55%,#0a0a0f 100%);
}
#coc-guest-body.coc-mood-compliment::before{
  content:'💖';position:absolute;top:10%;left:15%;font-size:16px;opacity:.35;pointer-events:none;z-index:0;width:auto;
  animation:cocHeartFloat 5s ease-in-out infinite;background-image:none;
}
#coc-guest-body.coc-mood-compliment::after{
  content:'💕';position:absolute;top:15%;right:18%;font-size:14px;opacity:.3;pointer-events:none;z-index:0;width:auto;
  animation:cocHeartFloat 6s ease-in-out infinite -2s;background-image:none;
}
@keyframes cocEmbersRise{0%{opacity:.5;transform:translateY(0);}50%{opacity:1;transform:translateY(-30px);}100%{opacity:0;transform:translateY(-70px);}}
@keyframes cocHeartFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-14px) scale(1.15);}}
#coc-guest-body > *{position:relative;z-index:2;}
#coc-divider-glow{z-index:1;}

/* ── Illumination du côté choisi au moment du clic (bref flash avant la
   transition vers l'ambiance pleine) ── */
.coc-flash-clash{animation:cocFlashRed .5s ease;}
.coc-flash-compliment{animation:cocFlashGreen .5s ease;}
@keyframes cocFlashRed{0%{box-shadow:inset 0 0 0 0 rgba(239,68,68,0);}50%{box-shadow:inset 0 0 120px 20px rgba(239,68,68,.5);}100%{box-shadow:inset 0 0 0 0 rgba(239,68,68,0);}}
@keyframes cocFlashGreen{0%{box-shadow:inset 0 0 0 0 rgba(52,211,153,0);}50%{box-shadow:inset 0 0 120px 20px rgba(52,211,153,.5);}100%{box-shadow:inset 0 0 0 0 rgba(52,211,153,0);}}

/* ── FIX (2026-08-13, Marvens): overlay d'intro "Tu as été invité par X"
   sur la carte Clash or Compliment (#coc-intro-overlay) — les keyframes
   cocIntroPop/cocIntroFade référencées inline dans index.html n'existaient
   nulle part, donc l'avatar et le nom restaient invisibles (opacity:0
   figé), et la classe coc-intro-out ajoutée par JS après 1.8s n'avait
   aucune règle CSS donc l'overlay noir (#0a0a0f) ne disparaissait JAMAIS —
   c'était le fameux "chargement puis page entièrement noire" côté invité. ── */
@keyframes cocIntroPop{0%{opacity:0;transform:scale(.7);}100%{opacity:1;transform:scale(1);}}
@keyframes cocIntroFade{from{opacity:0;}to{opacity:1;}}
#coc-intro-overlay{transition:opacity .4s ease;}
#coc-intro-overlay.coc-intro-out{opacity:0;pointer-events:none;}

/* ══ MODE VERSUS — décompte d'intro + fond "arène" ══ */
#s-versus-guest{position:relative;}
@keyframes vsIntroFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes vsCountPulse{0%{opacity:0;transform:scale(.4);}40%{opacity:1;transform:scale(1.15);}100%{opacity:1;transform:scale(1);}}

/* Arène futuriste : sol brillant, spots bleu/rouge, légère fumée —
   appliqué sur #vs-guest-body (le conteneur RÉELLEMENT visible, pas
   #s-versus-guest lui-même — même piège que Clash/Compliment, évité ici
   dès le départ).
   FIX (Marvens, 2026-08-15) : ce fond est resté sombre en permanence,
   mais depuis la désactivation globale du mode sombre (10 août), le
   texte à l'intérieur (var(--text)) est devenu TOUJOURS sombre — donc
   invisible ici, exact même bug que Clash. Variables locales, même
   principe que #s-clash-guest. */
#vs-guest-body{
  --bg:#0a0a0f; --surface:#0a0e18; --text:#faf7f2; --text-rgb:250,247,242; --border:rgba(250,247,242,.12);
  color:var(--text);
  position:relative;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(59,130,246,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(239,68,68,.18) 0%, transparent 60%),
    linear-gradient(180deg,#0a0e18 0%,#0a0a0f 40%,#0a0a0f 100%);
}
#vs-guest-body::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 60%, rgba(96,165,250,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(248,113,113,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 20%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,.25) 0%, transparent 100%);
  animation:vsArenaDrift 7s ease-in-out infinite;
}
@keyframes vsArenaDrift{0%,100%{opacity:.5;}50%{opacity:1;}}
/* Sol brillant en bas de l'écran, discret */
#vs-guest-body::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,transparent,rgba(59,130,246,.06) 40%,rgba(239,68,68,.06) 60%,transparent);
}
#vs-guest-body > *{position:relative;z-index:2;}

/* Cercle VS enrichi : rotation lente, halo pulsant, petites étincelles */
.vs-badge-center{
  background:radial-gradient(circle at 35% 30%,#3a3a3a,#000)!important;
  animation:vsBadgePulse 1.8s ease-in-out infinite, vsBadgeSpin 12s linear infinite!important;
}
.vs-badge-center::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  background:conic-gradient(from 0deg,#3b82f6,#ef4444,#3b82f6);
  z-index:-1;opacity:.6;animation:vsBadgeSpin 4s linear infinite reverse;
}
@keyframes vsBadgeSpin{to{transform:translate(-50%,-50%) rotate(352deg);}}

/* ══ RÉPONSE VOCALE — Mode Anonyme (voir spec-reponses-vocales.pdf) ══ */
.anon-reply-mode-tabs{display:flex;gap:8px;margin-bottom:16px;}
.anon-reply-mode-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px;border-radius:100px;border:1px solid rgba(var(--text-rgb),.15);
  background:rgba(var(--text-rgb),.05);color:rgba(var(--text-rgb),.55);
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;
}
.anon-reply-mode-tab svg{width:15px;height:15px;}
.anon-reply-mode-tab.on{background:rgba(201,168,76,.18);border-color:var(--gold);color:var(--gold);}
.anon-voice-disclosure{
  font-size:11.5px;line-height:1.6;color:rgba(var(--text-rgb),.45);
  background:rgba(var(--text-rgb),.04);border:1px solid rgba(var(--text-rgb),.1);
  border-radius:12px;padding:12px 14px;margin-bottom:16px;
}
.anon-voice-rec-btn{
  width:84px;height:84px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#a855f7,#f43f5e);color:white;
  display:grid;place-items:center;box-shadow:0 4px 30px rgba(168,85,247,.4);
  transition:transform .2s;
}
.anon-voice-rec-btn svg{width:26px;height:26px;}
.anon-voice-rec-btn:active{transform:scale(.94);}
.anon-voice-rec-btn.recording{
  background:linear-gradient(135deg,#f43f5e,#e8675a);
  animation:voicePulse 1.1s ease-in-out infinite;
}
@keyframes voicePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(244,63,94,.5);}
  50%{box-shadow:0 0 0 16px rgba(244,63,94,0);}
}
.anon-voice-player{
  display:flex;align-items:center;gap:12px;
  background:rgba(var(--text-rgb),.05);border:1px solid rgba(var(--text-rgb),.12);
  border-radius:16px;padding:12px 16px;
}
.anon-voice-play-btn{
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:var(--gold);color:var(--ink);display:grid;place-items:center;
}
.anon-voice-secondary-btn{
  background:rgba(var(--text-rgb),.06);border:1px solid rgba(var(--text-rgb),.15);
  color:rgba(var(--text-rgb),.7);padding:14px 16px;border-radius:100px;
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
}

/* ── Modificateurs de voix ── */
.voice-fx-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:4px;}
.voice-fx-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 4px;border-radius:12px;border:1.5px solid rgba(var(--text-rgb),.12);
  background:rgba(var(--text-rgb),.04);color:rgba(var(--text-rgb),.55);
  cursor:pointer;font-family:inherit;font-size:10.5px;font-weight:700;transition:all .2s;
}
.voice-fx-btn svg{width:18px;height:18px;}
.voice-fx-btn.on{border-color:var(--gold);background:rgba(201,168,76,.1);color:var(--gold);}
.voice-fx-btn:disabled{opacity:.4;pointer-events:none;}

/* ── Sélecteur de mini-jeu Arena (création de tournoi) ── */
.tn-arenagame-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.tn-arenagame-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 4px;border-radius:12px;border:1.5px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.55);
  cursor:pointer;font-family:inherit;font-size:10.5px;font-weight:700;transition:all .2s;
}
.tn-arenagame-btn svg{width:20px;height:20px;}
.tn-arenagame-btn.on{border-color:var(--gold);background:rgba(201,168,76,.12);color:var(--gold);}
.tn-arenagame-btn:disabled{opacity:.35;cursor:not-allowed;}

/* ── Sélecteur de thème (création de quiz) ── */
.theme-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px;}
.theme-swatch{
  display:flex;align-items:center;gap:8px;padding:11px 12px;
  border:1.5px solid var(--border);border-radius:12px;background:var(--surface);
  cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:rgba(var(--text-rgb),.6);
  transition:all .2s;
}
.theme-swatch-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px rgba(var(--text-rgb),.08);}
.theme-swatch.on{border-color:var(--gold);background:rgba(201,168,76,.07);color:var(--text);}

/* ══════════════════════════════════════════════════════
   THÈMES DE QUIZ — ambiance visuelle de l'expérience invité
   (s-player, s-quiz, s-results). Activé via body[data-quiz-theme].
══════════════════════════════════════════════════════ */

/* ── Carte de question : animation d'entrée à chaque changement ── */
.qcard-anim{animation:qCardIn .45s cubic-bezier(.2,.8,.3,1);}
@keyframes qCardIn{
  from{opacity:0;transform:translateY(16px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.choice{position:relative;overflow:hidden;}
.choice::after{
  content:'';position:absolute;inset:0;background:rgba(255,255,255,.35);
  transform:scale(0);border-radius:50%;opacity:0;transition:transform .4s,opacity .6s;
}
.choice:active::after{transform:scale(3);opacity:1;transition:transform 0s,opacity 0s;}

/* ── Couche de particules décoratives (générée en JS, une par thème) ── */
.quiz-theme-fx{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
/* Le contenu réel doit toujours passer AU-DESSUS de la couche de
   particules (purement décorative, position:fixed z-index:1) */
.qhdr,.player-hero,.player-form,.res-hero,.rlist{position:relative;z-index:2;}
.quiz-fx-sparks span{
  position:absolute;top:-10px;width:var(--size);height:var(--size);border-radius:50%;
  background:#ffe9a8;box-shadow:0 0 6px 2px rgba(230,200,119,.8);
  animation:fxFallSpark linear infinite;opacity:0;
}
@keyframes fxFallSpark{0%{opacity:0;transform:translateY(0) translateX(0);}10%{opacity:.9;}90%{opacity:.5;}100%{opacity:0;transform:translateY(100vh) translateX(20px);}}
.quiz-fx-bubbles span{
  position:absolute;bottom:-20px;width:var(--size);height:var(--size);border-radius:50%;
  background:rgba(186,230,253,.5);border:1px solid rgba(224,242,254,.7);
  animation:fxRiseBubble linear infinite;opacity:0;
}
@keyframes fxRiseBubble{0%{opacity:0;transform:translateY(0) translateX(0);}10%{opacity:.8;}90%{opacity:.4;}100%{opacity:0;transform:translateY(-100vh) translateX(-15px);}}
.quiz-fx-stars span{
  position:absolute;top:0;width:var(--size);height:var(--size);border-radius:50%;
  background:#e9d5ff;box-shadow:0 0 4px 1px rgba(233,213,255,.9);
  animation:fxTwinkleStar ease-in-out infinite;opacity:0;
}
@keyframes fxTwinkleStar{0%,100%{opacity:.15;}50%{opacity:.9;}}

/* ── OR ── */
body[data-quiz-theme="gold"] #s-player,
body[data-quiz-theme="gold"] #s-quiz,
body[data-quiz-theme="gold"] #s-results{
  background:radial-gradient(ellipse at 50% 0%,#2a2210 0%,#171310 55%,#0f0e0c 100%);color:#faf7f2;
}
body[data-quiz-theme="gold"] .qhdr{background:transparent;border-bottom:1px solid rgba(230,200,119,.2);}
body[data-quiz-theme="gold"] .qbody{position:relative;z-index:2;background:rgba(255,255,255,.03);margin:14px;border-radius:20px;border:1px solid rgba(230,200,119,.25);box-shadow:0 8px 40px rgba(0,0,0,.3);}
body[data-quiz-theme="gold"] .qlbl{color:#faf7f2;}
body[data-quiz-theme="gold"] .choice{background:rgba(255,255,255,.04);border-color:rgba(230,200,119,.25);color:#faf7f2;}
body[data-quiz-theme="gold"] .choice .cnum{background:rgba(230,200,119,.15);color:var(--gold);}
body[data-quiz-theme="gold"] .choice.on{border-color:var(--gold);background:rgba(230,200,119,.12);}
body[data-quiz-theme="gold"] .choice.on .cnum{background:var(--gold);color:var(--ink);}
body[data-quiz-theme="gold"] .btn-quiz{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--ink);box-shadow:0 4px 24px rgba(230,200,119,.3);}
body[data-quiz-theme="gold"] .qpfill{background:linear-gradient(90deg,var(--gold),#fff3c4);}
body[data-quiz-theme="gold"] .player-ttl,body[data-quiz-theme="gold"] .player-sub{color:#faf7f2;}
body[data-quiz-theme="gold"] .player-sub{color:rgba(250,247,242,.5);}

/* ── OCÉAN ── */
body[data-quiz-theme="ocean"] #s-player,
body[data-quiz-theme="ocean"] #s-quiz,
body[data-quiz-theme="ocean"] #s-results{
  background:linear-gradient(180deg,#0c2f3f 0%,#0a4a5e 55%,#0e6a82 100%);color:#eafcff;
}
body[data-quiz-theme="ocean"] .qhdr{background:transparent;border-bottom:1px solid rgba(34,211,238,.25);}
body[data-quiz-theme="ocean"] .qbody{position:relative;z-index:2;background:rgba(255,255,255,.05);margin:14px;border-radius:20px;border:1px solid rgba(34,211,238,.3);box-shadow:0 8px 40px rgba(0,0,0,.25);}
body[data-quiz-theme="ocean"] .qlbl{color:#eafcff;}
body[data-quiz-theme="ocean"] .choice{background:rgba(255,255,255,.06);border-color:rgba(34,211,238,.3);color:#eafcff;}
body[data-quiz-theme="ocean"] .choice .cnum{background:rgba(34,211,238,.18);color:#67e8f9;}
body[data-quiz-theme="ocean"] .choice.on{border-color:#22d3ee;background:rgba(34,211,238,.16);}
body[data-quiz-theme="ocean"] .choice.on .cnum{background:#22d3ee;color:#0c2f3f;}
body[data-quiz-theme="ocean"] .btn-quiz{background:linear-gradient(135deg,#22d3ee,#0e7490);color:#04252f;box-shadow:0 4px 24px rgba(34,211,238,.35);}
body[data-quiz-theme="ocean"] .qpfill{background:linear-gradient(90deg,#22d3ee,#a5f3fc);}
body[data-quiz-theme="ocean"] .player-ttl{color:#eafcff;}
body[data-quiz-theme="ocean"] .player-sub{color:rgba(234,252,255,.55);}

/* ── GALAXIE ── */
body[data-quiz-theme="galaxy"] #s-player,
body[data-quiz-theme="galaxy"] #s-quiz,
body[data-quiz-theme="galaxy"] #s-results{
  background:radial-gradient(ellipse at 30% 10%,#2e1a5e 0%,#1a1035 45%,#0a0818 100%);color:#f3f0ff;
}
body[data-quiz-theme="galaxy"] .qhdr{background:transparent;border-bottom:1px solid rgba(167,139,250,.25);}
body[data-quiz-theme="galaxy"] .qbody{position:relative;z-index:2;background:rgba(255,255,255,.04);margin:14px;border-radius:20px;border:1px solid rgba(167,139,250,.3);box-shadow:0 8px 40px rgba(0,0,0,.35);}
body[data-quiz-theme="galaxy"] .qlbl{color:#f3f0ff;}
body[data-quiz-theme="galaxy"] .choice{background:rgba(255,255,255,.05);border-color:rgba(167,139,250,.3);color:#f3f0ff;}
body[data-quiz-theme="galaxy"] .choice .cnum{background:rgba(167,139,250,.2);color:#c4b5fd;}
body[data-quiz-theme="galaxy"] .choice.on{border-color:#a78bfa;background:rgba(167,139,250,.18);}
body[data-quiz-theme="galaxy"] .choice.on .cnum{background:#a78bfa;color:#1a1035;}
body[data-quiz-theme="galaxy"] .btn-quiz{background:linear-gradient(135deg,#a78bfa,#6d28d9);color:#f3f0ff;box-shadow:0 4px 24px rgba(167,139,250,.35);}
body[data-quiz-theme="galaxy"] .qpfill{background:linear-gradient(90deg,#a78bfa,#e9d5ff);}
body[data-quiz-theme="galaxy"] .player-ttl{color:#f3f0ff;}
body[data-quiz-theme="galaxy"] .player-sub{color:rgba(243,240,255,.55);}

/* ══ ÉCRAN DE BIENVENUE VIP ══ */
/* ADAPTATION MODE CLAIR (2026-08-07) : fond radial toujours sombre avant
   ce correctif — voir la même remarque sur .tn-navy-bg plus haut. */
#s-vip-welcome{
  background:radial-gradient(ellipse at 50% 30%,#fdf6e3 0%,#faf3e6 60%,#f6eee0 100%);
  position:relative;overflow:hidden;align-items:center;justify-content:center;padding:0;
}
:root.dark #s-vip-welcome{
  background:radial-gradient(ellipse at 50% 30%,#1a1408 0%,#0f0e0c 60%,#06040f 100%);
}
.vipw-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;}
.vipw-orb{position:absolute;border-radius:50%;filter:blur(70px);animation:vipwFloat 7s ease-in-out infinite;}
.vipw-orb:nth-child(1){width:320px;height:320px;background:radial-gradient(circle,rgba(230,200,119,.35),transparent 70%);top:-60px;left:-60px;animation-delay:0s;}
.vipw-orb:nth-child(2){width:280px;height:280px;background:radial-gradient(circle,rgba(201,168,76,.28),transparent 70%);bottom:-40px;right:-40px;animation-delay:-2.5s;}
.vipw-orb:nth-child(3){width:240px;height:240px;background:radial-gradient(circle,rgba(255,243,196,.2),transparent 70%);top:40%;left:60%;animation-delay:-4.5s;}
@keyframes vipwFloat{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(15px,-20px) scale(1.08);}}
.vipw-particles{position:absolute;inset:0;z-index:1;pointer-events:none;}
.vipw-p{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 2px rgba(230,200,119,.8);opacity:0;animation:vipwParticle 5s ease-in-out infinite;}
@keyframes vipwParticle{0%{opacity:0;transform:translateY(0);}20%{opacity:.9;}80%{opacity:.4;}100%{opacity:0;transform:translateY(-90px);}}
.vipw-content{position:relative;z-index:10;text-align:center;padding:0 24px;}
.vipw-crown{
  width:72px;height:72px;margin:0 auto 14px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--ink);display:grid;place-items:center;
  box-shadow:0 0 40px rgba(230,200,119,.5);
  opacity:0;transform:scale(.6);animation:vipwCrownIn .7s cubic-bezier(.2,.9,.3,1.3) forwards .1s;
}
@keyframes vipwCrownIn{0%{opacity:0;transform:scale(.6);}60%{opacity:1;transform:scale(1.08);}100%{opacity:1;transform:scale(1);}}
.vipw-logo{
  font-family:Georgia,serif;font-size:38px;font-weight:900;letter-spacing:-1.5px;
  background:linear-gradient(135deg,var(--gold),#fff3c4,var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  opacity:0;animation:vipwFadeUp .6s ease forwards .35s;
}
.vipw-welcome-text{font-size:19px;font-weight:700;color:var(--text);margin-top:14px;opacity:0;animation:vipwFadeUp .6s ease forwards .55s;}
.vipw-welcome-text span{color:var(--gold);}
.vipw-sub{font-size:13px;color:rgba(var(--text-rgb),.6);margin-top:6px;opacity:0;animation:vipwFadeUp .6s ease forwards .72s;}
@keyframes vipwFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.dsub{font-size:12px;color:rgba(250,247,242,.4);margin-top:3px;}
.dstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 18px;}
.dstat{background:var(--surface);border-radius:13px;padding:14px;border:1px solid var(--border);}
.dstat.hl{background:rgba(var(--kw-violet-rgb),.1);border-color:rgba(var(--kw-violet-rgb),.3);}
.dstat-ico{font-size:18px;margin-bottom:7px;}
.dstat-val{font-family:Georgia,serif;font-size:24px;font-weight:700;line-height:1;margin-bottom:2px;}
.dstat-lbl{font-size:10px;color:rgba(var(--text-rgb),.4);text-transform:uppercase;letter-spacing:.8px;}
.dstat.hl .dstat-lbl{color:rgba(var(--text-rgb),.55);}
.dlist{padding:0 18px 32px;display:flex;flex-direction:column;gap:8px;}
.ditem{background:var(--surface);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:11px;border:1px solid var(--border);}
.davatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--rose));display:grid;place-items:center;font-size:14px;font-weight:700;color:white;flex-shrink:0;font-family:Georgia,serif;}
.dname{font-size:14px;font-weight:600;}
.drel{font-size:11px;color:rgba(var(--text-rgb),.4);}
.dscore{text-align:right;font-family:Georgia,serif;font-size:18px;font-weight:700;}
.dscore-den{font-size:11px;color:rgba(var(--text-rgb),.35);}

/* DEFIS */
.defi-item{background:var(--surface);border:1.5px solid var(--border);border-radius:13px;padding:14px 15px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .2s;margin-bottom:10px;}
.defi-item:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:var(--shadow);}
.defi-av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--rose));display:grid;place-items:center;font-size:16px;font-weight:700;color:white;flex-shrink:0;font-family:Georgia,serif;}
.defi-name{font-size:14px;font-weight:700;}
.defi-sub{font-size:11px;color:rgba(var(--text-rgb),.4);margin-top:2px;}

/* ANON MODE */
.anon-result{background:var(--surface);border-radius:13px;padding:14px 15px;display:flex;align-items:center;gap:12px;margin-bottom:10px;border:1px solid var(--border);}
.anon-blur{filter:blur(5px);user-select:none;pointer-events:none;}
.unlock-banner{background:linear-gradient(135deg,var(--gold),#e8a020);border-radius:13px;padding:18px;text-align:center;margin:16px 18px;}
.unlock-ttl{font-size:15px;font-weight:700;color:white;margin-bottom:4px;}
.unlock-sub{font-size:12px;color:rgba(255,255,255,.8);margin-bottom:14px;}
.btn-unlock{background:var(--surface);color:var(--gold);border:none;padding:12px 24px;border-radius:100px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;}

/* MODES TILES */
.mtiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.mtile{background:var(--surface);border:1.5px solid var(--border);border-radius:13px;padding:16px 12px;text-align:center;position:relative;}
.mtile.active{cursor:pointer;transition:all .2s;}
.mtile.active:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.mtile-ico{margin-bottom:6px;display:flex;align-items:center;justify-content:center;color:var(--gold);}
.mtile-name{font-size:12px;font-weight:700;}
.mtile-desc{font-size:10px;color:rgba(var(--text-rgb),.4);margin-top:3px;line-height:1.4;}

/* ── Cartes mini-jeux enrichies (Arcade, spec item 5) ── */
.mtile-rich{
  background:var(--surface);
  background:linear-gradient(160deg, color-mix(in srgb, var(--gcolor) 16%, var(--surface)), var(--surface) 70%);
  border-color:color-mix(in srgb, var(--gcolor) 35%, var(--border));
  padding-bottom:44px;
}
.mtile-rich:active{ transform:scale(.96); }
.mtile-difficulty{ display:flex; justify-content:center; gap:1px; margin-top:5px; }
.mtile-stats{ font-size:9.5px; color:rgba(var(--text-rgb),.45); margin-top:6px; min-height:12px; }

/* ══ CLUB VIP KNOWME (spec Part 2) ══ */
.kv-club-banner{
  text-align:center; padding:20px 16px 16px; margin:8px 0 14px; border-radius:20px;
  background:linear-gradient(145deg, rgba(201,168,76,.16), rgba(142,111,214,.14));
  border:1px solid rgba(201,168,76,.3);
}
.kv-club-crown{ color:var(--gold); display:flex; justify-content:center; margin-bottom:6px; }
.kv-club-title{ font-family:Georgia,serif; font-weight:800; font-size:19px; }
.kv-club-sub{ font-size:12px; color:rgba(var(--text-rgb),.5); margin-top:2px; }
.kv-action-cards{ display:flex; gap:8px; margin-bottom:16px; }
.kv-action-card{
  flex:1; text-align:center; padding:12px 6px; border-radius:14px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); transition:transform .15s;
}
.kv-action-card:active{ transform:scale(.95); }
.kv-action-card svg{ color:var(--gold); margin-bottom:5px; }
.kv-action-lbl{ font-size:11px; font-weight:700; }
.kv-action-count{ font-size:14px; font-weight:800; color:var(--gold); margin-top:2px; }

/* ── Carte ami enrichie ── */
.kv-friend-card{
  display:flex; align-items:center; gap:10px; padding:12px; margin-bottom:10px;
  border-radius:16px; background:var(--surface); border:1px solid var(--border);
}
.kv-friend-info{ flex:1; min-width:0; cursor:pointer; }
.kv-friend-name-row{ display:flex; align-items:center; gap:5px; }
.kv-friend-name{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kv-friend-badge{
  flex-shrink:0; display:inline-flex; align-items:center; gap:2px; font-size:9px; font-weight:800;
  color:#0a0a0a; background:var(--gold); border-radius:100px; padding:1px 6px;
}
.kv-friend-status{ font-size:11px; margin-top:2px; }
.kv-friend-country{ font-size:10.5px; color:rgba(var(--text-rgb),.4); margin-top:1px; }
.kv-friend-actions{ display:flex; gap:6px; flex-shrink:0; }
.kv-friend-actions button{
  background:rgba(230,200,119,.12); border:none; color:#e6c877; border-radius:100px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* ── Fil d'activité des amis (spec Club VIP) ── */
.kv-activity-section{ margin-top:20px; }
.kv-activity-title{ font-size:13px; font-weight:700; color:rgba(var(--text-rgb),.55); margin-bottom:8px; }
.kv-activity-item{
  display:flex; align-items:flex-start; gap:10px; padding:10px 4px;
  border-bottom:1px solid var(--border);
}
.kv-activity-item:last-child{ border-bottom:none; }
.kv-activity-dot{
  flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--gold); margin-top:6px;
}
.kv-activity-body{ font-size:12.5px; line-height:1.4; }
.kv-activity-time{ font-size:10.5px; color:rgba(var(--text-rgb),.4); margin-top:2px; }
.kv-activity-join{
  flex-shrink:0; background:rgba(230,200,119,.15); border:1px solid rgba(230,200,119,.4);
  color:#e6c877; border-radius:100px; padding:4px 10px; font-size:10.5px; font-weight:700; cursor:pointer;
}

/* ══ CHAT VIP — "Luxury Glass" (demande explicite de Marvens, 2026-07-30) ══ */
/* ── KnowMe VIP — Messagerie (Marvens, 2026-08-11, point 12) : interface
   simple et propre, fond blanc, mes messages en bulles violettes/texte
   blanc, messages reçus en bulles gris clair/texte noir. Remplace
   l'ancien thème "luxe" sombre doré/étoilé. ── */
.kvc-luxury-bg{
  position:relative; overflow:hidden;
  background:var(--bg);
}
.kvc-luxury-bg::before{ content:none; }
.kvc-luxury-bg > *{ position:relative; z-index:1; }
.kvc-luxury-hdr{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.kvc-avatar-ring{
  padding:2px; border-radius:50%;
  background:var(--kw-header-grad);
}
.kvc-vip-badge{
  flex-shrink:0; display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:800;
  color:#1a1005; background:linear-gradient(135deg,#f0dca0,#c9a84c); border-radius:100px; padding:2px 7px;
}
.kvc-luxury-messages{
  flex:1; overflow-y:auto; padding:18px 16px 8px;
  display:flex; flex-direction:column; gap:16px;
}
.kvc-luxury-bubble{
  max-width:80%; padding:12px 16px; border-radius:20px;
  font-family:inherit; font-size:14.5px; line-height:1.5; letter-spacing:.1px;
  word-break:break-word;
}
.kvc-luxury-bubble.mine{
  align-self:flex-end;
  background:var(--kw-header-grad);
  color:#fff;
  border-bottom-right-radius:6px;
}
.kvc-luxury-bubble.theirs{
  align-self:flex-start;
  background:#eef0f2;
  color:#1a1a1a;
  border-bottom-left-radius:6px;
}
.kvc-luxury-time{
  font-size:9.5px; color:rgba(var(--text-rgb),.35); margin-top:5px; font-family:inherit;
}
.kvc-luxury-bubble.mine .kvc-luxury-time{ text-align:right; color:rgba(255,255,255,.7); }
.kvc-luxury-input-row{
  display:flex; align-items:flex-end; gap:10px; padding:12px 16px 16px;
  background:var(--surface);
  border-top:1px solid var(--border);
}
.kvc-luxury-input{
  flex:1; resize:none; max-height:90px; border-radius:20px; padding:12px 16px;
  background:#f2f1f5; border:1px solid var(--border); color:var(--text); font-size:14px;
}
.kvc-luxury-input::placeholder{ color:rgba(var(--text-rgb),.4); }
.kvc-luxury-send{
  flex-shrink:0; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:var(--kw-violet); color:#fff;
  display:flex; align-items:center; justify-content:center;
}

/* ══ ÉCRAN DE PAIEMENT — refonte "Premium" (2026-08-04, demande détaillée
   de Marvens : doit inspirer confiance comme Spotify/Discord/Apple/Revolut) ══ */
.pay-bg{
  position:relative; overflow:hidden; min-height:100%;
  background:
    radial-gradient(ellipse at 20% -5%, rgba(142,111,214,.22), transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(230,200,119,.10), transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(59,60,120,.18), transparent 55%),
    linear-gradient(180deg, #0a0a12 0%, #0d0b16 50%, #08070d 100%);
}
.pay-bg::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.3px 1.3px at 12% 20%, rgba(230,200,119,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 10%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1.3px 1.3px at 90% 55%, rgba(180,140,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 75%, rgba(255,255,255,.22) 0%, transparent 100%);
  animation: arcadeStarsTwinkle 5s ease-in-out infinite alternate;
}
.pay-bg > *{ position:relative; z-index:1; }

/* ── Carte héro Premium ── */
.pay-hero-card{
  text-align:center; padding:26px 20px 22px; margin:6px 0 16px; border-radius:24px;
  background:linear-gradient(155deg, rgba(230,200,119,.16), rgba(142,111,214,.14) 60%, rgba(59,60,120,.10));
  border:1px solid rgba(230,200,119,.35);
  box-shadow:0 8px 30px rgba(142,111,214,.15), inset 0 1px 0 rgba(255,255,255,.06);
  animation: payFloat 5s ease-in-out infinite;
}
.pay-hero-star{ font-size:26px; margin-bottom:4px; filter:drop-shadow(0 0 8px rgba(230,200,119,.6)); }
.pay-hero-title{ font-family:Georgia,serif; font-weight:800; font-size:20px; color:#fdf6e3; letter-spacing:.3px; }
.pay-hero-sub{ font-size:12.5px; color:rgba(255,255,255,.55); margin-top:4px; }
.pay-hero-price{
  font-family:Georgia,serif; font-weight:900; font-size:34px; margin-top:12px;
  background:linear-gradient(135deg,#fdf6e3,#e6c877,#c9a84c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pay-hero-price span{ font-size:14px; font-weight:600; color:rgba(255,255,255,.5); -webkit-text-fill-color:rgba(255,255,255,.5); }
.pay-hero-secure{ display:flex; align-items:center; justify-content:center; gap:5px; margin-top:10px; font-size:11.5px; color:rgba(74,222,128,.85); font-weight:700; }
.pay-hero-notes{ margin-top:12px; font-size:11px; color:rgba(255,255,255,.4); line-height:1.7; }

/* ── Carte avantages ── */
.pay-perks-card{
  border-radius:20px; padding:18px 16px; margin-bottom:16px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
}
.pay-perks-title{ font-size:13px; font-weight:800; color:rgba(255,255,255,.75); margin-bottom:12px; text-align:center; letter-spacing:.3px; }
.pay-perks-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pay-perk{ display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,.8); }
.pay-perk svg{ flex-shrink:0; color:#e6c877; }

/* ── Cartes de méthode de paiement (remplace les onglets plats) ── */
.pay-method-cards{ display:flex; gap:10px; margin:0 0 16px; }
.pay-method-card{
  flex:1; position:relative; overflow:hidden; cursor:pointer; text-align:left;
  border-radius:18px; padding:16px 14px; border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03); transition:transform .15s, box-shadow .2s, border-color .2s;
}
.pay-method-card:active{ transform:scale(.97); }
.pay-method-card.on{
  border-color:rgba(230,200,119,.55);
  background:linear-gradient(155deg, rgba(230,200,119,.14), rgba(142,111,214,.10));
  box-shadow:0 6px 22px rgba(230,200,119,.18);
}
.pay-method-card::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.12), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.pay-method-card.on::after{ left:130%; }
.pay-method-card-top{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.pay-method-card-name{ font-weight:800; font-size:14px; color:#fff; }
.pay-method-card-tag{ font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:100px; background:rgba(74,222,128,.15); color:#4ade80; margin-left:auto; }
.pay-method-card-desc{ font-size:10.5px; color:rgba(255,255,255,.45); line-height:1.5; }

.pay-network-tabs{ display:flex; gap:8px; margin:0 0 14px; }
.pay-network-tab{
  flex:1; padding:10px 6px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);
  color:#fff; font-size:12px; font-weight:700; cursor:pointer; text-align:center; transition:transform .15s;
}
.pay-network-tab:active{ transform:scale(.96); }
.pay-network-tab.on{ background:linear-gradient(135deg,#f0dca0,#c9a84c); border-color:transparent; color:#1a1005; box-shadow:0 4px 14px rgba(230,200,119,.25); }

.pay-card{
  border-radius:20px; padding:20px 18px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* ── QR premium ── */
.pay-qr-frame{
  width:196px; height:196px; margin:4px auto 10px; padding:10px; border-radius:22px;
  background:#fff; position:relative;
  border:2px solid transparent; background-clip:padding-box;
  box-shadow:0 0 0 2px rgba(230,200,119,.55), 0 8px 26px rgba(230,200,119,.22), 0 0 40px rgba(230,200,119,.12);
  animation: payQrPulse 3.5s ease-in-out infinite;
}
.pay-qr-frame img{ width:100%; height:100%; border-radius:12px; object-fit:contain; }

/* ── Adresse wallet ── */
.pay-address-box{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:14px;
  padding:12px 14px; transition:transform .15s, border-color .2s;
}
.pay-address-box:active{ transform:scale(.98); border-color:rgba(230,200,119,.4); }
.pay-address-icon{ flex-shrink:0; color:#e6c877; }
.pay-address-text{ flex:1; font-size:11.5px; font-family:monospace; word-break:break-all; color:rgba(255,255,255,.75); }
.pay-address-copy-btn{
  flex-shrink:0; display:flex; align-items:center; gap:5px; padding:8px 12px; border-radius:100px;
  background:linear-gradient(135deg,#f0dca0,#c9a84c); color:#1a1005; font-size:11px; font-weight:800; border:none; cursor:pointer;
}

.pay-input{
  width:100%; border-radius:14px; padding:13px 14px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); color:#fff; font-size:14px;
}
.pay-input::placeholder{ color:rgba(255,255,255,.35); }
.pay-input:focus{ outline:none; border-color:rgba(230,200,119,.5); }

.pay-verify-btn{
  width:100%; margin-top:14px; padding:15px; border-radius:16px; border:none; cursor:pointer;
  font-size:14.5px; font-weight:800; color:#1a1005;
  background:linear-gradient(135deg,#f0dca0,#c9a84c);
  box-shadow:0 6px 20px rgba(230,200,119,.3); transition:transform .15s, box-shadow .2s;
}
.pay-verify-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 26px rgba(230,200,119,.4); }
.pay-verify-btn:active{ transform:scale(.97); }
.pay-verify-btn:disabled{ opacity:.5; cursor:default; transform:none; box-shadow:none; }

/* ── Étapes de progression ── */
.pay-steps{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0 0 18px; }
.pay-step{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.pay-step-dot{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; background:rgba(255,255,255,.08); color:rgba(255,255,255,.4);
  border:1.5px solid rgba(255,255,255,.15); transition:all .3s;
}
.pay-step.done .pay-step-dot{ background:linear-gradient(135deg,#f0dca0,#c9a84c); color:#1a1005; border-color:transparent; }
.pay-step.active .pay-step-dot{ border-color:#e6c877; color:#e6c877; box-shadow:0 0 0 3px rgba(230,200,119,.15); }
.pay-step-lbl{ font-size:8.5px; color:rgba(255,255,255,.4); text-align:center; max-width:52px; line-height:1.2; }
.pay-step.active .pay-step-lbl, .pay-step.done .pay-step-lbl{ color:rgba(255,255,255,.75); }
.pay-step-line{ width:18px; height:1.5px; background:rgba(255,255,255,.12); margin-bottom:16px; }
.pay-step-line.done{ background:linear-gradient(90deg,#c9a84c,#e6c877); }

/* ── Loader de vérification ── */
.pay-verify-loader{
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 0;
}
.pay-spinner{
  width:38px; height:38px; border-radius:50%; border:3px solid rgba(230,200,119,.2);
  border-top-color:#e6c877; animation:paySpin .8s linear infinite;
}
@keyframes paySpin{ to{ transform:rotate(360deg); } }

/* ── Sécurité + confiance ── */
.pay-security-card{
  border-radius:18px; padding:16px; margin-top:16px; text-align:center;
  background:rgba(74,222,128,.06); border:1px solid rgba(74,222,128,.2);
}
.pay-security-card svg{ color:#4ade80; margin-bottom:6px; }
.pay-security-title{ font-size:12.5px; font-weight:800; color:#4ade80; }
.pay-security-sub{ font-size:10.5px; color:rgba(255,255,255,.4); margin-top:4px; line-height:1.5; }
.pay-trust-row{ text-align:center; margin-top:14px; font-size:11px; color:rgba(255,255,255,.4); line-height:1.9; }
.pay-trust-stars{ color:#e6c877; letter-spacing:2px; }

/* ── Succès / confirmation ── */
.pay-success-wrap{ text-align:center; padding:20px 10px; }
.pay-success-icon{ font-size:52px; margin-bottom:10px; animation:payFloat 2.5s ease-in-out infinite; }
.pay-success-title{ font-family:Georgia,serif; font-size:20px; font-weight:800; color:#fdf6e3; }
.pay-success-sub{ font-size:12.5px; color:rgba(255,255,255,.55); margin-top:6px; }

@keyframes payFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes payQrPulse{ 0%,100%{ box-shadow:0 0 0 2px rgba(230,200,119,.55),0 8px 26px rgba(230,200,119,.22),0 0 40px rgba(230,200,119,.12); } 50%{ box-shadow:0 0 0 2px rgba(230,200,119,.75),0 8px 30px rgba(230,200,119,.32),0 0 55px rgba(230,200,119,.22); } }

.mtile-play-btn{
  position:absolute; left:10px; right:10px; bottom:10px;
  border:none; border-radius:100px; padding:6px 0;
  font-size:11px; font-weight:800; color:#0a0a0a; cursor:pointer;
}
.badge-soon{position:absolute;top:7px;right:7px;background:var(--lav);color:white;font-size:9px;font-weight:700;padding:2px 6px;border-radius:100px;}
.badge-prem{position:absolute;top:7px;right:7px;background:var(--gold);color:white;font-size:9px;font-weight:700;padding:2px 6px;border-radius:100px;}

/* ADMIN BADGE */
.admin-badge{display:none;align-items:center;gap:7px;background:linear-gradient(135deg,#f0c040,#e8a020);color:white;padding:7px 14px;border-radius:100px;font-size:12px;font-weight:700;margin-bottom:14px;}

/* TOAST */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:white;padding:10px 20px;border-radius:100px;font-size:13px;font-weight:500;opacity:0;transition:all .3s;pointer-events:none;z-index:9999;white-space:nowrap;}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* PRICING */
.pcard{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:20px;margin-bottom:14px;}

/* ── KnowMe VIP — effets premium plus prononcés (Marvens, 2026-08-10) :
   dégradé doré animé + léger reflet qui balaie la carte, réservé aux
   membres Premium actifs, pour un vrai "wow" à l'ouverture de l'onglet. ── */
.pcard-vip-active{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(230,200,119,.14),rgba(201,168,76,.05) 60%,rgba(230,200,119,.16));
  border-color:rgba(201,168,76,.4);
  box-shadow:0 8px 26px rgba(201,168,76,.18);
}
.pcard-vip-active::after{
  content:'';position:absolute;top:0;bottom:0;width:60%;left:-70%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  animation:pcardVipShine 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pcardVipShine{0%{left:-70%;}45%,100%{left:130%;}}
.pcard.feat{border-color:var(--gold);background:rgba(201,168,76,.03);}
.pbadge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:100px;margin-bottom:10px;}
.pb-free{background:rgba(122,158,135,.15);color:var(--sage);}
.pb-prem{background:linear-gradient(135deg,#f0c040,#e8a020);color:white;}
.pprice{font-family:Georgia,serif;font-size:28px;font-weight:900;}
.pper{font-size:13px;color:rgba(var(--text-rgb),.4);font-family:inherit;}
.pfeatures{margin-top:14px;display:flex;flex-direction:column;gap:7px;font-size:13px;}
.pfeatures-svg div{display:flex;align-items:center;gap:9px;}
.pfeatures-svg svg{width:16px;height:16px;color:var(--gold);flex-shrink:0;}



/* Dark mode surface cards */
:root.dark .qitem,:root.dark .pcard,:root.dark .defi-item,:root.dark .ritem,
:root.dark .dstat,:root.dark .ditem,:root.dark .anon-result,:root.dark .mtile{
  background:var(--surface);color:var(--text);border-color:var(--border);
}
:root.dark .dstat.hl{background:var(--gold);}
:root.dark .qopt,:root.dark .choice,:root.dark .gbtn{
  background:var(--surface);color:var(--text);border-color:var(--border);
}
:root.dark .qopt.on{background:rgba(201,168,76,.2);color:var(--gold);}
:root.dark .choice.on{background:rgba(var(--text-rgb),.08);}
:root.dark .gbtn.on{background:rgba(201,168,76,.15);}
:root.dark .ccard{background:var(--surface);color:var(--text);}
:root.dark .ccard.on{background:rgba(232,103,90,.1);}
:root.dark .finp,:root.dark .fta,:root.dark .qother-inp,:root.dark .other-inp,
:root.dark #quiz-ta,:root.dark #inp-defi,:root.dark #libre-message{
  background:var(--surface);color:var(--text);border-color:var(--border);
}
:root.dark .pcard{border-color:var(--border);}
:root.dark .pcard.feat{border-color:var(--gold);}
:root.dark .unlock-banner{background:linear-gradient(135deg,#c9a84c,#c88020);}
:root.dark #toast{background:var(--surface);color:var(--text);border:1px solid var(--border);}
:root.dark .dash-tab{background:var(--surface);color:var(--text);}
:root.dark .dash-tab.on{background:var(--text);color:var(--bg);}
:root.dark .s-step{color:var(--gold);}
:root.dark .s-title,:root.dark .s-sub{color:var(--text);}
:root.dark .s-sub{color:rgba(var(--text-rgb),.6);}
:root.dark .qtoggle span{color:rgba(var(--text-rgb),.5);}


/* IN-APP NOTIFICATION BANNER */
#inapp-notif{position:fixed;top:-80px;left:50%;transform:translateX(-50%);z-index:9998;background:var(--ink);color:white;padding:12px 20px;border-radius:14px;font-size:14px;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,.3);transition:top .4s cubic-bezier(.175,.885,.32,1.275);white-space:nowrap;max-width:90vw;text-align:center;}
#inapp-notif.show{top:16px;}


/* ══════════════════════════════
   KNOWME ANONYMA - MODE ANONYME
══════════════════════════════ */

/* Galaxy background for anon screen — version claire douce par défaut,
   version originale (étoilée, très sombre) restaurée en mode sombre. */
/* ── Mode Anonyme garde sa propre identité visuelle sombre/cosmique,
   comme convenu (Anonyme/Clash/Versus/Tournoi/Arcade = exceptions à
   l'identité générale blanc + violet). Avant, ce look sombre ne
   s'activait qu'en ":root.dark" — comme le bouton de bascule
   sombre/clair n'existe plus, on le rend permanent ici, isolé du reste
   de l'app via des variables CSS propres à cet écran. Corrige le bug
   remonté par Marvens le 2026-08-11 : les indices (pastilles 🆔📍📱)
   étaient en texte blanc sur un fond devenu clair par défaut — donc
   invisibles. ── */
#s-anonyma{
  --bg:#171513; --surface:#262420; --text:#f5f1ea; --text-rgb:245,241,234;
  --border:rgba(245,241,234,.12);
}
.anon-galaxy-bg {
  /* BUGFIX (audit 2026-08-23, "l'invité ne voit presque pas les textes,
     la plupart sont noirs") — CAUSE RÉELLE : chaque autre zone à fond
     sombre permanent de l'app (.tn-navy-bg, .arcade-cosmic-bg — voir plus
     bas dans ce fichier) redéfinit localement --bg/--text/--text-rgb/
     --border, pour que TOUT élément utilisant var(--text) à l'intérieur
     obtienne automatiquement la bonne couleur, quel que soit le thème
     clair/sombre global de l'app. .anon-galaxy-bg ne l'a jamais fait —
     c'est pour ça que le champ de saisie (déjà corrigé séparément), la
     salutation ("Tu vas répondre anonymement à..."), le titre d'en-tête
     et la bulle de question restaient tous en couleur de texte du thème
     CLAIR (quasi noir) sur ce fond sombre fixe. Correction root-cause à
     un seul endroit, dans le même style que les autres zones sombres de
     l'app, au lieu de corriger chaque élément un par un. */
  --text: #F5F3FA; --text-rgb: 245,243,250;
  background: linear-gradient(135deg, #0d0221 0%, #1a0533 25%, #0a1628 50%, #1a0a2e 75%, #080c1a 100%);
  position: relative;
  overflow: hidden;
}
.anon-galaxy-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, white 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 10%, white 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 50%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 10% 80%, rgba(180,120,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, rgba(120,180,255,.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 20%, rgba(255,200,100,.5) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
:root.dark .anon-galaxy-bg {
  background: linear-gradient(135deg, #0d0221 0%, #1a0533 25%, #0a1628 50%, #1a0a2e 75%, #080c1a 100%);
}
:root.dark .anon-galaxy-bg::before {
  background-image:
    radial-gradient(1px 1px at 20% 30%, white 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 10%, white 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 50%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 10% 80%, rgba(180,120,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, rgba(120,180,255,.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 20%, rgba(255,200,100,.5) 0%, transparent 100%);
}

/* LEVEL NAVIGATION */
.anon-level { display:none; flex-direction:column; flex:1; position:relative; z-index:1; }
.anon-level.active { display:flex; }

/* LEVEL 1 - Question list */
.anon-q-card {
  background: rgba(var(--text-rgb),.06);
  border: 1px solid rgba(var(--text-rgb),.12);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(10px);
}
.anon-q-card:hover { background: rgba(var(--text-rgb),.1); transform: translateY(-2px); }
.anon-q-card { position: relative; user-select: none; -webkit-user-select: none; }
.anon-q-card.pressing { background: rgba(232,103,90,.12); border-color: rgba(232,103,90,.4); }
.anon-q-card.pressing::after{
  content:'';
  position:absolute; left:0; bottom:0; height:3px;
  background: var(--rose); border-radius:0 0 16px 16px;
  width:0%;
  animation: pressfill 1.8s linear forwards;
}
@keyframes pressfill{ from{width:0%;} to{width:100%;} }
.anon-q-delete-row{
  display:none; align-items:center; gap:8px; margin-top:10px; padding-top:10px;
  border-top:1px solid rgba(var(--text-rgb),.12);
}
.anon-q-delete-row.show{ display:flex; }
.anon-q-delete-row span{ font-size:12px; color:rgba(var(--text-rgb),.6); flex:1; }
.anon-q-delete-row button{
  border:none; border-radius:100px; padding:7px 14px; font-size:12px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
.anon-q-delete-confirm{ background: var(--rose); color:var(--text); }
.anon-q-delete-cancel{ background: rgba(var(--text-rgb),.1); color:rgba(var(--text-rgb),.7); }
.anon-q-card-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.anon-q-card-meta { font-size: 12px; color: rgba(var(--text-rgb),.5); display:flex; gap:12px; }
.anon-q-card-meta span { display:flex; align-items:center; gap:4px; }
.anon-new-badge { background: var(--rose); color: var(--text); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 100px; margin-left: 8px; }

/* LEVEL 2 - Message list */
.anon-msg-card {
  background: rgba(var(--text-rgb),.06);
  border: 1px solid rgba(var(--text-rgb),.1);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.anon-msg-card:hover { background: rgba(var(--text-rgb),.1); }
.anon-msg-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #c9a84c, #e8675a);
  display: grid; place-items: center;
  font-size: 18px; flex-shrink: 0;
  border: 2px solid rgba(201,168,76,.4);
}
.anon-msg-text { font-size: 14px; color: rgba(var(--text-rgb),.85); line-height: 1.5; flex:1; }
.anon-msg-date { font-size: 10px; color: rgba(var(--text-rgb),.35); margin-top: 4px; }
.anon-msg-report-btn{
  flex-shrink:0; background:transparent; border:none; color:rgba(var(--text-rgb),.3);
  font-size:16px; cursor:pointer; padding:4px 6px; border-radius:8px; line-height:1;
}
.anon-msg-report-btn:hover{ color:#f87171; background:rgba(239,68,68,.12); }

/* LEVEL 3 - Card preview */
.anon-card-preview {
  width: 100%;
  max-width: 340px;
  margin: 0 auto 20px;
  aspect-ratio: 9/16;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* THEME SELECTOR */
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.theme-thumb {
  aspect-ratio: 9/16;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .2s;
  overflow: hidden;
  position: relative;
}
.theme-thumb.selected { border-color: var(--kw-violet); box-shadow: 0 0 0 2px var(--kw-violet); }
.theme-thumb.locked { opacity: .5; }
.theme-thumb.locked::after {
  content: '🔒';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 16px;
}

/* DARK HEADER for anon screens */
.anon-hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 12px;
  position: relative; z-index: 2;
  flex-shrink: 0;
}
.anon-hdr-back {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(var(--text-rgb),.1);
  border: 1px solid rgba(var(--text-rgb),.2);
  color: var(--text); cursor: pointer;
  display: grid; place-items: center; font-size: 16px;
  flex-shrink: 0;
}
.anon-hdr-title { font-size: 18px; font-weight: 700; color: var(--text); flex:1; }
.anon-hdr-sub { font-size: 12px; color: rgba(var(--text-rgb),.45); margin-top: 1px; }
.anon-body { padding: 0 18px 100px; overflow-y: auto; flex:1; position: relative; z-index: 1; }

/* Create question button */
.btn-anon-create {
  width: 100%; padding: 15px;
  background: linear-gradient(135deg, rgba(201,168,76,.2), rgba(201,168,76,.1));
  border: 1px solid rgba(201,168,76,.4);
  border-radius: 14px; color: var(--gold);
  font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: all .2s; margin-bottom: 20px;
}
.btn-anon-create:hover { background: rgba(201,168,76,.2); }

/* Card download button */
.btn-download-card {
  width: 100%; padding: 15px;
  background: linear-gradient(135deg, var(--gold), #e8a020);
  border: none; border-radius: 14px;
  color: var(--ink); font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* Anon create question form */
.anon-create-form {
  background: rgba(var(--text-rgb),.06);
  border: 1px solid rgba(var(--text-rgb),.15);
  border-radius: 18px; padding: 20px;
  backdrop-filter: blur(10px);
  margin-bottom: 16px;
}
.anon-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(var(--text-rgb),.45); margin-bottom: 6px; display: block; }
.anon-input {
  width: 100%; padding: 12px 14px;
  background: rgba(var(--text-rgb),.08);
  border: 1px solid rgba(var(--text-rgb),.15);
  border-radius: 10px;
  /* BUGFIX (audit 2026-08-22, "texte noir sur fond sombre en Mode
     Anonyme") — CAUSE RÉELLE : color:var(--text) suivait le thème
     clair/sombre GLOBAL de l'app (donc presque noir en thème clair),
     alors que .anon-galaxy-bg — le fond de TOUS les écrans où
     .anon-input est utilisé (s-anonyma, s-anon-player) — est un dégradé
     sombre fixe, volontairement identique en clair et en sombre (voir
     :root.dark .anon-galaxy-bg juste au-dessus, à l'identique). Le champ
     n'a donc jamais dû suivre le thème : il vit uniquement sur fond
     sombre. Couleur de texte fixée en blanc, caret-color assorti pour
     qu'il reste visible pendant la saisie. */
  color: #F5F3FA; caret-color: #F5F3FA;
  font-family: inherit; font-size: 15px; outline: none;
  margin-bottom: 14px; transition: border-color .2s;
}
.anon-input::placeholder { color: rgba(245,243,250,.42); }
.anon-input:focus { border-color: var(--gold); }
.anon-textarea { min-height: 70px; resize: none; }
/* Autofill mobile (Safari/Chrome) impose son propre fond + texte noir en
   ignorant `color` — sans ce correctif le champ redeviendrait illisible
   dès qu'un clavier mobile propose une suggestion/autofill dessus. */
.anon-input:-webkit-autofill,
.anon-input:-webkit-autofill:hover,
.anon-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #F5F3FA;
  -webkit-box-shadow: 0 0 0 1000px rgba(20,14,35,.9) inset;
  caret-color: #F5F3FA;
}

/* Preset questions for anon */
.preset-q-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.preset-q-item {
  padding: 12px 14px;
  background: rgba(var(--text-rgb),.05);
  border: 1px solid rgba(var(--text-rgb),.1);
  border-radius: 10px; color: rgba(var(--text-rgb),.8);
  font-size: 13px; cursor: pointer; transition: all .2s;
}
.preset-q-item.selected, .preset-q-item:hover {
  background: rgba(var(--kw-violet-rgb),.12);
  border-color: rgba(var(--kw-violet-rgb),.4);
  color: var(--kw-violet);
}

/* Light/Dark switch for Model 2 */
.mode-switch {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.mode-switch-btn {
  flex:1; padding: 10px;
  background: rgba(var(--text-rgb),.06);
  border: 1px solid rgba(var(--text-rgb),.15);
  border-radius: 10px; color: rgba(var(--text-rgb),.6);
  font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .2s;
}
.mode-switch-btn.on {
  background: rgba(var(--kw-violet-rgb),.15);
  border-color: var(--kw-violet); color: var(--kw-violet);
}

/* DARK MODE TOGGLE */
.dark-toggle{position:fixed;top:12px;right:12px;z-index:9999;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:18px;cursor:grab;display:grid;place-items:center;box-shadow:0 2px 16px rgba(0,0,0,.2);transition:opacity .2s,box-shadow .2s;opacity:.8;touch-action:none;user-select:none;}
.dark-toggle:active{cursor:grabbing;box-shadow:0 4px 24px rgba(0,0,0,.3);opacity:1;}
.dark-toggle.dragging{transition:none;}
.dark-toggle.spin{animation:darkToggleSpin .5s ease;}
@keyframes darkToggleSpin{
  0%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(180deg) scale(1.15);}
  100%{transform:rotate(360deg) scale(1);}
}
.music-toggle{position:fixed;top:60px;right:12px;z-index:9999;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-size:18px;cursor:pointer;display:none;place-items:center;box-shadow:0 2px 16px rgba(0,0,0,.2);transition:opacity .2s,box-shadow .2s;opacity:.8;}
.music-toggle:active{box-shadow:0 4px 24px rgba(0,0,0,.3);opacity:1;}
.music-toggle.muted{opacity:.45;}

/* SPINNER */
.spinner{width:36px;height:36px;border:3px solid rgba(250,247,242,.1);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;}
/* FIX (Marvens, 2026-08-13, point 9) — écran de démarrage, voir index.html.
   Fond clair KnowMe (pas #ink) puisque c'est la toute première chose vue,
   avant même que le thème sombre/clair choisi par l'utilisateur ne soit
   appliqué — donc toujours cohérent avec la charte "fond clair par défaut". */
#km-boot-loader{
  position:fixed; inset:0; z-index:999999; background:#faf7f2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color:#1a1206;
}
#km-boot-loader .spinner{border-color:rgba(26,18,6,.1);border-top-color:var(--gold);}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-screen{position:fixed;inset:0;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--cream);z-index:9998;}

/* ══ ANONYMA — "NUAGE" FLOATING ANIMATION (requested exact snippet) ══ */
.nuage-animation {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
/* Legacy alias so existing HTML using the old class still works */
.anon-cloud-float { animation: float 3s ease-in-out infinite; }

/* ══ ANONYMA — invite-text greeting, fun/pro/modern treatment ══ */
.anon-invite-greeting{
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:800;
  font-size:19px;
  line-height:1.4;
  text-align:center;
  background:linear-gradient(120deg,#f0c869 0%,#e8675a 60%,#ff8d78 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:.2px;
  transform:rotate(-1.2deg);
  margin:0 0 18px;
  padding:0 12px;
  text-shadow:0 2px 18px rgba(232,103,90,.25);
}
/* ══════════════════════════════════════════════════════
   V1.5 — AUTH SCREEN
   Ce bloc définit d'abord la version CLAIRE (par défaut) de l'écran de
   connexion, puis restaure la version SOMBRE premium d'origine via des
   règles :root.dark — c'est le fix pour "le bouton clair/sombre ne fait
   rien sur l'écran de connexion" (le fond était codé en dur en #06040f
   et ignorait totalement le thème).
══════════════════════════════════════════════════════ */

/* ══ AUTH SCREEN — PREMIUM ANIMATED DESIGN (mode clair) ══ */
#s-auth{
  background:#06040f;
  position:relative;overflow:hidden;
  align-items:center;justify-content:center;
  padding:0;
}
#s-auth.auth-space{background:linear-gradient(180deg,rgba(6,4,15,.55),rgba(6,4,15,.75)),url('assets/img/kw-auth-bg.webp') center/cover no-repeat;}

/* ── Aurora animated background ── */
.auth-aurora{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.auth-aurora-orb{
  position:absolute;border-radius:50%;filter:blur(80px);
  animation:auroraFloat 8s ease-in-out infinite;
}
.auth-aurora-orb:nth-child(1){
  width:420px;height:420px;
  background:radial-gradient(circle,rgba(168,85,247,0.22),transparent 70%);
  top:-100px;left:-80px;animation-delay:0s;animation-duration:9s;
}
.auth-aurora-orb:nth-child(2){
  width:360px;height:360px;
  background:radial-gradient(circle,rgba(244,63,94,0.18),transparent 70%);
  top:25%;right:-100px;animation-delay:-3s;animation-duration:11s;
}
.auth-aurora-orb:nth-child(3){
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(59,130,246,0.16),transparent 70%);
  bottom:18%;left:-60px;animation-delay:-6s;animation-duration:13s;
}
.auth-aurora-orb:nth-child(4){
  width:240px;height:240px;
  background:radial-gradient(circle,rgba(16,185,129,0.14),transparent 70%);
  bottom:-60px;right:15%;animation-delay:-2s;animation-duration:10s;
}
.auth-space .auth-aurora-orb:nth-child(1){background:radial-gradient(circle,rgba(168,85,247,0.55),transparent 70%);}
.auth-space .auth-aurora-orb:nth-child(2){background:radial-gradient(circle,rgba(244,63,94,0.45),transparent 70%);}
.auth-space .auth-aurora-orb:nth-child(3){background:radial-gradient(circle,rgba(59,130,246,0.38),transparent 70%);}
.auth-space .auth-aurora-orb:nth-child(4){background:radial-gradient(circle,rgba(16,185,129,0.32),transparent 70%);}
@keyframes auroraFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(20px,-30px) scale(1.08);}
  66%{transform:translate(-15px,20px) scale(0.95);}
}

/* Noise texture overlay */
.auth-noise{
  position:absolute;inset:0;z-index:1;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
.auth-space .auth-noise{opacity:.04;}

/* Grid lines subtle */
.auth-grid{
  position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(rgba(15,14,12,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,14,12,.035) 1px,transparent 1px);
  background-size:60px 60px;
}
.auth-space .auth-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
}

/* ── Particules lumineuses discrètes (donnent une sensation de vie) ── */
.auth-particles{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;}
.auth-particle{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#a855f7;box-shadow:0 0 6px 1px rgba(168,85,247,.7);
  opacity:0;animation:particleDrift linear infinite;
}
.auth-space .auth-particle{box-shadow:0 0 8px 1.5px rgba(168,85,247,.9);}
.auth-particle.p1{left:12%;top:80%;animation-duration:14s;animation-delay:0s;}
.auth-particle.p2{left:82%;top:70%;animation-duration:18s;animation-delay:-3s;background:#f43f5e;box-shadow:0 0 6px 1px rgba(244,63,94,.7);}
.auth-particle.p3{left:25%;top:15%;animation-duration:16s;animation-delay:-7s;}
.auth-particle.p4{left:70%;top:20%;animation-duration:20s;animation-delay:-11s;background:#60a5fa;box-shadow:0 0 6px 1px rgba(96,165,250,.7);}
.auth-particle.p5{left:50%;top:90%;animation-duration:15s;animation-delay:-5s;}
.auth-particle.p6{left:90%;top:40%;animation-duration:19s;animation-delay:-9s;background:#f43f5e;box-shadow:0 0 6px 1px rgba(244,63,94,.7);}
@keyframes particleDrift{
  0%{opacity:0;transform:translateY(0) scale(.6);}
  10%{opacity:.8;}
  50%{transform:translateY(-70px) scale(1);}
  90%{opacity:.5;}
  100%{opacity:0;transform:translateY(-140px) scale(.6);}
}

/* ── Halo lumineux derrière le logo ── */
.auth-logo-halo{
  position:absolute;left:50%;top:50%;
  width:280px;height:280px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(168,85,247,.28),rgba(244,63,94,.12) 45%,transparent 72%);
  filter:blur(30px);border-radius:50%;
  z-index:-1;
  animation:haloPulse 5s ease-in-out infinite;
}
.auth-space .auth-logo-halo{background:radial-gradient(circle,rgba(168,85,247,.4),rgba(244,63,94,.18) 45%,transparent 72%);}
@keyframes haloPulse{
  0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.12);}
}

/* ── Main content ── */
.auth-content{
  position:relative;z-index:10;
  width:100%;max-width:420px;
  padding:0 24px;
  display:flex;flex-direction:column;align-items:center;
}

/* ── Logo & badge ── */
.auth-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(168,85,247,.10);border:1px solid rgba(168,85,247,.3);
  border-radius:100px;padding:5px 14px;margin-bottom:20px;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:#9333ea;
  opacity:0;animation:authFadeUp .6s ease forwards;animation-delay:.1s;
  position:relative;overflow:hidden;
}
.auth-badge::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  animation:badgeShimmer 3.2s ease-in-out infinite;
}
.auth-space .auth-badge::after{background:linear-gradient(120deg,transparent,rgba(255,255,255,.25),transparent);}
@keyframes badgeShimmer{
  0%{left:-60%;}
  40%,100%{left:130%;}
}
.auth-space .auth-badge{background:rgba(168,85,247,.12);color:rgba(168,85,247,.9);}
.auth-badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:#a855f7;
  box-shadow:0 0 8px #a855f7;
  animation:pulseDot 1.5s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);}}

.auth-logo-wrap{
  position:relative;
  text-align:center;margin-bottom:10px;
  opacity:0;transform:scale(.85);
  animation:authLogoIntro .8s cubic-bezier(.2,.9,.3,1.3) forwards;animation-delay:.2s;
}
.auth-logo{
  font-family:Georgia,serif;
  font-size:clamp(52px,14vw,76px);
  font-weight:900;letter-spacing:-3px;line-height:1;
  background:linear-gradient(135deg,#e879f9 0%,#f43f5e 40%,#fb923c 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 30px rgba(168,85,247,.4));
  animation:authLogoGlow 4s ease-in-out .9s infinite;
}
@keyframes authLogoIntro{
  0%{opacity:0;transform:scale(.85);}
  60%{opacity:1;transform:scale(1.04);}
  100%{opacity:1;transform:scale(1);}
}
/* Léger souffle continu une fois l'entrée terminée (Marvens, 2026-08-11,
   point 3 : "davantage d'animations élégantes... sans surcharger") —
   CSS pur, aucun coût de performance notable, s'arrête tout seul si
   l'utilisateur préfère moins de mouvement (voir prefers-reduced-motion
   plus bas). */
@keyframes authLogoGlow{
  0%,100%{ filter:drop-shadow(0 0 30px rgba(168,85,247,.4)); }
  50%{ filter:drop-shadow(0 0 44px rgba(168,85,247,.65)); }
}
@media (prefers-reduced-motion: reduce){
  .auth-logo{ animation:none; }
}
.auth-logo-sub{
  font-size:12px;color:rgba(15,14,12,.35);
  letter-spacing:4px;text-transform:uppercase;margin-top:4px;
}
.auth-space .auth-logo-sub{color:rgba(255,255,255,.3);}

/* ── Typewriter tagline ── */
.auth-tagline-wrap{
  margin-bottom:36px;text-align:center;min-height:22px;
  opacity:0;animation:authFadeUp .6s ease forwards;animation-delay:.45s;
}
.auth-tagline{
  font-size:14px;color:rgba(15,14,12,.6);
  letter-spacing:.3px;
}
.auth-space .auth-tagline{color:rgba(255,255,255,.55);}
.auth-cursor{
  display:inline-block;width:2px;height:14px;
  background:rgba(168,85,247,.8);margin-left:2px;vertical-align:middle;
  animation:blinkCursor .7s step-end infinite;
}
@keyframes blinkCursor{0%,100%{opacity:1;}50%{opacity:0;}}

/* ── Lang bar ── */
.auth-lang-bar{
  display:flex;gap:6px;justify-content:center;
  margin-bottom:28px;flex-wrap:wrap;
  opacity:0;animation:authFadeUp .6s ease forwards;animation-delay:.35s;
}
.auth-lbtn{
  background:rgba(15,14,12,.045);
  border:1px solid rgba(15,14,12,.1);
  color:rgba(15,14,12,.55);border-radius:100px;
  padding:5px 13px;font-size:11px;font-weight:700;
  cursor:pointer;font-family:inherit;
  transition:all .2s;letter-spacing:.3px;
}
.auth-space .auth-lbtn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.5);}
.auth-lbtn.on{
  background:rgba(168,85,247,.16);
  border-color:rgba(168,85,247,.5);
  color:#9333ea;
  box-shadow:0 0 12px rgba(168,85,247,.15);
}
.auth-space .auth-lbtn.on{background:rgba(168,85,247,.2);color:#c084fc;box-shadow:0 0 12px rgba(168,85,247,.2);}
.auth-lbtn:hover:not(.on){background:rgba(15,14,12,.08);color:rgba(15,14,12,.85);}
.auth-space .auth-lbtn:hover:not(.on){background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);}

/* ── Divider ── */
.auth-divider{
  width:100%;display:flex;align-items:center;gap:12px;
  margin-bottom:16px;
  opacity:0;animation:authFadeUp .6s ease forwards;animation-delay:.55s;
}
.auth-divider-line{flex:1;height:1px;background:rgba(15,14,12,.08);}
.auth-space .auth-divider-line{background:rgba(255,255,255,.08);}
.auth-divider-text{font-size:11px;color:rgba(15,14,12,.3);letter-spacing:1px;white-space:nowrap;}
.auth-space .auth-divider-text{color:rgba(255,255,255,.25);}

/* ── Auth buttons ── */
.auth-btn{
  width:100%;display:flex;align-items:center;gap:16px;
  padding:16px 20px;border-radius:18px;margin-bottom:10px;
  border:1px solid rgba(15,14,12,.08);cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:600;color:#0f0e0c;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:all .28s cubic-bezier(.4,0,.2,1);text-align:left;
  box-shadow:0 2px 20px rgba(15,14,12,.08),inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0;
  position:relative;overflow:hidden;
}
.auth-space .auth-btn{
  border-color:rgba(255,255,255,.09);color:white;
  background:rgba(255,255,255,.05);
  box-shadow:0 2px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
}
.auth-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,0));
  opacity:0;transition:opacity .25s;
}
.auth-space .auth-btn::before{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,0));}
.auth-btn:hover::before{opacity:1;}
.auth-btn:hover{
  background:rgba(255,255,255,.85);
  border-color:rgba(15,14,12,.12);
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(15,14,12,.12),inset 0 1px 0 rgba(255,255,255,.9);
}
.auth-space .auth-btn:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);
}
.auth-btn:active{transform:translateY(0);transition-duration:.1s;}
.auth-btn.btn-1{animation:authFadeUp .55s ease forwards;animation-delay:.65s;}
.auth-btn.btn-2{animation:authFadeUp .55s ease forwards;animation-delay:.75s;}
.auth-btn.btn-3{animation:authFadeUp .55s ease forwards;animation-delay:.85s;}
.auth-btn.btn-4{animation:authFadeUp .55s ease forwards;animation-delay:.95s;}
/* Google button accent */
.auth-btn.btn-1:hover{border-color:rgba(66,133,244,.35);box-shadow:0 8px 32px rgba(66,133,244,.15),inset 0 1px 0 rgba(255,255,255,.7);}
.auth-space .auth-btn.btn-1:hover{box-shadow:0 8px 32px rgba(66,133,244,.15),inset 0 1px 0 rgba(255,255,255,.1);}
/* Apple button accent */
.auth-btn.btn-2:hover{border-color:rgba(15,14,12,.25);}
.auth-space .auth-btn.btn-2:hover{border-color:rgba(255,255,255,.3);}
/* Facebook button accent */
.auth-btn.btn-3:hover{border-color:rgba(24,119,242,.35);box-shadow:0 8px 32px rgba(24,119,242,.15),inset 0 1px 0 rgba(255,255,255,.7);}
.auth-space .auth-btn.btn-3:hover{box-shadow:0 8px 32px rgba(24,119,242,.15),inset 0 1px 0 rgba(255,255,255,.1);}
/* Email button accent */
.auth-btn.btn-4:hover{border-color:rgba(201,168,76,.35);box-shadow:0 8px 32px rgba(201,168,76,.12),inset 0 1px 0 rgba(255,255,255,.7);}
.auth-space .auth-btn.btn-4:hover{box-shadow:0 8px 32px rgba(201,168,76,.12),inset 0 1px 0 rgba(255,255,255,.1);}

.auth-btn-ico{font-size:22px;flex-shrink:0;width:28px;text-align:center;}
.auth-btn-lbl{flex:1;font-size:14px;}
.auth-btn-arr{
  width:28px;height:28px;border-radius:50%;
  background:rgba(15,14,12,.05);border:1px solid rgba(15,14,12,.08);
  display:grid;place-items:center;font-size:13px;color:rgba(15,14,12,.5);
  transition:all .2s;flex-shrink:0;
}
.auth-space .auth-btn-arr{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.5);}
.auth-btn:hover .auth-btn-arr{
  background:rgba(15,14,12,.1);color:#0f0e0c;
  transform:translateX(2px);
}
.auth-space .auth-btn:hover .auth-btn-arr{background:rgba(255,255,255,.15);color:white;}

/* ── Legal ── */
.auth-legal{
  margin-top:20px;text-align:center;
  font-size:11px;color:rgba(15,14,12,.35);line-height:1.8;
  opacity:0;animation:authFadeUp .6s ease forwards;animation-delay:1.05s;
}
.auth-space .auth-legal{color:rgba(255,255,255,.22);}
.auth-legal a{color:rgba(201,168,76,.8);text-decoration:none;transition:color .2s;}
.auth-legal a:hover{color:#c9a84c;}

/* ── Animations ── */
@keyframes authFadeUp{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}

/* ── Email sub-screen ── */
#s-auth-email{
  background:linear-gradient(160deg,#faf7f2 0%,#f3edfb 45%,#eaf1fb 100%);
  color:#0f0e0c;
  padding:0;
  position:relative;overflow:hidden;
  justify-content:center;align-items:center;
}
#s-auth-email.auth-space{background:linear-gradient(180deg,rgba(6,4,15,.6),rgba(6,4,15,.8)),url('assets/img/kw-auth-bg.webp') center/cover no-repeat;color:white;}
.auth-email-card{
  width:100%;max-width:420px;padding:40px 28px;
  position:relative;z-index:10;
}
.auth-email-back{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(15,14,12,.05);border:1px solid rgba(15,14,12,.1);
  border-radius:100px;padding:8px 16px;margin-bottom:28px;
  color:rgba(15,14,12,.7);font-size:13px;cursor:pointer;
  transition:all .2s;font-family:inherit;
}
.auth-space .auth-email-back{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.7);}
.auth-email-back:hover{background:rgba(15,14,12,.09);color:#0f0e0c;}
.auth-space .auth-email-back:hover{background:rgba(255,255,255,.12);color:white;}
.auth-email-title{font-size:26px;font-weight:800;margin-bottom:6px;}
.auth-email-sub{font-size:13px;color:rgba(15,14,12,.45);margin-bottom:28px;line-height:1.5;}
.auth-space .auth-email-sub{color:rgba(255,255,255,.4);}
.auth-email-input{
  width:100%;padding:15px 18px;
  background:rgba(15,14,12,.035);
  border:1px solid rgba(15,14,12,.1);
  border-radius:14px;color:#0f0e0c;font-size:15px;
  font-family:inherit;margin-bottom:12px;
  transition:border-color .2s,box-shadow .2s;
  box-sizing:border-box;
}
.auth-space .auth-email-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:white;}
.auth-email-input:focus{
  outline:none;
  border-color:rgba(168,85,247,.5);
  box-shadow:0 0 0 3px rgba(168,85,247,.12);
}
.auth-email-input::placeholder{color:rgba(15,14,12,.3);}
.auth-space .auth-email-input::placeholder{color:rgba(255,255,255,.25);}
.auth-email-btn{
  width:100%;padding:16px;border-radius:14px;border:none;
  background:linear-gradient(135deg,#a855f7,#f43f5e);
  color:white;font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;margin-top:4px;transition:all .25s;
  box-shadow:0 4px 24px rgba(168,85,247,.35);
}
.auth-email-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(168,85,247,.5);}
.auth-email-btn:active{transform:translateY(0);}
.auth-email-toggle{
  width:100%;text-align:center;margin-top:16px;
  color:rgba(15,14,12,.4);font-size:13px;cursor:pointer;
  background:none;border:none;font-family:inherit;transition:color .2s;
}
.auth-space .auth-email-toggle{color:rgba(255,255,255,.35);}
.auth-email-toggle:hover{color:rgba(15,14,12,.75);}
.auth-space .auth-email-toggle:hover{color:rgba(255,255,255,.7);}
.auth-email-toggle span{color:rgba(168,85,247,.8);}

/* ══ LEGAL MODAL ══ */
.legal-modal{
  position:fixed;inset:0;z-index:10000;
  display:none;align-items:flex-end;
}
.legal-modal.open{display:flex;}
.legal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);}
.legal-sheet{
  position:relative;z-index:1;width:100%;
  background:var(--bg);border-radius:28px 28px 0 0;
  padding:20px 24px 40px;max-height:90vh;overflow-y:auto;
}
.legal-sheet-handle{
  width:40px;height:4px;border-radius:2px;
  background:rgba(var(--text-rgb),.15);margin:0 auto 20px;
}
.legal-sheet h2{font-family:Georgia,serif;font-size:20px;margin-bottom:16px;color:var(--kw-violet);}
.legal-sheet .legal-date{font-size:11px;color:rgba(var(--text-rgb),.4);margin-bottom:20px;}
.legal-sheet h3{font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--kw-violet);margin:20px 0 8px;}
.legal-sheet p,.legal-sheet li{font-size:13px;line-height:1.7;color:rgba(var(--text-rgb),.85);margin-bottom:8px;}
.legal-sheet ul{padding-left:18px;margin-bottom:8px;}
.legal-close-btn{
  width:100%;padding:14px;border-radius:100px;
  background:var(--kw-violet);color:#fff;border:none;
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
  margin-top:24px;
}

/* ══ TERMS ACCEPTANCE POPUP (new user) ══ */
.terms-popup{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);
}
.terms-popup.open{display:flex;}
.terms-box{
  background:var(--bg);border-radius:24px;padding:32px 24px;
  max-width:380px;width:100%;text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.terms-box-ico{font-size:44px;margin-bottom:12px;}
.terms-box h2{font-family:Georgia,serif;font-size:22px;margin-bottom:8px;}
.terms-box p{font-size:13px;color:rgba(var(--text-rgb),.6);line-height:1.7;margin-bottom:16px;}
.terms-rules{
  background:var(--surface);border-radius:14px;padding:14px 16px;
  text-align:left;margin-bottom:20px;
}
.terms-rules li{font-size:12px;line-height:1.8;color:rgba(var(--text-rgb),.75);}
.terms-accept-btn{
  width:100%;padding:16px;border-radius:100px;border:none;
  background:linear-gradient(135deg,#a855f7,#f43f5e);
  color:white;font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;letter-spacing:.3px;
}

/* ══ POPUP PERMISSION NOTIFICATIONS PUSH (2026-08-23) ══
   Identité visuelle KnowMe : blanc + violet, même dégradé de marque
   (#12078C → #7A0CC2 → #E016C9) que le reste de l'app — voir mémoire
   produit / doc design. Animation légère (scale+fade), jamais agressive :
   pas de shake, pas de couleur alarmante, un seul appel à l'action clair
   + une sortie discrète ("Plus tard"). */
.push-prompt-popup{
  position:fixed;inset:0;z-index:9998;
  display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(18,7,140,.35);backdrop-filter:blur(6px);
}
.push-prompt-popup.open{display:flex;animation:pushPromptFadeIn .25s ease;}
@keyframes pushPromptFadeIn{from{opacity:0;}to{opacity:1;}}
.push-prompt-box{
  background:#ffffff;border-radius:26px;padding:30px 26px 24px;
  max-width:360px;width:100%;text-align:center;
  box-shadow:0 24px 70px rgba(18,7,140,.35);
  animation:pushPromptPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pushPromptPop{from{transform:scale(.9);opacity:0;}to{transform:scale(1);opacity:1;}}
.push-prompt-ico{
  font-size:38px;width:72px;height:72px;margin:0 auto 14px;
  display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,#12078C,#7A0CC2,#E016C9);
}
.push-prompt-box h2{font-size:19px;font-weight:800;color:#1B1230;margin:0 0 8px;}
.push-prompt-box p{font-size:13.5px;color:#6B6280;line-height:1.6;margin:0 0 22px;}
.push-prompt-accept-btn{
  width:100%;padding:15px;border-radius:100px;border:none;
  background:linear-gradient(135deg,#12078C,#7A0CC2,#E016C9);
  color:#fff;font-family:inherit;font-size:14px;font-weight:800;
  letter-spacing:.3px;cursor:pointer;margin-bottom:10px;
  box-shadow:0 8px 20px rgba(122,12,194,.35);
}
.push-prompt-later-btn{
  width:100%;padding:13px;border-radius:100px;border:none;
  background:transparent;color:#8B7FA8;font-family:inherit;
  font-size:13px;font-weight:700;cursor:pointer;
}

/* ══ REPORT MODAL ══ */
.report-modal{
  position:fixed;inset:0;z-index:10000;
  display:none;align-items:flex-end;
}
.report-modal.open{display:flex;}
.report-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.report-sheet{
  position:relative;z-index:1;width:100%;
  background:var(--bg);border-radius:28px 28px 0 0;
  padding:20px 24px 40px;
}
.report-sheet h3{font-size:17px;font-weight:700;margin-bottom:4px;}
.report-sheet p{font-size:13px;color:rgba(var(--text-rgb),.5);margin-bottom:20px;}
.report-reason{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:14px;border:1.5px solid var(--border);
  background:var(--surface);margin-bottom:10px;cursor:pointer;
  transition:all .2s;font-family:inherit;text-align:left;width:100%;
}
.report-reason:hover{border-color:var(--rose);}
.report-reason.on{border-color:var(--rose);background:rgba(232,103,90,.06);}
.report-reason-ico{font-size:20px;flex-shrink:0;}
.report-reason-lbl{font-size:14px;font-weight:600;flex:1;}
.report-send-btn{
  width:100%;padding:14px;border-radius:100px;border:none;
  background:var(--rose);color:white;font-family:inherit;
  font-size:15px;font-weight:700;cursor:pointer;margin-top:8px;
}
.report-flag-btn{
  position:absolute;top:10px;right:10px;
  background:transparent;border:none;cursor:pointer;
  font-size:16px;opacity:.5;transition:opacity .2s;padding:4px;
}
.report-flag-btn:hover{opacity:1;}

/* ══ CLASH OR COMPLIMENT — NEON BUTTONS ══ */
.clash-btn-row{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding:0 4px;
}
.clash-neon-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:20px 12px;border-radius:20px;border:2px solid;
  cursor:pointer;font-family:inherit;transition:all .25s;
  position:relative;overflow:hidden;
}
.clash-neon-btn::before{
  content:'';position:absolute;inset:0;opacity:.12;
  background:radial-gradient(circle at 50% 30%,white,transparent 70%);
}
.clash-neon-btn .coc-ico{font-size:32px;line-height:1;}
.clash-neon-btn .coc-lbl{
  font-size:15px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
}
/* Clash — Rouge néon */
.btn-clash{
  background:rgba(220,38,38,.15);
  border-color:#ef4444;color:#fca5a5;
  box-shadow:0 0 18px rgba(239,68,68,.4),0 0 40px rgba(239,68,68,.15),inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-clash:hover,.btn-clash:active{
  background:rgba(220,38,38,.28);
  box-shadow:0 0 28px rgba(239,68,68,.6),0 0 60px rgba(239,68,68,.25),inset 0 1px 0 rgba(255,255,255,.15);
  transform:scale(1.03);
}
/* Compliment — Vert néon */
.btn-compliment{
  background:rgba(5,150,105,.15);
  border-color:#10b981;color:#6ee7b7;
  box-shadow:0 0 18px rgba(16,185,129,.4),0 0 40px rgba(16,185,129,.15),inset 0 1px 0 rgba(255,255,255,.1);
}
.btn-compliment:hover,.btn-compliment:active{
  background:rgba(5,150,105,.28);
  box-shadow:0 0 28px rgba(16,185,129,.6),0 0 60px rgba(16,185,129,.25),inset 0 1px 0 rgba(255,255,255,.15);
  transform:scale(1.03);
}
/* ══ EMOJI RAIN ══ */
.emoji-particle{
  position:fixed;pointer-events:none;z-index:9998;
  font-size:28px;animation:emojiFloat 1.8s ease-out forwards;
}
@keyframes emojiFloat{
  0%{transform:translateY(0) scale(1) rotate(0deg);opacity:1;}
  80%{opacity:.8;}
  100%{transform:translateY(-55vh) scale(0.4) rotate(var(--r,15deg));opacity:0;}
}

/* ══ CLASH MODE SCREENS ══ */
/* FIX (Marvens, 2026-08-15) : Clash or Compliment (création + historique)
   revient à son thème sombre d'origine, à la demande explicite de
   Marvens — exception à la règle blanc + violet du 10 août, comme
   Tournoi Elite/Arcade le font déjà pour leur propre ambiance. */
#s-clash,#s-clash-history{
  --bg:#0a0a0f; --surface:#170a0a; --text:#faf7f2; --text-rgb:250,247,242; --border:rgba(250,247,242,.12);
  background:var(--bg);color:var(--text);
}
/* L'écran de VOTE de l'invité (#s-clash-guest) a son propre fond "Neon
   Dual" volontairement sombre en permanence (voir #coc-guest-body plus
   bas) — même principe, variables locales pour que ce fond garde son
   ambiance et reste lisible, sans dépendre du thème global. */
#s-clash-guest{
  --bg:#0a0a0f; --surface:#170a0a; --text:#faf7f2; --text-rgb:250,247,242; --border:rgba(250,247,242,.12);
  background:var(--bg);color:var(--text);
}
.clash-screen-hdr{
  display:flex;align-items:center;gap:12px;
  padding:16px 16px 0;flex-shrink:0;
}
.clash-screen-hdr h1{
  font-family:Georgia,serif;font-size:20px;font-weight:700;flex:1;
}
.coc-badge{
  background:linear-gradient(135deg,#ef4444,#10b981);
  color:white;font-size:10px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;padding:3px 10px;border-radius:100px;
}
.coc-card-preview{
  background:rgba(var(--text-rgb),.04);border:1px solid rgba(var(--text-rgb),.1);
  border-radius:20px;overflow:hidden;margin:16px;
  min-height:220px;display:flex;align-items:center;justify-content:center;
  position:relative;
}
.coc-card-preview canvas{width:100%;display:block;}
.coc-card-preview .coc-placeholder{
  text-align:center;padding:32px;color:rgba(var(--text-rgb),.3);
}
.coc-card-placeholder-ico{font-size:40px;margin-bottom:8px;}
.coc-option-tabs{
  display:flex;gap:8px;margin:0 16px 16px;
}
.coc-tab{
  flex:1;padding:10px;border-radius:12px;border:1.5px solid rgba(var(--text-rgb),.12);
  background:transparent;color:rgba(var(--text-rgb),.5);font-family:inherit;
  font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;
}
.coc-tab.on{
  border-color:rgba(168,85,247,.6);background:rgba(168,85,247,.12);color:#c084fc;
}
.coc-punchline-box{
  background:rgba(var(--text-rgb),.05);border:1.5px solid rgba(var(--text-rgb),.1);
  border-radius:16px;margin:0 16px 14px;padding:14px;
}
.coc-punchline-box textarea{
  width:100%;background:transparent;border:none;color:var(--text);
  font-family:inherit;font-size:14px;resize:none;outline:none;
  min-height:70px;
}
.coc-punchline-box textarea::placeholder{color:rgba(var(--text-rgb),.3);}
.coc-suggestions{display:flex;flex-direction:column;gap:6px;margin:0 16px 16px;}
.coc-suggestion-btn{
  background:rgba(var(--text-rgb),.04);border:1px solid rgba(var(--text-rgb),.08);
  border-radius:10px;padding:10px 14px;color:rgba(var(--text-rgb),.7);
  font-family:inherit;font-size:13px;cursor:pointer;text-align:left;
  transition:all .2s;
}
.coc-suggestion-btn:hover{background:rgba(var(--text-rgb),.08);border-color:rgba(var(--text-rgb),.18);}
/* History cards */
.coc-history-card{
  background:rgba(var(--text-rgb),.05);border:1px solid rgba(var(--text-rgb),.1);
  border-radius:16px;padding:16px;margin:0 16px 12px;position:relative;
}
.coc-history-score{
  display:flex;gap:16px;margin-bottom:12px;
}
.coc-score-clash{color:#f87171;font-weight:700;font-size:15px;}
.coc-score-comp{color:#34d399;font-weight:700;font-size:15px;}
.coc-message-item{
  background:rgba(var(--text-rgb),.04);border-radius:10px;
  padding:10px 12px;margin-bottom:6px;font-size:13px;
}
.coc-message-clash{border-left:3px solid #ef4444;color:rgba(var(--text-rgb),.7);}
.coc-message-comp{border-left:3px solid #10b981;color:rgba(var(--text-rgb),.7);}
.coc-message-blur{filter:blur(6px);pointer-events:none;user-select:none;}
.coc-unlock-hint{
  font-size:11px;color:rgba(var(--text-rgb),.4);text-align:center;
  padding:8px 0;
}
.coc-unlock-hint a{color:var(--gold);cursor:pointer;text-decoration:underline;}

/* ══ UPDATED MODE TILES (V1.5) ══ */
.mtile-clash{
  background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(16,185,129,.15));
  border-color:rgba(168,85,247,.3);
}
.mtile-clash .mtile-ico{font-size:32px;}
.mtile-versus{
  background:linear-gradient(135deg,rgba(168,85,247,.1),rgba(244,63,94,.1));
  border-color:rgba(168,85,247,.25);
}
.mtile-tournoi{
  background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(168,85,247,.12));
  border-color:rgba(201,168,76,.4);
}
.mtile-tournoi .mtile-ico{font-size:32px;}

/* ══════════════════════════════════════════════════════
   TOURNOI ELITE — écran de création
══════════════════════════════════════════════════════ */
.tn-mode-card{
  background:rgba(var(--text-rgb),.05); border:1.5px solid rgba(var(--text-rgb),.1);
  border-radius:16px; padding:18px; cursor:pointer; transition:all .2s;
}
.tn-mode-card:hover{ border-color:rgba(201,168,76,.5); background:rgba(201,168,76,.08); }
.tn-mode-ico{ font-size:30px; margin-bottom:6px; }
.tn-mode-name{ font-size:16px; font-weight:700; color:var(--text); margin-bottom:4px; }
.tn-mode-desc{ font-size:12px; color:rgba(var(--text-rgb),.55); line-height:1.5; }

.tn-phase-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; border-bottom:1px solid rgba(var(--text-rgb),.08);
}
.tn-phase-row:last-child{ border-bottom:none; }

.tn-candidate-slot{
  background:rgba(var(--text-rgb),.05); border:1.5px solid rgba(var(--text-rgb),.1);
  border-radius:14px; padding:14px; margin-bottom:10px; display:flex; gap:12px;
}
.tn-candidate-photo{
  width:64px; height:64px; border-radius:12px; flex-shrink:0; cursor:pointer;
  background:rgba(var(--text-rgb),.06); border:1.5px dashed rgba(var(--text-rgb),.2);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  color:rgba(var(--text-rgb),.35); overflow:hidden; position:relative;
}
.tn-candidate-photo img{ width:100%; height:100%; object-fit:cover; }
.tn-candidate-fields{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.tn-candidate-fields input, .tn-candidate-fields textarea{
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid rgba(var(--text-rgb),.15);
  background:rgba(var(--text-rgb),.04); color:var(--text); font-family:inherit; font-size:13px;
  box-sizing:border-box; resize:none;
}
.tn-candidate-remove{
  background:none; border:none; color:rgba(var(--text-rgb),.35); font-size:16px;
  cursor:pointer; flex-shrink:0; align-self:flex-start;
}
.tn-candidate-remove:hover{ color:#f87171; }

.tn-phase-banner{
  text-align:center; padding:16px 0 20px;
}
.tn-phase-label{ font-family:Georgia,serif; font-size:20px; font-weight:900; }
.tn-phase-countdown{ font-size:13px; color:rgba(var(--text-rgb),.65); margin-top:4px; }

.tn-duel-card{
  background:rgba(var(--text-rgb),.06); border:1px solid rgba(var(--text-rgb),.12);
  border-radius:18px; padding:16px; margin-bottom:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
}
.tn-duel-photos{ display:flex; align-items:flex-start; gap:10px; max-width:400px; margin:0 auto; }
.tn-duel-side{ flex:1; min-width:0; max-width:170px; text-align:center; }
.tn-duel-side img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px;
  border:2px solid rgba(var(--text-rgb),.15); cursor:pointer; display:block;
  max-height:170px;
}
.tn-duel-name{
  font-size:13px; font-weight:700; margin-top:8px; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text);
}
.tn-duel-phrase{
  font-size:10px; color:rgba(var(--text-rgb),.5); font-style:italic; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tn-duel-vs{
  flex:0 0 auto; align-self:center; font-weight:900; font-size:11px;
  color:rgba(var(--text-rgb),.4); padding:0 4px; letter-spacing:1px;
}
.tn-vote-btn{
  width:100%; margin-top:10px; padding:11px 8px; border-radius:12px;
  border:none; background:linear-gradient(135deg,#e6c877,#c9a84c);
  color:#1a1206; font-family:inherit; font-size:12.5px; font-weight:800;
  cursor:pointer; transition:all .15s; box-shadow:0 3px 10px rgba(230,200,119,.25);
  letter-spacing:.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tn-vote-btn:hover{ transform:translateY(-1px); box-shadow:0 5px 14px rgba(230,200,119,.4); }
.tn-vote-btn:active{ transform:translateY(0); }
.tn-vote-btn:disabled{
  opacity:.35; cursor:not-allowed; background:rgba(var(--text-rgb),.12);
  color:rgba(var(--text-rgb),.5); box-shadow:none;
}
.tn-vote-btn.voted{ background:linear-gradient(135deg,#4ade80,#22c55e); color:#0a1f0f; }
.tn-duel-bar{
  height:9px; border-radius:100px; background:rgba(var(--text-rgb),.1); overflow:hidden; margin-top:14px;
}
.tn-duel-bar-a{ height:100%; background:linear-gradient(90deg,#c9a84c,#f43f5e); border-radius:100px; transition:width .3s; }
.tn-duel-pcts{
  display:flex; justify-content:space-between; font-size:11px; color:rgba(var(--text-rgb),.55); margin-top:5px;
}

/* ── Fiche profil candidat (tap sur photo/nom) — modal en overlay
   sombre plein écran, contenu reste volontairement toujours sombre
   comme une "carte d'identité de compétition", cohérent dans les deux
   thèmes (contrairement au fond de page, ce n'est pas un panneau
   ambiant mais un modal isolé). ── */
.tn-profile-overlay{
  position:fixed; top:0; left:0; right:0; bottom:0; width:100vw; height:100vh;
  background:rgba(0,0,0,.75); z-index:99999;
  display:flex; align-items:center; justify-content:center; padding:24px;
  backdrop-filter:blur(4px); overflow-y:auto;
}
.tn-profile-card{
  background:#1a1530; border:1px solid rgba(139,92,246,.3); border-radius:20px;
  max-width:340px; width:100%; text-align:center; color:white; overflow:hidden;
}
.tn-profile-photo{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  border-bottom:3px solid rgba(230,200,119,.5);
}
.tn-profile-body{ padding:20px 24px 24px; }
.tn-profile-name{ font-size:20px; font-weight:800; margin-top:4px; }
.tn-profile-phrase{
  font-size:13px; color:rgba(255,255,255,.65); font-style:italic; margin-top:10px; line-height:1.5;
}
.tn-profile-close{
  margin-top:18px; width:100%; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06); color:white; font-family:inherit; font-weight:700; cursor:pointer;
}

/* ── Arcade — chrome partagé par les 5 mini-jeux ──────────────────────
   Construit sur l'identité violet-nuit déjà utilisée par tn-profile-card
   (le modal de duel), avec l'accent or déjà établi pour le score/les
   coins, et le vert/rouge déjà définis (--sage/--rose) pour le feedback
   bonne/mauvaise réponse — aucune nouvelle couleur inventée, juste
   assemblée différemment pour donner aux jeux une vraie identité de
   "cabinet d'arcade" plutôt que des boutons génériques réutilisés. */
.arcade-card{
  animation: arcadeCardIn .25s cubic-bezier(.34,1.56,.64,1);
  border-color: rgba(230,200,119,.35) !important;
  box-shadow: 0 0 0 1px rgba(230,200,119,.12), 0 20px 60px rgba(0,0,0,.5);
}
@keyframes arcadeCardIn{
  from{ opacity:0; transform:scale(.94) translateY(6px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
.arcade-card.shake{ animation: arcadeShake .4s; }
@keyframes arcadeShake{
  10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-4px); } 40%,60%{ transform:translateX(4px); }
}
.arcade-card.flash-correct{ animation: arcadeFlashGreen .5s; }
.arcade-card.flash-wrong{ animation: arcadeFlashRed .5s; }
@keyframes arcadeFlashGreen{
  0%,100%{ box-shadow:0 0 0 1px rgba(230,200,119,.12), 0 20px 60px rgba(0,0,0,.5); }
  30%{ box-shadow:0 0 0 3px rgba(74,222,128,.7), 0 0 40px rgba(74,222,128,.4); }
}
@keyframes arcadeFlashRed{
  0%,100%{ box-shadow:0 0 0 1px rgba(230,200,119,.12), 0 20px 60px rgba(0,0,0,.5); }
  30%{ box-shadow:0 0 0 3px rgba(248,113,113,.75), 0 0 40px rgba(248,113,113,.4); }
}

.arcade-hud{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 4px 14px; margin-bottom:4px; border-bottom:1px solid rgba(var(--text-rgb),.1);
}
.arcade-score{
  font-family:Georgia,serif; font-size:19px; font-weight:800; color:#a8791f;
  display:flex; align-items:center; gap:5px;
}
.arcade-score{color:#f0dca0;}
.arcade-score .lbl{ font-family:inherit; font-size:10px; font-weight:600; color:rgba(var(--text-rgb),.4); text-transform:uppercase; letter-spacing:.5px; margin-left:4px; }
.arcade-timer{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:15px; font-weight:700;
  color:rgba(var(--text-rgb),.65); background:rgba(var(--text-rgb),.07); padding:4px 10px; border-radius:100px;
  letter-spacing:.5px; font-variant-numeric:tabular-nums; transition:color .2s,background .2s;
}
.arcade-timer.low{ color:#fca5a5; background:rgba(248,113,113,.15); animation:arcadeTimerPulse .6s infinite; }
@keyframes arcadeTimerPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }

.arcade-tile{
  border:none; border-radius:10px; cursor:pointer; font-family:inherit;
  transition:transform .1s, filter .1s; -webkit-tap-highlight-color:transparent;
}
.arcade-tile:active{ transform:scale(.93); filter:brightness(.92); }
.arcade-tile:disabled{ cursor:default; }

/* Démineur — couleurs classiques par nombre de mines adjacentes */
.mine-n1{ color:#60a5fa; } .mine-n2{ color:#4ade80; } .mine-n3{ color:#f87171; }
.mine-n4{ color:#a78bfa; } .mine-n5{ color:#fb923c; } .mine-n6{ color:#22d3ee; }
.mine-n7{ color:#f0abfc; } .mine-n8{ color:#e5e5e5; }

/* Anagrammes — tuiles façon jeu de lettres (relief doré, pas des boutons plats) */
.anagram-tile{
  background:linear-gradient(160deg,#f0dca0,#c9a84c); color:#1a1206;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.3);
  font-weight:900; text-transform:uppercase;
}
.anagram-tile:disabled{ background:rgba(255,255,255,.06); box-shadow:none; color:transparent; }
.anagram-blank{
  border-bottom:3px solid rgba(230,200,119,.5); display:flex; align-items:center; justify-content:center;
  font-family:Georgia,serif; font-weight:800; font-size:20px; color:#f0dca0; min-width:26px; height:34px;
}

/* Block Blast — pièces en relief avec une vraie couleur par forme, plus lisible qu'un aplat unique */
.bb-cell-empty{ background:rgba(255,255,255,.05); }
.bb-cell-filled{
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.3);
}

.tn-classic-row{
  display:flex; align-items:center; gap:12px; background:rgba(var(--text-rgb),.05);
  border:1px solid rgba(var(--text-rgb),.1); border-radius:14px; padding:10px; margin-bottom:10px; cursor:pointer;
}
.tn-classic-row img{ width:52px; height:52px; border-radius:12px; object-fit:cover; flex-shrink:0; }

.tn-prize-row{
  background:rgba(var(--text-rgb),.04); border:1px solid rgba(var(--text-rgb),.1);
  border-radius:12px; padding:10px; margin-bottom:8px;
}
.tn-prize-row-head{ font-size:12px; font-weight:800; color:#8a6d1f; margin-bottom:6px; }
.tn-prize-row-head{color:#e6c877;}
.tn-prize-row select, .tn-prize-row input{
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid rgba(var(--text-rgb),.15);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:12.5px; margin-bottom:6px; box-sizing:border-box;
}
.tn-prize-cash-row{ display:flex; gap:6px; }
.tn-prize-cash-row input{ flex:2; } .tn-prize-cash-row select{ flex:1; }
.tn-prize-display{
  background:rgba(230,200,119,.08); border:1px solid rgba(230,200,119,.25);
  border-radius:14px; padding:14px; margin-bottom:16px;
}
.tn-prize-display-title{ font-size:12px; font-weight:800; color:#8a6d1f; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.tn-prize-display-title{color:#e6c877;}
.tn-prize-display-row{ display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color:rgba(var(--text-rgb),.85); }

.tn-history-note{ font-size:12px; color:rgba(var(--text-rgb),.4); text-align:center; margin-top:20px; }

/* ── Mes Challenges (tableau de bord créateur) ── */
.tn-my-row{
  display:flex; align-items:center; gap:12px; background:rgba(var(--text-rgb),.05);
  border:1px solid rgba(var(--text-rgb),.1); border-radius:14px; padding:12px; margin-bottom:10px;
}
.tn-my-row-info{ flex:1; min-width:0; cursor:pointer; }
.tn-my-row-title{ font-weight:700; font-size:14px; color:var(--text); }
.tn-my-row-meta{ font-size:11px; color:rgba(var(--text-rgb),.45); margin-top:2px; }
.tn-my-delete-btn{
  flex-shrink:0; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3);
  color:#f87171; border-radius:8px; padding:7px 10px; font-size:12px; cursor:pointer;
}

/* ══════════════════════════════════════════════════════
   TOURNOI ELITE — identité visuelle (bleu marine / violet profond)
══════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
   TOURNOI ELITE — identité visuelle (bleu marine / violet profond)
   ADAPTATION MODE CLAIR (Marvens, 2026-08-07) : cet écran était construit
   comme s'il était TOUJOURS en mode sombre (fond marine fixe + texte
   blanc fixe), ignorant complètement le bouton clair/sombre. Le fond
   marine + particules dorées, spécifique à l'ambiance "compétition
   officielle", est conservé tel quel en mode sombre (voir :root.dark
   plus bas) ; en mode clair, un dégradé crème/lavande doux prend le
   relais, avec des particules dorées plus soutenues pour rester visibles
   sur fond clair.
══════════════════════════════════════════════════════ */
/* Sans bascule sombre/clair, Tournoi Elite garde son ambiance marine +
   dorée en permanence (identité propre, comme Anonyme/Arcade — voir note
   du 2026-08-11). Variables locales pour que les cartes/textes internes
   (déjà écrits avec var(--text) etc.) restent lisibles sur ce fond. */
.tn-navy-bg{ --bg:#171513; --surface:#262420; --text:#f5f1ea; --text-rgb:245,241,234; --border:rgba(245,241,234,.12); }
.tn-navy-bg{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(168,85,247,.08), transparent 55%),
    radial-gradient(circle at 85% 15%, rgba(76,29,149,.08), transparent 50%),
    linear-gradient(160deg, #faf3e6 0%, #f6eff9 45%, #f1e4fa 100%);
}
.tn-navy-bg{
  background:
    radial-gradient(circle at 20% 0%, rgba(139,92,246,.25), transparent 55%),
    radial-gradient(circle at 85% 15%, rgba(76,29,149,.3), transparent 50%),
    linear-gradient(160deg, #0a0e27 0%, #12102b 45%, #1e1240 100%);
}
.tn-navy-bg.tn-climax-glow{
  background:
    radial-gradient(circle at 50% 0%, rgba(230,200,119,.28), transparent 60%),
    radial-gradient(circle at 20% 0%, rgba(168,85,247,.1), transparent 55%),
    radial-gradient(circle at 85% 15%, rgba(76,29,149,.1), transparent 50%),
    linear-gradient(160deg, #faf3e6 0%, #f6eff9 45%, #f1e4fa 100%);
}
.tn-navy-bg.tn-climax-glow{
  background:
    radial-gradient(circle at 50% 0%, rgba(230,200,119,.22), transparent 60%),
    radial-gradient(circle at 20% 0%, rgba(139,92,246,.2), transparent 55%),
    radial-gradient(circle at 85% 15%, rgba(76,29,149,.25), transparent 50%),
    linear-gradient(160deg, #0a0e27 0%, #12102b 45%, #1e1240 100%);
}
/* Palier bronze — rondes normales (couleur par défaut, teinte discrète) */
.tn-navy-bg.tn-tier-bronze::before{
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(180,110,30,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 15%, rgba(180,110,30,.4) 0%, transparent 100%),
    radial-gradient(2px 2px at 35% 70%, rgba(180,110,30,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 55%, rgba(180,140,40,.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 85%, rgba(180,110,30,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 90%, rgba(180,110,30,.35) 0%, transparent 100%);
}
.tn-navy-bg.tn-tier-bronze::before{
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(205,127,50,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 15%, rgba(205,127,50,.4) 0%, transparent 100%),
    radial-gradient(2px 2px at 35% 70%, rgba(205,127,50,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 55%, rgba(230,200,119,.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 85%, rgba(205,127,50,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 90%, rgba(205,127,50,.35) 0%, transparent 100%);
}
/* Palier argent — demi-finale */
.tn-navy-bg.tn-tier-silver{
  background:
    radial-gradient(circle at 50% 0%, rgba(148,163,184,.18), transparent 60%),
    radial-gradient(circle at 20% 0%, rgba(168,85,247,.1), transparent 55%),
    radial-gradient(circle at 85% 15%, rgba(76,29,149,.1), transparent 50%),
    linear-gradient(160deg, #f7f5f2 0%, #f2f0f6 45%, #ece9f3 100%);
}
.tn-navy-bg.tn-tier-silver{
  background:
    radial-gradient(circle at 50% 0%, rgba(203,213,225,.18), transparent 60%),
    radial-gradient(circle at 20% 0%, rgba(139,92,246,.18), transparent 55%),
    radial-gradient(circle at 85% 15%, rgba(76,29,149,.22), transparent 50%),
    linear-gradient(160deg, #0e1220 0%, #161428 45%, #1e1e35 100%);
}
.tn-navy-bg.tn-tier-silver::before{
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(100,116,139,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 15%, rgba(100,116,139,.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 35% 70%, rgba(100,116,139,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 55%, rgba(100,116,139,.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 85%, rgba(100,116,139,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 90%, rgba(100,116,139,.35) 0%, transparent 100%);
}
.tn-navy-bg.tn-tier-silver::before{
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(226,232,240,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 15%, rgba(226,232,240,.55) 0%, transparent 100%),
    radial-gradient(2px 2px at 35% 70%, rgba(203,213,225,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 55%, rgba(226,232,240,.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 85%, rgba(203,213,225,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 90%, rgba(226,232,240,.4) 0%, transparent 100%);
}
/* Palier or — finale (le plus intense, réutilise tn-climax-glow) */
.tn-navy-bg.tn-tier-gold::before{
  animation-duration:4s; /* scintille plus vite qu'en temps normal, sensation d'enjeu monté d'un cran */
}
/* Badge de palier — visible en haut de la bannière Elite */
.tn-stage-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.5px;padding:3px 10px;border-radius:100px;margin-top:6px;}
.tn-stage-badge.bronze{background:rgba(205,127,50,.18);color:#8a5423;}
.tn-stage-badge.bronze{color:#cd7f32;}
.tn-stage-badge.silver{background:rgba(148,163,184,.18);color:#475569;}
.tn-stage-badge.silver{color:#e2e8f0;}
.tn-stage-badge.gold{background:rgba(230,200,119,.2);color:#8a6d1f;}
.tn-stage-badge.gold{color:#e6c877;}

/* ── Identité "Elite" — fond vivant : particules dorées, rayons
   lumineux qui se déplacent, trophées très flous en arrière-plan.
   Voir doc design : "Comme si on entrait dans une compétition
   officielle." Couleur des particules assombrie en mode clair pour
   rester visible sur le dégradé crème. ── */
.tn-navy-bg::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(180,140,30,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 15%, rgba(180,140,30,.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 35% 70%, rgba(180,140,30,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 55%, rgba(180,140,30,.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 85%, rgba(180,140,30,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 90%, rgba(180,140,30,.4) 0%, transparent 100%);
  animation:tnEliteSparkle 6s ease-in-out infinite;
}
.tn-navy-bg::before{
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(230,200,119,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 15%, rgba(230,200,119,.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 35% 70%, rgba(230,200,119,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 55%, rgba(230,200,119,.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 85%, rgba(230,200,119,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 90%, rgba(230,200,119,.4) 0%, transparent 100%);
}
@keyframes tnEliteSparkle{0%,100%{opacity:.5;}50%{opacity:1;}}
/* Rayon lumineux qui balaie lentement l'écran */
.tn-navy-bg::after{
  content:'';position:absolute;top:-20%;left:-60%;width:220%;height:160%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(180,140,30,.05) 48%,rgba(180,140,30,.1) 50%,rgba(180,140,30,.05) 52%,transparent 60%);
  animation:tnEliteRaySweep 8s ease-in-out infinite;
}
.tn-navy-bg::after{
  background:linear-gradient(100deg,transparent 40%,rgba(230,200,119,.05) 48%,rgba(230,200,119,.1) 50%,rgba(230,200,119,.05) 52%,transparent 60%);
}
@keyframes tnEliteRaySweep{0%,100%{transform:translateX(-8%);}50%{transform:translateX(8%);}}
/* Trophée géant très flou, en fond, à peine visible */
.tn-trophy-ghost{
  position:absolute;bottom:-40px;right:-40px;width:220px;height:220px;z-index:0;pointer-events:none;
  opacity:.06;filter:blur(1px);color:#e6c877;
}
.vs-screen-hdr,#tn-view-body{position:relative;z-index:2;}

/* ── Bandeau "TOURNOI ELITE" — avant/pendant le tournoi ── */
.tn-elite-hype{text-align:center;margin-bottom:18px;}
.tn-elite-hype-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,rgba(230,200,119,.2),rgba(230,200,119,.08));
  border:1px solid rgba(230,200,119,.4);color:#8a6d1f;
  font-size:12px;font-weight:800;letter-spacing:1.5px;
  padding:6px 16px;border-radius:100px;margin-bottom:8px;
}
.tn-elite-hype-badge{color:#e6c877;}
.tn-elite-hype-sub{font-size:12.5px;color:rgba(var(--text-rgb),.6);}

/* ── Célébration de victoire — fond doré, couronne, apparition animée ── */
.tn-navy-bg.tn-victory-bg{
  background:
    radial-gradient(circle at 50% 0%, rgba(230,200,119,.3), transparent 60%),
    radial-gradient(circle at 20% 100%, rgba(230,200,119,.15), transparent 50%),
    linear-gradient(160deg, #fdf6e3 0%, #f6eff9 45%, #f1e4fa 100%);
}
.tn-navy-bg.tn-victory-bg{
  background:
    radial-gradient(circle at 50% 0%, rgba(230,200,119,.35), transparent 60%),
    radial-gradient(circle at 20% 100%, rgba(230,200,119,.15), transparent 50%),
    linear-gradient(160deg, #1a1408 0%, #12102b 45%, #1e1240 100%);
}
.tn-victory-wrap{text-align:center;padding:24px 0 12px;}
.tn-victory-crown{
  width:68px;height:68px;margin:0 auto 14px;border-radius:50%;
  background:linear-gradient(135deg,#e6c877,#c9a84c);color:#1a1408;
  display:grid;place-items:center;box-shadow:0 0 40px rgba(230,200,119,.5);
  opacity:0;transform:scale(.5);animation:tnVictoryPop .6s cubic-bezier(.2,.9,.3,1.3) forwards .1s;
}
@keyframes tnVictoryPop{0%{opacity:0;transform:scale(.5);}60%{opacity:1;transform:scale(1.12);}100%{opacity:1;transform:scale(1);}}
.tn-victory-photo{
  width:130px;height:130px;border-radius:50%;object-fit:cover;
  border:4px solid #e6c877;box-shadow:0 0 30px rgba(230,200,119,.4);
  margin:0 auto;background:linear-gradient(135deg,#a855f7,#f43f5e);color:white;
  opacity:0;animation:tnVictoryFade .6s ease forwards .3s;
}
.tn-victory-congrats{
  font-family:Georgia,serif;font-size:26px;font-weight:900;color:#8a6d1f;
  margin-top:16px;opacity:0;animation:tnVictoryFade .6s ease forwards .5s;
}
.tn-victory-congrats{color:#e6c877;}
.tn-victory-name{font-size:19px;font-weight:800;color:var(--text);margin-top:4px;opacity:0;animation:tnVictoryFade .6s ease forwards .65s;}
.tn-victory-tag{font-size:12px;color:rgba(150,110,20,.8);letter-spacing:1px;text-transform:uppercase;margin-top:4px;opacity:0;animation:tnVictoryFade .6s ease forwards .8s;}
.tn-victory-tag{color:rgba(230,200,119,.7);}
@keyframes tnVictoryFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ── Historique — cartes prestige (au lieu d'une liste simple) ── */
.tn-prestige-card{
  background:rgba(var(--text-rgb),.04);border:1px solid rgba(var(--text-rgb),.1);
  border-radius:16px;padding:14px 16px;margin-bottom:12px;
}
.tn-prestige-card.ended{border-color:rgba(230,200,119,.25);background:rgba(230,200,119,.04);}
.tn-prestige-top{display:flex;align-items:center;gap:12px;cursor:pointer;}
.tn-prestige-icon{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#e6c877,#c9a84c);color:#1a1408;
  display:grid;place-items:center;
}
.tn-prestige-title{font-size:14.5px;font-weight:700;color:var(--text);}
.tn-prestige-mode{font-size:11.5px;color:rgba(var(--text-rgb),.5);margin-top:2px;}
.tn-prestige-status{font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;flex-shrink:0;}
.tn-prestige-status.active{background:rgba(52,211,153,.15);color:#0f7a4f;}
.tn-prestige-status.active{color:#34d399;}
.tn-prestige-status.ended{background:rgba(230,200,119,.15);color:#8a6d1f;}
.tn-prestige-status.ended{color:#e6c877;}
.tn-prestige-stats{display:flex;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(var(--text-rgb),.08);}
.tn-prestige-stats span{display:flex;align-items:center;gap:5px;font-size:11.5px;color:rgba(var(--text-rgb),.55);}
.tn-prestige-btn{
  flex:1;background:rgba(230,200,119,.12);border:1px solid rgba(230,200,119,.3);color:#8a6d1f;
  border-radius:100px;padding:9px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;
}
.tn-prestige-btn{color:#e6c877;}
.tn-share-btn{color:#8a6d1f;}
.tn-share-btn{color:#e6c877;}

/* ══ HALL OF FAME — Top 10 ══ */
.tn-hof-header{text-align:center;padding:18px 0 16px;}
.tn-hof-crown{
  width:48px;height:48px;margin:0 auto 8px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--ink);
  display:grid;place-items:center;box-shadow:0 0 24px rgba(230,200,119,.4);
}
.tn-hof-podium{display:flex;align-items:flex-end;gap:8px;margin-bottom:18px;}
.tn-hof-podium-card{
  flex:1;text-align:center;padding:16px 8px 12px;border-radius:16px;cursor:pointer;
  background:rgba(var(--text-rgb),.04);border:1.5px solid rgba(var(--text-rgb),.1);
  transition:transform .2s;
}
.tn-hof-podium-card:active{transform:scale(.97);}
.tn-hof-podium-card.gold{padding-top:8px;border-color:rgba(230,200,119,.45);background:rgba(230,200,119,.08);order:2;}
.tn-hof-podium-card.silver{order:1;}
.tn-hof-podium-card.bronze{order:3;}
.tn-hof-rank-badge{
  display:inline-block;font-size:11px;font-weight:800;padding:2px 10px;border-radius:100px;margin-bottom:8px;
}
.tn-hof-rank-badge.gold{background:rgba(230,200,119,.2);color:#e6c877;}
.tn-hof-rank-badge.silver{background:rgba(203,213,225,.2);color:#e2e8f0;}
.tn-hof-rank-badge.bronze{background:rgba(205,127,50,.2);color:#cd7f32;}
.tn-hof-podium-photo{
  border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#a855f7,#f43f5e);
  display:block;margin:0 auto 8px;
}
.tn-hof-podium-photo.gold{width:76px;height:76px;border:3px solid #e6c877;box-shadow:0 0 20px rgba(230,200,119,.4);}
.tn-hof-podium-photo.silver{width:60px;height:60px;border:3px solid #cbd5e1;}
.tn-hof-podium-photo.bronze{width:60px;height:60px;border:3px solid #cd7f32;}
.tn-hof-podium-name{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tn-hof-podium-handle{font-size:10.5px;color:rgba(var(--text-rgb),.4);}
.tn-hof-podium-score{font-size:14px;font-weight:800;margin-top:4px;}
.tn-hof-podium-score.gold{color:#e6c877;}
.tn-hof-podium-score.silver{color:#e2e8f0;}
.tn-hof-podium-score.bronze{color:#cd7f32;}
.tn-hof-badges{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:6px;}
.tn-hof-badge{
  display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;
  background:rgba(var(--text-rgb),.08);color:rgba(var(--text-rgb),.6);
  padding:2px 6px;border-radius:100px;
}
.tn-hof-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(var(--text-rgb),.03);border:1px solid rgba(var(--text-rgb),.08);cursor:pointer;}
.tn-hof-row-rank{width:26px;text-align:center;font-size:13px;font-weight:800;color:rgba(var(--text-rgb),.4);flex-shrink:0;}
.tn-hof-rewards{margin-top:16px;padding:14px 16px;border-radius:16px;background:rgba(230,200,119,.06);border:1px solid rgba(230,200,119,.2);}
.tn-hof-rewards-title{font-size:12.5px;font-weight:700;color:var(--gold);margin-bottom:8px;}
.tn-hof-rewards-row{display:flex;justify-content:space-between;font-size:12px;color:rgba(var(--text-rgb),.6);padding:4px 0;}

/* ── Bannière "Tu es maintenant #X" — progression au Hall of Fame ── */
.tn-rankup-banner{
  position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-20px);
  z-index:99999;display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,#e6c877,#c9a84c);color:#1a1408;
  padding:14px 20px;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.35);
  opacity:0;animation:tnRankupIn .5s cubic-bezier(.2,.9,.3,1.3) forwards;
  max-width:calc(100% - 32px);
}
.tn-rankup-banner.out{animation:tnRankupOut .5s ease forwards;}
@keyframes tnRankupIn{from{opacity:0;transform:translateX(-50%) translateY(-20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes tnRankupOut{from{opacity:1;transform:translateX(-50%) translateY(0);}to{opacity:0;transform:translateX(-50%) translateY(-20px);}}
.tn-rankup-title{font-size:14px;font-weight:900;}
.tn-rankup-sub{font-size:11px;font-weight:600;opacity:.75;}

/* ── Bracket visuel (arbre complet, colonnes défilables horizontalement) ── */
.tn-bracket-wrap{ margin-top:8px; }
.tn-bracket-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch; padding:8px 4px 16px;
  scrollbar-width:thin; scrollbar-color:rgba(139,92,246,.4) transparent;
}
.tn-bracket-track{ display:flex; align-items:stretch; min-width:max-content; }
.tn-bracket-col{
  display:flex; flex-direction:column; justify-content:space-around;
  min-width:136px; padding:0 18px; position:relative;
}
.tn-bracket-col-header{
  text-align:center; font-size:10px; font-weight:800; color:rgba(var(--text-rgb),.55);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; white-space:nowrap;
}
.tn-bracket-col-header.tn-col-final{ color:#8a6d1f; }
.tn-bracket-col-header.tn-col-final{ color:#e6c877; }

.tn-bracket-match{ position:relative; margin:10px 0; }
.tn-bracket-match::after{
  content:''; position:absolute; right:-18px; top:50%; width:18px; height:1px;
  background:rgba(139,92,246,.35);
}
.tn-bracket-col:last-child .tn-bracket-match::after{ display:none; }

.tn-bracket-player{
  display:flex; align-items:center; gap:7px; background:rgba(var(--text-rgb),.05);
  border:1.5px solid rgba(139,92,246,.25); border-radius:10px; padding:6px 8px; margin-bottom:4px;
  transition:all .2s;
}
.tn-bracket-player.eliminated{ opacity:.4; }
.tn-bracket-player.winner{
  border-color:#e6c877; background:rgba(230,200,119,.12);
  box-shadow:0 0 0 1px rgba(230,200,119,.3);
}
.tn-bracket-player img{
  width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:1px solid rgba(var(--text-rgb),.18);
}
.tn-bracket-player.winner img{ border-color:#e6c877; }
.tn-bracket-crown{ font-size:11px; flex-shrink:0; }
.tn-bracket-player-name{
  font-size:10.5px; font-weight:600; flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; color:rgba(var(--text-rgb),.85);
}
.tn-bracket-player.winner .tn-bracket-player-name{ color:#8a6d1f; font-weight:700; }
.tn-bracket-player.winner .tn-bracket-player-name{ color:#f4e4b8; }
.tn-bracket-score{ font-size:10px; color:rgba(var(--text-rgb),.45); font-weight:700; flex-shrink:0; }
.tn-bracket-player.winner .tn-bracket-score{ color:#8a6d1f; }
.tn-bracket-player.winner .tn-bracket-score{ color:#e6c877; }

.tn-bracket-champion-col{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:120px; padding:0 16px;
}
.tn-bracket-champion-crown{ font-size:26px; }
.tn-bracket-champion-photo{
  width:56px; height:56px; border-radius:50%; object-fit:cover; margin-top:4px;
  border:2.5px solid #e6c877; box-shadow:0 0 16px rgba(230,200,119,.4);
}
.tn-bracket-champion-name{
  font-size:11px; font-weight:800; color:#8a6d1f; margin-top:6px; text-align:center; max-width:100px;
}
.tn-bracket-champion-name{ color:#f4e4b8; }

.badge-new{
  position:absolute;top:7px;right:7px;
  background:linear-gradient(135deg,#ef4444,#10b981);
  color:white;font-size:9px;font-weight:700;padding:2px 6px;border-radius:100px;
}
/* ══════════════════════════════════════════════════════
   MODE VERSUS — "Impact Versus" design
══════════════════════════════════════════════════════ */
#s-versus,#s-versus-guest,#s-versus-history{ background:#0a0a0f; color:white; }

.vs-screen-hdr{ display:flex; align-items:center; gap:12px; padding:16px 16px 0; flex-shrink:0; }
.vs-screen-hdr h1{ font-family:Georgia,serif; font-size:20px; font-weight:700; flex:1; }
.vs-badge-tag{
  background:linear-gradient(135deg,#3b82f6,#ef4444);
  color:white;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  padding:3px 10px;border-radius:100px;
}

/* Creation tabs (2 photos vs 1 photo) */
.vs-option-tabs{ display:flex;gap:8px;padding:16px 16px 0; }
.vs-tab{
  flex:1;padding:10px;border-radius:12px;border:1.5px solid rgba(255,255,255,.12);
  background:transparent;color:rgba(255,255,255,.5);font-family:inherit;
  font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;
}
.vs-tab.on{ border-color:rgba(59,130,246,.6);background:rgba(59,130,246,.12);color:#60a5fa; }

/* ── Diagonal Impact split (2 photos) ── */
.vs-duo-container{
  position:relative; width:100%; margin:16px 0;
}
.vs-duo-row{
  display:flex; gap:14px;
}
.vs-duo-block{
  flex:1; aspect-ratio:3/4; border-radius:20px; overflow:hidden;
  background:#111; cursor:pointer; transition:transform .25s ease, filter .25s ease;
  border:3px solid;
}
.vs-duo-block img{ width:100%; height:100%; object-fit:cover; display:block; }
.vs-duo-block.side-a{ border-color:#3b82f6; }
.vs-duo-block.side-b{ border-color:#ef4444; }
.vs-duo-block:hover{ transform:scale(1.02); }
.vs-duo-block.winner{ filter:brightness(1.15) saturate(1.2); }
.vs-duo-block.loser{ filter:brightness(.45) saturate(.6); }
/* Placeholder state on the creation screen (before a photo is chosen) */
.vs-duo-block.vs-diag-placeholder{
  background:rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center;
}
.vs-duo-block.vs-diag-placeholder.side-a{ background:linear-gradient(135deg,rgba(59,130,246,.14),rgba(255,255,255,.03)); }
.vs-duo-block.vs-diag-placeholder.side-b{ background:linear-gradient(135deg,rgba(239,68,68,.14),rgba(255,255,255,.03)); }
.vs-duo-block.vs-diag-placeholder.has-photo{ background-color:transparent; }
.vs-diag-placeholder-content{
  color:rgba(255,255,255,.4); font-size:13px; text-align:center; line-height:1.6;
  pointer-events:none;
}
.vs-badge-center{
  position:absolute; top:50%; left:50%;
  width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2a2a2a,#000);
  border:4px solid rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
  font-family:Georgia,serif; font-weight:900; font-size:22px; color:white;
  z-index:5; letter-spacing:-.5px;
  transform:translate(-50%,-50%) rotate(-8deg);
  animation:vsBadgePulse 1.8s ease-in-out infinite;
}
@keyframes vsBadgePulse{
  0%,100%{ box-shadow:0 0 22px rgba(0,0,0,.65), 0 0 14px rgba(255,255,255,.35); }
  50%{ box-shadow:0 0 30px rgba(239,68,68,.55), 0 0 30px rgba(59,130,246,.55); }
}
/* Live percentage bars shown directly under each block, visible immediately
   on arrival (not just after voting) — thin, discreet progress indicators */
.vs-live-pct-row{
  display:flex; gap:14px; margin-top:8px;
}
.vs-live-pct-col{ flex:1; }
.vs-live-pct-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; font-weight:800; margin-bottom:4px;
}
.vs-live-pct-bar-track{
  height:6px; border-radius:3px; overflow:hidden; background:rgba(255,255,255,.08);
}
.vs-live-pct-bar-fill{ height:100%; transition:width .5s ease; }
.vs-live-pct-col.a .vs-live-pct-label{ color:#60a5fa; }
.vs-live-pct-col.a .vs-live-pct-bar-fill{ background:#3b82f6; }
.vs-live-pct-col.b .vs-live-pct-label{ color:#f87171; }
.vs-live-pct-col.b .vs-live-pct-bar-fill{ background:#ef4444; }
.vs-label-row{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 16px 14px;
}
.vs-label-btn{
  padding:16px 12px; border-radius:16px; border:2px solid; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:15px; text-align:center;
  transition:all .25s; position:relative; overflow:hidden;
}
.vs-label-a{
  background:rgba(59,130,246,.14); border-color:#3b82f6; color:#60a5fa;
  box-shadow:0 0 16px rgba(59,130,246,.25);
}
.vs-label-a:hover,.vs-label-a:active{ background:rgba(59,130,246,.25); transform:scale(1.02); }
.vs-label-b{
  background:rgba(239,68,68,.14); border-color:#ef4444; color:#f87171;
  box-shadow:0 0 16px rgba(239,68,68,.25);
}
.vs-label-b:hover,.vs-label-b:active{ background:rgba(239,68,68,.25); transform:scale(1.02); }
.vs-label-pct{ font-size:22px; font-weight:900; display:block; margin-top:2px; }
.vs-label-bar{
  position:absolute; bottom:0; left:0; height:4px; background:currentColor;
  transition:width .6s ease;
}

/* ── Single photo mode ── */
.vs-single-photo-container{
  width:100%; border-radius:20px; overflow:hidden; margin:16px 0;
  background:#111; min-height:300px; display:flex; align-items:center; justify-content:center;
}
.vs-single-photo-container img{ width:100%; display:block; }

/* Question */
.vs-question-box{
  text-align:center; padding:0 20px 16px; font-size:18px; font-weight:700; color:white;
}

/* Duel textual preview before vote (guest) */
.vs-duel-preview{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:0 16px 20px; font-size:16px; font-weight:800;
}
.vs-duel-name-a{ color:#60a5fa; }
.vs-duel-name-b{ color:#f87171; }
.vs-duel-dots{ color:rgba(255,255,255,.25); letter-spacing:2px; font-weight:400; }

/* Chrono badge */
.vs-chrono-badge{
  display:inline-flex; align-items:center; gap:6px; margin:0 auto 12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:100px; padding:6px 14px; font-size:12px; color:rgba(255,255,255,.6);
  width:fit-content;
}
.vs-chrono-badge.expired{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); color:#f87171; }

/* Vote particles (hearts/sparks rising) */
.vs-particle{
  position:fixed; pointer-events:none; z-index:9999; font-size:26px;
}

/* Duration selector (segmented control) */
.vs-duration-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:0 16px 16px;
}
.vs-duration-btn{
  padding:10px 4px; border-radius:12px; border:1.5px solid rgba(255,255,255,.12);
  background:transparent; color:rgba(255,255,255,.5); font-family:inherit;
  font-size:12px; font-weight:700; cursor:pointer; transition:all .2s;
}
.vs-duration-btn.on{ border-color:rgba(168,85,247,.6); background:rgba(168,85,247,.14); color:#c084fc; }

/* Upload placeholders */
.vs-upload-box{
  border:2px dashed rgba(255,255,255,.15); border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px; cursor:pointer; color:rgba(255,255,255,.4);
  transition:all .2s;
}
.vs-upload-box:hover{ border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.03); }
.vs-upload-box img{ width:100%; border-radius:12px; }

/* History cards */
.vs-history-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:16px; margin-bottom:12px; cursor:pointer;
  display:flex; align-items:center; gap:14px; transition:all .2s;
}
.vs-history-card:active{ background:rgba(255,255,255,.09); }

/* Match Terminé */
.vs-locked-banner{
  text-align:center; padding:16px; margin:0 16px 16px; border-radius:16px;
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25);
  color:#f87171; font-weight:700; font-size:14px;
}
/* ══════════════════════════════════════════════════════
   ROYAUME ADMINISTRATEUR — style dashboard premium
   (inspiré visuellement de CoreUI, codé en vanilla CSS)
══════════════════════════════════════════════════════ */
#s-royaume{ background:#08070c; color:white; }
.royaume-hdr{
  display:flex; align-items:center; gap:12px; padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
}
.royaume-hdr h1{ font-family:Georgia,serif; font-size:19px; font-weight:700; flex:1; }
.royaume-crown-badge{
  background:linear-gradient(135deg,#c9a84c,#e8a020); color:#1a1400;
  font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  padding:4px 10px; border-radius:100px;
}
.royaume-tabs{
  display:flex; gap:6px; padding:12px 16px; overflow-x:auto;
  border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0;
}
.royaume-tab{
  flex-shrink:0; padding:9px 16px; border-radius:100px;
  border:1.5px solid rgba(255,255,255,.1); background:transparent;
  color:rgba(255,255,255,.5); font-family:inherit; font-size:12px; font-weight:700;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.royaume-tab.on{
  border-color:rgba(201,168,76,.6); background:rgba(201,168,76,.14); color:#e0c87a;
  box-shadow:0 0 14px rgba(201,168,76,.2);
}
.royaume-body{ flex:1; overflow-y:auto; padding:18px 16px 40px; }
.royaume-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:18px; margin-bottom:14px;
}
.royaume-stat-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px;
}
.royaume-stat-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px; position:relative; overflow:hidden;
}
.royaume-stat-card::before{
  content:''; position:absolute; top:-30px; right:-30px; width:80px; height:80px;
  border-radius:50%; filter:blur(20px); opacity:.35;
}
.royaume-stat-card.gold::before{ background:#c9a84c; }
.royaume-stat-card.purple::before{ background:#a855f7; }
.royaume-stat-card.green::before{ background:#22c55e; }
.royaume-stat-card.rose::before{ background:#f43f5e; }
.royaume-stat-card.blue::before{ background:#3b82f6; }
.royaume-stat-card.teal::before{ background:#14b8a6; }
.royaume-tx-table{ width:100%; border-collapse:collapse; font-size:12px; }
.royaume-tx-table th{ text-align:left; padding:8px 6px; color:rgba(255,255,255,.4); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid rgba(255,255,255,.1); white-space:nowrap; }
.royaume-tx-table td{ padding:9px 6px; border-bottom:1px solid rgba(255,255,255,.06); white-space:nowrap; }
.royaume-tx-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.royaume-stat-val{ font-size:26px; font-weight:900; font-family:Georgia,serif; }
.royaume-stat-lbl{ font-size:11px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
.royaume-section-title{
  font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  color:rgba(255,255,255,.35); margin:20px 0 10px;
}
.royaume-btn{
  width:100%; padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05); color:white; font-family:inherit; font-size:14px;
  font-weight:700; cursor:pointer; transition:all .2s; display:flex; align-items:center;
  gap:10px; margin-bottom:10px; text-align:left;
}
.royaume-btn:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); }
.royaume-btn.danger{ border-color:rgba(239,68,68,.3); color:#f87171; }
.royaume-btn.danger:hover{ background:rgba(239,68,68,.1); }
.royaume-btn.gold{
  border-color:rgba(201,168,76,.4); background:rgba(201,168,76,.08); color:#e0c87a;
  box-shadow:0 0 16px rgba(201,168,76,.1);
}
.royaume-locked{
  text-align:center; padding:60px 24px; color:rgba(255,255,255,.3);
}

/* ── Modération (Utilisateurs / Catégories / Signalements) ── */
.royaume-subtabs{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.royaume-subtab{
  padding:7px 14px; border-radius:100px; border:1px solid rgba(255,255,255,.1);
  background:transparent; color:rgba(255,255,255,.5); font-family:inherit;
  font-size:12px; font-weight:700; cursor:pointer;
}
.royaume-subtab.on{
  border-color:rgba(168,85,247,.6); background:rgba(168,85,247,.14); color:#c9a6f5;
}
.royaume-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); flex-wrap:wrap;
}
.royaume-row:last-child{ border-bottom:none; }
.royaume-badge{
  display:inline-block; padding:3px 10px; border-radius:100px; font-size:10px;
  font-weight:800; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap;
}
.royaume-badge.ok{ background:rgba(34,197,94,.15); color:#4ade80; }
.royaume-badge.danger{ background:rgba(239,68,68,.15); color:#f87171; }
.royaume-badge.warn{ background:rgba(234,179,8,.15); color:#fbbf24; }
.royaume-badge.muted{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.5); }
.royaume-badge.gold{ background:rgba(247,207,90,.15); color:#f7ce5b; }
.royaume-mini-btn{
  padding:6px 12px; border-radius:100px; border:1px solid rgba(var(--text-rgb),.15);
  background:rgba(var(--text-rgb),.05); color:var(--text); font-family:inherit; font-size:11px;
  font-weight:700; cursor:pointer; white-space:nowrap;
}
.royaume-mini-btn.danger{ border-color:rgba(239,68,68,.4); color:#f87171; }
.royaume-mini-btn.danger:hover{ background:rgba(239,68,68,.12); }
.royaume-mini-btn.ok{ border-color:rgba(34,197,94,.4); color:#4ade80; }
.royaume-mini-btn.ok:hover{ background:rgba(34,197,94,.12); }
.royaume-mini-btn.gold{ border-color:rgba(247,207,90,.4); color:#f7ce5b; }
.royaume-mini-btn.gold:hover{ background:rgba(247,207,90,.12); }
.royaume-input{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:white; font-family:inherit; font-size:13px;
  margin-bottom:8px; box-sizing:border-box;
}
.royaume-select{
  padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.12);
  background:#1a1a1a; color:white; font-family:inherit; font-size:12px;
}

/* ── Ad slot (public-facing, e.g. home screen) ── */
.ad-slot{ margin-top:20px; }
.ad-slot:empty{ display:none; }
.ad-card{
  position:relative; border-radius:16px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(var(--kw-violet-rgb),.15);
  background:linear-gradient(160deg,rgba(var(--kw-violet-rgb),.08),rgba(var(--kw-violet-rgb),.03));
  max-width:340px; margin:0 auto;
}
/* ROOT FIX (Marvens, 2026-08-11, point 16) : "object-fit:cover" avec une
   hauteur fixe rognait toute image/vidéo dont le format ne correspondait
   pas exactement au cadre (ex : sponsor au format portrait ou carré).
   "contain" affiche toujours le visuel EN ENTIER, quel que soit son
   format — avec un léger fond dégradé de marque au lieu de bandes vides
   si l'image ne remplit pas tout le cadre. */
.ad-card img, .ad-card video{ width:100%; display:block; max-height:280px; min-height:140px; object-fit:contain; }
.ad-card .ad-label{
  position:absolute; top:8px; left:8px; background:rgba(0,0,0,.55); color:rgba(255,255,255,.7);
  font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:3px 8px; border-radius:100px; backdrop-filter:blur(4px);
}
.ad-card .ad-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.55);
  display:grid; place-items:center; font-size:22px; color:white; backdrop-filter:blur(4px);
  pointer-events:none;
}

/* ── Régie Pub (admin) ── */
.royaume-ad-preview{
  width:100%; max-height:160px; object-fit:cover; border-radius:10px;
  margin-bottom:8px; background:rgba(255,255,255,.04); display:block;
}
.royaume-upload-progress{ height:6px; border-radius:100px; background:rgba(255,255,255,.08); overflow:hidden; margin:8px 0; }
.royaume-upload-progress-bar{ height:100%; background:#c9a84c; border-radius:100px; transition:width .2s; width:0%; }


/* Mascotte KnowMe — flotte en bas à gauche, au-dessus de tout, jamais
   bloquante (pointer-events:none sur le conteneur, le contenu du dessous
   reste cliquable). */
#tn-mascot{
  position:fixed; left:16px; bottom:16px; z-index:9999; display:flex; align-items:flex-end; gap:8px;
  pointer-events:none; opacity:0; transform:translateY(20px) scale(.9); transition:opacity .25s, transform .25s;
}
#tn-mascot.tn-mascot-in{ opacity:1; transform:translateY(0) scale(1); animation:mascotBounceIn .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes mascotBounceIn{ 0%{ transform:translateY(30px) scale(.7); } 60%{ transform:translateY(-4px) scale(1.05); } 100%{ transform:translateY(0) scale(1); } }
.tn-mascot-body{ width:72px; height:72px; flex-shrink:0; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); animation:mascotIdle 2.4s ease-in-out infinite; }
@keyframes mascotIdle{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-4px) rotate(2deg); } }
.tn-mascot-bubble{
  background:rgba(26,21,48,.95); color:white; font-size:12.5px; font-weight:600; line-height:1.3;
  padding:8px 12px; border-radius:14px 14px 14px 4px; border:1px solid rgba(230,200,119,.35);
  max-width:180px; box-shadow:0 6px 20px rgba(0,0,0,.4); margin-bottom:6px;
}

/* Roue de la Fortune — effet "3D-style" en CSS (perspective + inclinaison),
   pas un vrai modèle 3D : léger, fluide même sur téléphone bas de gamme. */
.wheel-stage{ position:relative; display:flex; justify-content:center; padding:18px 0 6px; }
.wheel-pointer{
  position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent;
  border-top:20px solid #f7c948; z-index:3; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));
  animation:wheelPointerBob 1.6s ease-in-out infinite;
}
@keyframes wheelPointerBob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(3px);}}
.wheel-3d{
  position:relative;
  width:min(78vw,260px); height:min(78vw,260px);
  border-radius:50%;
}
/* ROOT CHANGE (Marvens, 2026-08-11, point 10) : l'ancien effet 3D
   (rotateX + perspective) déformait le texte de l'anneau de marque et
   rendait les LEDs inégales — contraire à "lisibilité" explicitement
   demandée dans la référence. La roue reste maintenant bien plate/nette,
   comme knowme-roue-fortune.html, avec juste une lueur violette derrière. */
.wheel-3d::before{
  content:''; position:absolute; inset:-8%; border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,.45), rgba(139,92,246,0) 70%);
  filter:blur(10px); z-index:0;
}
.wheel-disc{
  position:relative; z-index:1;
  width:100%; height:100%; border-radius:50%;
  transition:transform 4.3s cubic-bezier(.15,.65,.15,1);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.55));
}
.wheel-led{ transform-box:fill-box; animation:wheelLedPulse 1.4s ease-in-out infinite; }
@keyframes wheelLedPulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.wheel-brand-ring{ transform-origin:250px 250px; animation:wheelBrandSpin 50s linear infinite; }
@keyframes wheelBrandSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.wheel-avatar-glow{ animation:wheelAvatarPulse 1.8s ease-in-out infinite; }
@keyframes wheelAvatarPulse{0%,100%{stroke-width:2;}50%{stroke-width:5;}}
@media (prefers-reduced-motion: reduce){
  .wheel-brand-ring, .wheel-led, .wheel-pointer, .wheel-avatar-glow{ animation:none; }
}

/* Anagrammes — glisser-déposer */
.anagram-drag-ghost{
  position:fixed; pointer-events:none; z-index:99999; display:flex; align-items:center; justify-content:center;
  transform:scale(1.1) rotate(-3deg); box-shadow:0 10px 24px rgba(0,0,0,.5);
}
.anagram-blank.drag-over{
  border-bottom-color:#e6c877; background:rgba(230,200,119,.15); border-radius:4px;
  transform:scale(1.08); transition:transform .1s, background .1s;
}


/* ── Identité de monde par mini-jeu (fond + particules + parallaxe léger) ─
   Le fond est posé sur la CARTE de jeu elle-même (pas tout l'écran), avec
   un léger zoom "Ken Burns" en continu pour que ça respire, et un dégradé
   sombre par-dessus pour que le texte reste lisible. Les particules sont
   juste des caractères qui montent et s'estompent — aucune image, aucun
   poids ajouté. */
.arcade-world{
  position:relative; overflow:hidden; background-size:112%; background-position:center;
  animation:worldKenBurns 18s ease-in-out infinite alternate;
}
@keyframes worldKenBurns{ 0%{ background-size:112%; } 100%{ background-size:130%; } }
.arcade-world::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(10,8,20,.55) 0%, rgba(10,8,20,.82) 65%, rgba(10,8,20,.94) 100%);
}
.arcade-world > *{ position:relative; z-index:1; }
.calcul-world{ background-image:url('assets/backgrounds/calcul-bg.webp'); }
.anagrammes-world{ background-image:url('assets/backgrounds/anagrammes-bg.webp'); }
.quiz-world{ background-image:url('assets/backgrounds/quiz-bg.webp'); }
.blockblast-world{ background-image:url('assets/backgrounds/blockblast-bg.webp'); }

.arcade-particle{
  position:absolute; font-size:20px; opacity:0; z-index:0; pointer-events:none;
  animation:arcadeParticleFloat 6s ease-in infinite;
}
@keyframes arcadeParticleFloat{
  0%{ opacity:0; transform:translateY(30px) scale(.8); }
  15%{ opacity:.75; }
  85%{ opacity:.4; }
  100%{ opacity:0; transform:translateY(-180px) scale(1.15); }
}

.arcade-trophy{ font-size:56px; animation:trophyPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes trophyPop{
  0%{ transform:scale(0) rotate(-20deg); } 60%{ transform:scale(1.2) rotate(8deg); } 100%{ transform:scale(1) rotate(0); }
}
.arcade-badge{
  display:inline-block; padding:4px 14px; border-radius:100px; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.5px; margin-top:10px;
}
.arcade-badge.tier-facile{ background:rgba(96,165,250,.2); color:#60a5fa; border:1px solid rgba(96,165,250,.4); }
.arcade-badge.tier-moyen{ background:rgba(74,222,128,.2); color:#4ade80; border:1px solid rgba(74,222,128,.4); }
.arcade-badge.tier-difficile{ background:rgba(230,200,119,.2); color:#e6c877; border:1px solid rgba(230,200,119,.5); }

/* Block Blast — glisser-déposer */
.bb-drop-valid{ outline:2px solid #4ade80; background:rgba(74,222,128,.25) !important; }
.bb-drop-invalid{ outline:2px solid #f87171; background:rgba(248,113,113,.25) !important; }

/* ══ ARCADE — identité visuelle propre (galaxie violette), distincte
   du tn-navy-bg utilisé ailleurs dans l'app (Tournoi Elite, etc.) —
   pour que l'ouverture d'Arcade donne l'impression d'un espace à part.
   Sans bascule sombre/clair, cette ambiance galaxie sombre reste
   permanente (identité propre — voir note du 2026-08-11), avec des
   variables locales pour que les cartes/textes internes restent
   lisibles sur ce fond. */
.arcade-cosmic-bg{ --bg:#171513; --surface:#262420; --text:#f5f1ea; --text-rgb:245,241,234; --border:rgba(245,241,234,.12); }
.arcade-cosmic-bg{
  position:relative; overflow:hidden;
  background:radial-gradient(ellipse at 50% -10%, #efe8fa 0%, #f4eef9 45%, #f8f3ec 100%);
}
.arcade-cosmic-bg{
  background:radial-gradient(ellipse at 50% -10%, #2a1a5e 0%, #150c33 45%, #0a0716 100%);
}
.arcade-cosmic-bg::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(120,90,190,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 15%, rgba(120,90,190,.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 55%, rgba(120,90,190,.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(120,90,190,.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 80%, rgba(120,90,190,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 85%, rgba(120,90,190,.4) 0%, transparent 100%);
  animation: arcadeStarsTwinkle 4s ease-in-out infinite alternate;
}
.arcade-cosmic-bg::before{
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 15%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 55%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 80%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 85%, rgba(255,255,255,.6) 0%, transparent 100%);
}
.arcade-cosmic-bg::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 15% 20%, rgba(142,111,214,.15), transparent 40%),
             radial-gradient(circle at 85% 75%, rgba(96,165,250,.1), transparent 45%);
}
.arcade-cosmic-bg::after{
  background:radial-gradient(circle at 15% 20%, rgba(142,111,214,.25), transparent 40%),
             radial-gradient(circle at 85% 75%, rgba(96,165,250,.18), transparent 45%);
}
.arcade-cosmic-bg > *{ position:relative; z-index:1; }
@keyframes arcadeStarsTwinkle{ 0%{opacity:.5;} 100%{opacity:1;} }

/* ── Jauge d'énergie — batterie futuriste (remplace ⚡⚡⚡▫️▫️) ── */
.energy-cells{ display:flex; gap:6px; justify-content:center; align-items:center; }
.energy-cell{
  width:20px; height:32px; border-radius:6px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  position:relative; overflow:hidden;
}
.energy-cell.lit{
  background:linear-gradient(180deg,#ffe27a,#e6c877);
  border-color:rgba(230,200,119,.6);
  box-shadow:0 0 10px rgba(230,200,119,.55), inset 0 1px 3px rgba(255,255,255,.5);
}
.energy-cell.lit::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.5), transparent 55%);
}

/* ── Roue — reflet métallique + aiguille premium (complète le wheel-3d /
   wheel-disc déjà en place plus haut : accélération/décélération et
   perspective 3D existaient déjà, on ajoute la brillance et le bout doré).
   FIX (2026-08-13, Marvens) : ce bloc redéfinissait .wheel-3d::before
   avec un SEUL pseudo-élément déjà utilisé plus haut pour la lueur
   violette (background radial-gradient, z-index:0) — en CSS, la seconde
   règle sur le même sélecteur écrase totalement la première (ce n'est
   pas un merge), donc la lueur violette derrière la roue ne s'affichait
   JAMAIS, remplacée silencieusement par ce reflet. Déplacé sur ::after
   pour que les deux effets coexistent enfin. */
.wheel-3d::after{
  content:''; position:absolute; inset:0; border-radius:50%; z-index:2; pointer-events:none;
  background:conic-gradient(from 200deg, transparent 0%, rgba(255,255,255,.22) 8%, transparent 20%, transparent 100%);
}
.wheel-pointer{ filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)) brightness(1.15); }


/* ══════════════════════════════════════════════════════
   KNOWME ANONYMA — CARTE DE RÉPONSE (carte fournie par Marvens,
   knowme-anonyma-card.html, intégrée telle quelle le 2026-08-08).
   Classes/IDs préfixés anonc- pour éviter toute collision avec le
   reste du site. Remplace l ancien rendu Canvas.
══════════════════════════════════════════════════════ */

  .anonc-card{
    --gold-1:#f6dfa0;
    --gold-2:#d4af37;
    --gold-3:#a8791f;

    --bg1:#0c0c0c;
    --bg2:#050505;
    --bg3:#000000;
    --text-primary:#f2f2f2;
    --text-secondary:#8a8d94;
    --thread-idle: rgba(255,255,255,0.32);
    --dust-rgb: 255,255,255;
    --vignette: rgba(0,0,0,0.8);
    --fog-rgb: 255,255,255;
    --divider-color: rgba(255,255,255,0.35);
    --brand-color: rgba(230,230,230,0.62);
    --stripe-rgb: 255,255,255;
    --accent-1: var(--gold-1);
    --accent-2: var(--gold-2);
    --accent-glow: 255,215,140;
  }

  .anonc-card.anonc-light{
    --bg1:#f6f2e9;
    --bg2:#ece5d6;
    --bg3:#fbf9f3;
    --text-primary:#242119;
    --text-secondary:#736c5c;
    --thread-idle: rgba(70,60,40,0.38);
    --dust-rgb: 90,75,45;
    --vignette: rgba(120,105,75,0.20);
    --fog-rgb: 130,115,80;
    --divider-color: rgba(70,60,40,0.32);
    --brand-color: rgba(60,52,36,0.75);
    --stripe-rgb: 0,0,0;
    --accent-1: #8a6a1c;
    --accent-2: #a8791f;
    --accent-glow: 168,121,31;
  }

  .anonc-card.anonc-light .anonc-vip-btn{
    color:#7a5a15;
    background:rgba(0,0,0,0.06);
    border-color:rgba(70,60,40,0.32);
  }
  .anonc-card.anonc-light .anonc-theme-toggle{
    background:rgba(0,0,0,0.06);
    border-color:rgba(70,60,40,0.32);
  }
  .anonc-card.anonc-light .anonc-header h1,
  .anonc-card.anonc-light .anonc-question-block p,
  .anonc-card.anonc-light .anonc-footer .anonc-brand{
    color:#ffffff;
    text-shadow:0 1px 3px rgba(0,0,0,0.25);
  }

  /* ===== VIP THEMES ===== */
  .anonc-card.anonc-theme-galaxie{
    --bg1:#0a0a1a; --bg2:#150a2e; --bg3:#05030f;
    --accent-1:#c9a7ff; --accent-2:#8a5cff; --accent-glow: 170,120,255;
    --thread-idle: rgba(180,140,255,0.30);
    --dust-rgb: 200,170,255;
    --stripe-rgb: 170,130,255;
  }
  .anonc-card.anonc-theme-cristal{
    --bg1:#081d24; --bg2:#04262f; --bg3:#02121a;
    --accent-1:#a7f3ff; --accent-2:#3fd0e8; --accent-glow: 100,230,255;
    --thread-idle: rgba(130,230,255,0.32);
    --dust-rgb: 170,240,255;
    --stripe-rgb: 120,220,255;
  }
  .anonc-card.anonc-theme-lunaire{
    --bg1:#10131c; --bg2:#161b28; --bg3:#0a0c12;
    --accent-1:#e7ecff; --accent-2:#9aa8d6; --accent-glow: 200,210,255;
    --thread-idle: rgba(200,210,255,0.28);
    --dust-rgb: 220,225,255;
    --stripe-rgb: 190,200,240;
  }
  .anonc-card.anonc-theme-dore{
    --bg1:#161006; --bg2:#241a08; --bg3:#0c0803;
    --accent-1:#ffe9ad; --accent-2:#e8b64a; --accent-glow: 255,205,110;
    --thread-idle: rgba(255,210,120,0.34);
    --dust-rgb: 255,220,150;
    --stripe-rgb: 255,200,100;
  }
  .anonc-card.anonc-theme-arcenciel{
    --bg1:#0e0b16; --bg2:#160f22; --bg3:#08060e;
    --accent-1:#ffd1e8; --accent-2:#9ad1ff; --accent-glow: 255,170,220;
    --thread-idle: rgba(255,255,255,0.30);
    --dust-rgb: 255,255,255;
    --stripe-rgb: 255,255,255;
  }
  .anonc-card.anonc-theme-electrique{
    --bg1:#050a12; --bg2:#071624; --bg3:#020509;
    --accent-1:#c7f9ff; --accent-2:#33e0ff; --accent-glow: 90,235,255;
    --thread-idle: rgba(120,235,255,0.36);
    --dust-rgb: 170,245,255;
    --stripe-rgb: 100,235,255;
  }
  .anonc-card.anonc-theme-volcanique{
    --bg1:#180705; --bg2:#280a06; --bg3:#0c0302;
    --accent-1:#ffcf9e; --accent-2:#ff6a3d; --accent-glow: 255,110,60;
    --thread-idle: rgba(255,130,80,0.36);
    --dust-rgb: 255,170,130;
    --stripe-rgb: 255,110,60;
  }

  

  

  

  .anonc-card{
    position:relative;
    width:100%;
    height:100%;
    border-radius:0;
    overflow:hidden;
    background:
      radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,0.06), transparent 55%),
      repeating-linear-gradient(100deg,
        rgba(var(--stripe-rgb),0.035) 0px,
        rgba(var(--stripe-rgb),0.035) 1px,
        rgba(0,0,0,0) 2.5px,
        rgba(0,0,0,0) 5px),
      linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%);
    box-shadow:
      0 30px 80px rgba(0,0,0,0.7),
      0 0 0 1px rgba(255,255,255,0.05) inset;
    transition: background 0.6s ease;
  }

  .anonc-card::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      radial-gradient(1px 1px at 15% 22%, rgba(var(--dust-rgb),0.22), transparent 60%),
      radial-gradient(1px 1px at 78% 64%, rgba(var(--dust-rgb),0.18), transparent 60%),
      radial-gradient(1px 1px at 40% 80%, rgba(var(--dust-rgb),0.14), transparent 60%),
      radial-gradient(1px 1px at 62% 12%, rgba(var(--dust-rgb),0.16), transparent 60%),
      radial-gradient(1px 1px at 90% 35%, rgba(var(--dust-rgb),0.14), transparent 60%),
      radial-gradient(1px 1px at 25% 55%, rgba(var(--dust-rgb),0.12), transparent 60%),
      radial-gradient(1px 1px at 55% 90%, rgba(var(--dust-rgb),0.12), transparent 60%);
    pointer-events:none;
    mix-blend-mode:screen;
    opacity:.7;
    z-index:1;
    transition: opacity .5s ease;
  }

  .anonc-card::after{
    content:"";
    position:absolute; inset:0;
    box-shadow: inset 0 0 130px 40px var(--vignette);
    pointer-events:none;
    z-index:5;
  }

  .anonc-vip-fx{
    position:absolute; inset:0;
    z-index:1;
    pointer-events:none;
    opacity:0;
    transition: opacity .6s ease;
  }
  .anonc-card.anonc-theme-galaxie .anonc-vip-fx,
  .anonc-card.anonc-theme-cristal .anonc-vip-fx,
  .anonc-card.anonc-theme-lunaire .anonc-vip-fx,
  .anonc-card.anonc-theme-dore .anonc-vip-fx,
  .anonc-card.anonc-theme-arcenciel .anonc-vip-fx,
  .anonc-card.anonc-theme-electrique .anonc-vip-fx,
  .anonc-card.anonc-theme-volcanique .anonc-vip-fx{ opacity:1; }

  .anonc-card.anonc-theme-galaxie .anonc-vip-fx{
    background:
      radial-gradient(2px 2px at 20% 30%, #fff, transparent 60%),
      radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent 60%),
      radial-gradient(2px 2px at 85% 55%, #fff, transparent 60%),
      radial-gradient(1px 1px at 35% 70%, #fff, transparent 60%),
      radial-gradient(1.5px 1.5px at 55% 85%, #fff, transparent 60%),
      radial-gradient(120% 60% at 30% 100%, rgba(140,80,255,0.20), transparent 60%),
      radial-gradient(90% 50% at 90% 0%, rgba(90,50,200,0.25), transparent 60%);
    animation: twinkleStars 6s ease-in-out infinite;
  }
  @keyframes twinkleStars{ 0%,100%{opacity:.85;} 50%{opacity:1;} }

  .anonc-card.anonc-theme-cristal .anonc-vip-fx{
    background:
      repeating-conic-gradient(from 0deg at 20% 30%, rgba(150,240,255,0.08) 0deg 15deg, transparent 15deg 30deg),
      repeating-conic-gradient(from 20deg at 80% 70%, rgba(150,240,255,0.06) 0deg 20deg, transparent 20deg 40deg),
      radial-gradient(60% 40% at 50% 0%, rgba(100,220,255,0.18), transparent 70%);
    filter: blur(.2px);
  }

  .anonc-card.anonc-theme-lunaire .anonc-vip-fx{
    background:
      radial-gradient(20% 20% at 75% 18%, rgba(230,235,255,0.9), rgba(230,235,255,0.15) 60%, transparent 70%),
      radial-gradient(3px 3px at 30% 60%, #fff, transparent 60%),
      radial-gradient(2px 2px at 60% 40%, #fff, transparent 60%),
      radial-gradient(2px 2px at 80% 80%, #fff, transparent 60%);
  }

  .anonc-card.anonc-theme-dore .anonc-vip-fx{
    background:
      repeating-linear-gradient(115deg, rgba(255,220,150,0.05) 0px, rgba(255,220,150,0.05) 2px, transparent 2px, transparent 26px),
      radial-gradient(70% 40% at 50% 100%, rgba(255,200,110,0.18), transparent 70%);
  }

  .anonc-card.anonc-theme-arcenciel .anonc-vip-fx{
    background: conic-gradient(from 0deg at 50% 30%,
      rgba(255,120,150,0.14), rgba(255,210,130,0.14), rgba(160,255,170,0.14),
      rgba(130,220,255,0.14), rgba(190,150,255,0.14), rgba(255,120,150,0.14));
    animation: rainbowSpin 18s linear infinite;
    mix-blend-mode: screen;
  }
  @keyframes rainbowSpin{ to{ transform: rotate(360deg); } }

  .anonc-card.anonc-theme-electrique .anonc-vip-fx{
    background:
      radial-gradient(70% 40% at 50% 0%, rgba(60,225,255,0.22), transparent 70%),
      radial-gradient(50% 30% at 20% 90%, rgba(60,225,255,0.14), transparent 70%);
    animation: electricFlicker 3.4s ease-in-out infinite;
  }
  @keyframes electricFlicker{
    0%,100%{ opacity:.85; }
    48%{ opacity:1; }
    50%{ opacity:.6; }
    52%{ opacity:1; }
  }

  .anonc-card.anonc-theme-volcanique .anonc-vip-fx{
    background:
      radial-gradient(60% 35% at 50% 100%, rgba(255,110,60,0.30), transparent 70%),
      radial-gradient(30% 20% at 15% 85%, rgba(255,150,60,0.20), transparent 70%),
      radial-gradient(30% 20% at 85% 90%, rgba(255,90,40,0.20), transparent 70%);
    animation: lavaPulse 4.5s ease-in-out infinite;
  }
  @keyframes lavaPulse{
    0%,100%{ opacity:.8; }
    50%{ opacity:1; }
  }

  .anonc-fog{
    position:absolute; inset:-10%;
    z-index:1;
    background:
      radial-gradient(38% 22% at 30% 40%, rgba(var(--fog-rgb),0.05), transparent 70%),
      radial-gradient(30% 18% at 70% 60%, rgba(var(--fog-rgb),0.04), transparent 70%);
    filter: blur(6px);
    mix-blend-mode:screen;
    animation: fogDrift 16s ease-in-out infinite alternate;
    pointer-events:none;
  }
  @keyframes fogDrift{
    0%{ transform: translate(-2%, 0) scale(1); }
    100%{ transform: translate(3%, -2%) scale(1.06); }
  }

  .anonc-theme-toggle{
    position:absolute;
    top:16px; right:16px;
    z-index:8;
    width:34px; height:34px;
    border-radius:50%;
    border:1px solid var(--divider-color);
    background:rgba(128,128,128,0.08);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .anonc-theme-toggle svg{ width:16px; height:16px; }

  .anonc-vip-btn{
    position:absolute;
    top:16px; left:16px;
    z-index:8;
    height:34px;
    padding:0 12px 0 10px;
    border-radius:17px;
    border:1px solid var(--divider-color);
    background:rgba(128,128,128,0.08);
    display:flex; align-items:center; gap:6px;
    cursor:pointer;
    color:var(--gold-1);
    font-size:10.5px;
    letter-spacing:0.14em;
    font-weight:700;
  }
  .anonc-vip-btn svg{ width:13px; height:13px; }

  .anonc-vip-panel{
    position:absolute;
    inset:0;
    z-index:20;
    background: rgba(3,3,3,0.72);
    backdrop-filter: blur(6px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition: opacity .35s ease;
  }
  .anonc-vip-panel.anonc-open{ opacity:1; pointer-events:auto; }

  .anonc-vip-panel h2{
    color:var(--gold-1);
    font-size:12px;
    letter-spacing:0.32em;
    font-weight:700;
    margin:0 0 4px;
  }
  .anonc-vip-panel .anonc-vip-sub{
    color:rgba(255,255,255,0.55);
    font-size:10.5px;
    margin-bottom:20px;
    font-style:italic;
    text-align:center;
    padding:0 30px;
  }

  .anonc-vip-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
    padding:0 22px;
    width:100%;
  }
  .anonc-vip-swatch{
    position:relative;
    aspect-ratio:1/1;
    border-radius:14px;
    cursor:pointer;
    border:1.5px solid rgba(255,255,255,0.14);
    overflow:hidden;
    display:flex; align-items:flex-end; justify-content:center;
    transition: transform .2s ease, border-color .2s ease;
  }
  .anonc-vip-swatch:active{ transform:scale(0.92); }
  .anonc-vip-swatch.anonc-selected{ border-color: var(--gold-1); box-shadow:0 0 0 1px var(--gold-1), 0 0 14px rgba(255,215,140,0.5); }
  .anonc-vip-swatch .anonc-lbl{
    font-size:7.5px; letter-spacing:.06em; color:#fff;
    background:rgba(0,0,0,0.45);
    width:100%; text-align:center; padding:3px 0;
    text-transform:uppercase;
  }
  .anonc-vip-swatch.anonc-locked::before{
    content:"\1F512";
    position:absolute; top:5px; right:6px;
    font-size:9px;
  }
  .anonc-vip-swatch.anonc-locked{ filter:saturate(0.35) brightness(0.6); }

  .anonc-sw-classique{ background:linear-gradient(160deg,#0c0c0c,#000); }
  .anonc-sw-galaxie{ background:radial-gradient(circle at 30% 30%, #2a1657, #0a0a1a 70%); }
  .anonc-sw-cristal{ background:radial-gradient(circle at 30% 30%, #0b3f4d,#02121a 70%); }
  .anonc-sw-lunaire{ background:radial-gradient(circle at 70% 30%, #2b3050,#0a0c12 70%); }
  .anonc-sw-dore{ background:radial-gradient(circle at 30% 30%, #6b4a12,#0c0803 70%); }
  .anonc-sw-arcenciel{ background:conic-gradient(from 0deg,#ff7ea6,#ffd27e,#8effa1,#7ecbff,#c39bff,#ff7ea6); }
  .anonc-sw-electrique{ background:radial-gradient(circle at 30% 30%, #0d5b6e,#020509 70%); }
  .anonc-sw-volcanique{ background:radial-gradient(circle at 30% 70%, #7a2408,#0c0302 70%); }

  .anonc-vip-close{
    margin-top:22px;
    color:rgba(255,255,255,0.5);
    font-size:10px;
    letter-spacing:.2em;
    border:1px solid rgba(255,255,255,0.2);
    padding:8px 18px;
    border-radius:16px;
    cursor:pointer;
    background:transparent;
  }

  .anonc-header{
    position:relative;
    z-index:6;
    text-align:center;
    padding-top:8%;
  }
  .anonc-header h1{
    margin:0;
    color: var(--text-primary);
    font-size:clamp(19px,5vw,25px);
    letter-spacing:0.14em;
    font-weight:700;
    transition: color .4s ease;
  }
  .anonc-header .anonc-rule{
    display:flex; align-items:center; justify-content:center;
    gap:10px;
    margin-top:9px;
    color:var(--accent-2);
    font-size:10.5px;
    letter-spacing:0.32em;
    font-weight:600;
  }
  .anonc-header .anonc-rule::before,
  .anonc-header .anonc-rule::after{
    content:"";
    width:30px; height:1px;
    background:linear-gradient(90deg, transparent, var(--accent-2));
  }
  .anonc-header .anonc-rule::after{ background:linear-gradient(90deg, var(--accent-2), transparent); }

  .anonc-question-block{
    position:relative;
    z-index:6;
    text-align:center;
    padding:14px 14% 0;
  }
  .anonc-question-block .anonc-q-mark{
    color:var(--accent-2);
    font-size:20px;
    line-height:1;
    margin-bottom:2px;
  }
  .anonc-question-block p{
    margin:0;
    color: var(--text-primary);
    opacity:0.82;
    font-size:13px;
    font-style:italic;
    line-height:1.45;
    transition: color .4s ease;
  }

  .anonc-scene{
    position:relative;
    z-index:3;
    width:100%;
    height:49%;
    margin-top:1%;
  }

  .anonc-threads{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    overflow:visible;
    z-index:2;
  }
  .anonc-threads line{
    stroke: var(--thread-idle);
    stroke-width:1;
    stroke-linecap:round;
    animation: threadGlow 5s ease-in-out infinite;
    transition: stroke 0.4s ease;
  }
  .anonc-threads line:nth-child(1){ animation-delay:.28s; }
  .anonc-threads line:nth-child(2){ animation-delay:.20s; }
  .anonc-threads line:nth-child(3){ animation-delay:.12s; }
  .anonc-threads line:nth-child(4){ animation-delay:0s; }
  .anonc-threads line:nth-child(5){ animation-delay:.12s; }
  .anonc-threads line:nth-child(6){ animation-delay:.20s; }
  .anonc-threads line:nth-child(7){ animation-delay:.28s; }

  @keyframes threadGlow{
    0%, 55%{
      stroke: var(--thread-idle);
      filter: drop-shadow(0 0 0 rgba(var(--accent-glow),0));
    }
    65%, 85%{
      stroke: var(--accent-1);
      filter: drop-shadow(0 0 5px rgba(var(--accent-glow),0.9));
    }
    100%{
      stroke: var(--thread-idle);
      filter: drop-shadow(0 0 0 rgba(var(--accent-glow),0));
    }
  }

  .anonc-light-pulse{
    position:absolute;
    left:50%; bottom:20%;
    width:3px; height:3px;
    border-radius:50%;
    background: var(--accent-1);
    box-shadow:0 0 10px 3px rgba(var(--accent-glow),0.9);
    transform:translateX(-50%);
    opacity:0;
    animation: travelUp 5s ease-in infinite;
    z-index:2;
  }
  @keyframes travelUp{
    0%, 58%{ opacity:0; bottom:20%; }
    62%{ opacity:1; bottom:20%; }
    82%{ opacity:0.9; bottom:58%; }
    88%{ opacity:0; bottom:62%; }
    100%{ opacity:0; bottom:20%; }
  }

  .anonc-particle{
    position:absolute;
    left:50%;
    bottom:18%;
    width:3px; height:3px;
    border-radius:50%;
    background: var(--accent-1);
    box-shadow:0 0 6px 1px rgba(var(--accent-glow),0.85);
    opacity:0;
    animation: riseParticle 6s ease-in infinite;
    z-index:2;
  }
  @keyframes riseParticle{
    0%{ transform:translate(-50%,0) scale(0.5); opacity:0; }
    12%{ opacity:0.9; }
    70%{ opacity:0.6; }
    100%{ transform:translate(-50%,-210px) scale(0.3); opacity:0; }
  }

  .anonc-cloud-pos{
    position:absolute;
    left:50%; top:2%;
    transform:translateX(-50%);
    width:76%;
    z-index:3;
  }
  .anonc-cloud-float{ animation: cloudFloat 4.5s ease-in-out infinite; }
  .anonc-cloud-breathe{ animation: cloudBreathe 5s ease-in-out infinite; transform-origin:50% 70%; }
  @keyframes cloudFloat{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(-10px); }
  }
  @keyframes cloudBreathe{
    0%,100%{ transform: scale(1); }
    50%{ transform: scale(1.035); }
  }

  .anonc-cloud-glow{
    position:absolute;
    left:50%; top:48%;
    width:120%; height:120%;
    transform:translate(-50%,-50%);
    background: radial-gradient(closest-side, rgba(var(--accent-glow),0.35), rgba(var(--accent-glow),0) 70%);
    opacity:0;
    animation: cloudLight 5s ease-in-out infinite;
    pointer-events:none;
    z-index:1;
  }
  @keyframes cloudLight{
    0%, 68%{ opacity:0; }
    80%{ opacity:1; }
    95%{ opacity:0; }
    100%{ opacity:0; }
  }

  .anonc-cloud-svg{
    width:100%;
    display:block;
    filter: drop-shadow(0 22px 26px rgba(0,0,0,0.5));
    position:relative;
    z-index:2;
    transition: filter .4s ease;
  }
  .anonc-card.anonc-light .anonc-cloud-svg{
    filter: drop-shadow(0 16px 20px rgba(80,70,50,0.28));
  }

  .anonc-cloud-text{
    position:absolute;
    left:50%; top:46%;
    transform:translate(-50%,-50%);
    width:62%;
    text-align:center;
    color:#2a2c31;
    font-weight:700;
    font-size:clamp(14px,4.2vw,18px);
    line-height:1.35;
    z-index:3;
  }
  .anonc-cloud-text .anonc-caret{
    display:inline-block;
    width:2px;
    margin-left:2px;
    background:#3a3c42;
    animation:blink 0.85s steps(1) infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  .anonc-hint{
    position:absolute;
    left:50%; top:46%;
    transform:translate(-50%,-50%);
    width:58%;
    text-align:center;
    color:#8a8d94;
    font-size:11px;
    letter-spacing:0.02em;
    font-style:italic;
    transition:opacity .4s ease;
    z-index:3;
  }
  .anonc-hint.anonc-hidden{ opacity:0; }

  .anonc-badge-wrap{
    position:absolute;
    left:50%; bottom:9%;
    transform:translateX(-50%);
    z-index:3;
    text-align:center;
  }

  .anonc-badge{
    position:relative;
    width:88px; height:88px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 22px rgba(0,0,0,0.6);
    animation: badgePulse 5s ease-in-out infinite;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
    user-select:none;
  }
  .anonc-badge img.anonc-avatar-logo{
    width:100%; height:100%;
    border-radius:50%;
    object-fit:cover;
    display:block;
    position:relative;
    z-index:2;
    backface-visibility:hidden;
    transition: opacity .35s ease, transform .35s ease, filter .35s ease;
  }
  @keyframes badgePulse{
    0%, 55%{ box-shadow:0 10px 22px rgba(0,0,0,0.6); }
    65%{ box-shadow:0 10px 30px rgba(0,0,0,0.6), 0 0 22px 8px rgba(var(--accent-glow),0.6); }
    85%{ box-shadow:0 10px 22px rgba(0,0,0,0.6); }
    100%{ box-shadow:0 10px 22px rgba(0,0,0,0.6); }
  }
  .anonc-badge.anonc-no-auto-pulse{ animation:none; }

  .anonc-badge-q{
    position:absolute;
    inset:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background: radial-gradient(120% 120% at 30% 25%, #262626, #0a0a0a 65%);
    z-index:3;
    opacity:0;
    transform: scale(0.4) rotate(-20deg);
    pointer-events:none;
  }
  .anonc-badge-q span{
    color:var(--accent-1);
    font-size:34px;
    font-weight:800;
    font-family: Georgia, 'Times New Roman', serif;
    text-shadow:0 0 12px rgba(var(--accent-glow),0.8);
    line-height:1;
  }

  .anonc-badge.anonc-avatar-hide img.anonc-avatar-logo{
    opacity:0;
    transform: scale(0.5) rotate(15deg);
    filter: blur(2px);
  }
  .anonc-badge.anonc-q-show .anonc-badge-q{
    opacity:1;
    transform: scale(1) rotate(0deg);
    transition: opacity .4s cubic-bezier(.34,1.56,.64,1), transform .4s cubic-bezier(.34,1.56,.64,1);
  }
  .anonc-badge.anonc-q-hide .anonc-badge-q{
    opacity:0;
    transform: scale(0.5) rotate(15deg);
    transition: opacity .3s ease, transform .3s ease;
  }
  .anonc-badge.anonc-avatar-show img.anonc-avatar-logo{
    opacity:1;
    transform: scale(1) rotate(0deg);
    filter: blur(0px);
    transition: opacity .45s cubic-bezier(.34,1.56,.64,1), transform .45s cubic-bezier(.34,1.56,.64,1), filter .45s ease;
  }
  @keyframes qFloatPulse{
    0%,100%{ transform: scale(1) rotate(0deg); }
    50%{ transform: scale(1.08) rotate(0deg); }
  }
  .anonc-badge.anonc-q-idle .anonc-badge-q{ animation: qFloatPulse 1.6s ease-in-out infinite; }

  .anonc-badge-ring{
    position:absolute; inset:-6px;
    border-radius:50%;
    border:1.5px solid rgba(var(--accent-glow),0);
    z-index:4;
    pointer-events:none;
  }
  .anonc-badge.anonc-ring-ping .anonc-badge-ring{
    animation: ringPing 0.9s ease-out;
  }
  @keyframes ringPing{
    0%{ border-color: rgba(var(--accent-glow),0.9); transform:scale(1); opacity:1; }
    100%{ border-color: rgba(var(--accent-glow),0); transform:scale(1.5); opacity:0; }
  }

  .anonc-anon-accent{
    position:absolute;
    right:-4px; top:-4px;
    width:26px; height:26px;
    border-radius:50%;
    background: radial-gradient(120% 120% at 30% 25%, #242424, #0a0a0a 60%);
    border:1.5px solid var(--accent-2);
    display:flex; align-items:center; justify-content:center;
    z-index:5;
    box-shadow:0 3px 8px rgba(0,0,0,0.5);
  }
  .anonc-anon-accent svg{ width:13px; height:13px; }

  .anonc-badge-label{
    margin-top:10px;
    color:var(--accent-1);
    font-size:10px;
    letter-spacing:0.34em;
    font-weight:700;
    transition: color .4s ease;
  }
  .anonc-card.anonc-light .anonc-badge-label{
    color:#141414;
  }

  .anonc-footer{
    position:absolute;
    bottom:4%;
    left:0; right:0;
    z-index:6;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .anonc-footer .anonc-divider{
    display:flex; align-items:center; gap:10px;
    color: var(--brand-color);
  }
  .anonc-footer .anonc-divider::before,
  .anonc-footer .anonc-divider::after{
    content:"";
    width:46px; height:1px;
    background:linear-gradient(90deg, transparent, var(--divider-color));
  }
  .anonc-footer .anonc-divider::after{ background:linear-gradient(90deg, var(--divider-color), transparent); }
  .anonc-footer .anonc-brand{
    font-size:11px;
    letter-spacing:0.12em;
    color: var(--brand-color);
    transition: color .4s ease;
  }
  .anonc-spark-btn{
    appearance:none; border:none; background:none;
    padding:6px; margin-top:2px;
    cursor:pointer;
    line-height:0;
  }
  .anonc-spark-btn:focus-visible{ outline:2px solid var(--accent-1); outline-offset:3px; border-radius:50%; }
  .anonc-spark-btn svg{
    width:16px; height:16px;
    animation: twinkle 2.4s ease-in-out infinite;
  }
  .anonc-spark-btn svg path{ fill: var(--accent-1); }
  @keyframes twinkle{
    0%,100%{ opacity:0.55; transform:scale(0.9); }
    50%{ opacity:1; transform:scale(1.15); }
  }

  @media (prefers-reduced-motion: reduce){
    .anonc-cloud-float, .anonc-cloud-breathe, .anonc-badge, .anonc-threads line, .anonc-particle, .anonc-light-pulse, .anonc-cloud-glow, .anonc-fog, .anonc-spark-btn svg, .anonc-vip-fx{
      animation:none !important;
    }
  }

/* ══════════════════════════════════════════════════════
   CLASH OR COMPLIMENT — carte "Texte" (spec §5D, 2026-08-08)
   Avant : fond sombre uni + texte blanc simple, aucune animation.
   Refonte "premium" : fond dégradé vivant avec halos qui respirent,
   grande guillemet décorative dorée, typographie serif élégante pour
   la question, léger reflet qui balaie la carte. Cohérent avec le
   langage visuel déjà établi ailleurs (Tournoi Elite, splash VIP).
══════════════════════════════════════════════════════ */
.coc-text-card{
  position:relative; overflow:hidden; width:100%; box-sizing:border-box;
  background:
    radial-gradient(circle at 18% 15%, rgba(239,68,68,.16), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(16,185,129,.14), transparent 55%),
    linear-gradient(160deg, #150c28 0%, #1a0a2e 55%, #0d0a1a 100%);
}
.coc-text-card::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.05) 48%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.05) 52%,transparent 60%);
  animation: cocCardSweep 7s ease-in-out infinite;
}
@keyframes cocCardSweep{ 0%,100%{ transform:translateX(-14%); } 50%{ transform:translateX(14%); } }
.coc-text-card::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.35), transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,.3), transparent 100%);
  animation: cocCardTwinkle 4s ease-in-out infinite;
}
@keyframes cocCardTwinkle{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
.coc-text-card-inner{ position:relative; z-index:1; }
.coc-text-card-head{
  display:flex; align-items:center; gap:12px; padding:20px 20px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.coc-text-card-avatar{
  width:48px; height:48px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg,#a855f7,#f43f5e);
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(201,168,76,.5);
}
.coc-text-card-name{ font-size:15px; font-weight:700; color:white; }
.coc-text-card-sub{ font-size:12px; color:rgba(255,255,255,.4); }
.coc-text-card-qzone{ padding:26px 26px 32px; text-align:center; }
.coc-text-card-quote{
  font-family:Georgia,serif; font-size:42px; line-height:1; font-weight:900;
  background:linear-gradient(135deg,#e6c877,#c9a84c);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  opacity:.85; margin-bottom:4px;
}
.coc-text-card-q{
  font-family:Georgia,serif; font-size:21px; font-weight:700; color:#fdfaf3;
  line-height:1.5; word-break:break-word;
  text-shadow:0 0 24px rgba(230,200,119,.25);
  opacity:0; transform:translateY(8px);
  animation: cocQFadeIn .6s ease forwards .15s;
}
@keyframes cocQFadeIn{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .coc-text-card::before, .coc-text-card::after, .coc-text-card-q{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ══ SÉLECTEUR D'AVATAR ══ */
.avpick-tab{
  flex:1; padding:9px 6px; border-radius:10px; border:1.5px solid var(--border);
  background:transparent; color:rgba(var(--text-rgb),.55); font-size:12.5px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:all .15s;
}
.avpick-tab.on{ background:rgba(var(--kw-violet-rgb),.15); border-color:var(--kw-violet); color:var(--kw-violet); }
.avpick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.avpick-item{
  aspect-ratio:1/1; border-radius:50%; overflow:hidden; cursor:pointer; position:relative;
  border:2.5px solid transparent; transition:transform .15s, border-color .15s;
  background:rgba(var(--text-rgb),.06);
}
.avpick-item:hover{ transform:scale(1.06); }
.avpick-item.selected{ border-color:var(--kw-violet); box-shadow:0 0 0 2px rgba(var(--kw-violet-rgb),.3); }
.avpick-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.avpick-item.locked::after{
  content:'🔒'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); font-size:20px; border-radius:50%;
}

/* ══ QUESTION DE LA SEMAINE — carte d'aperçu page d'accueil ══ */
.wq-card{
  position:relative; width:100%; max-width:420px; margin:28px auto 0;
  border-radius:24px; overflow:hidden; cursor:pointer; text-align:left;
  background:
    radial-gradient(circle at 15% 25%, rgba(99,102,241,.35), transparent 55%),
    radial-gradient(circle at 85% 60%, rgba(168,85,247,.3), transparent 55%),
    linear-gradient(160deg, #1a1440 0%, #2a1a5e 55%, #150c33 100%);
  border:1.5px solid rgba(168,85,247,.4);
  box-shadow:0 8px 32px rgba(88,28,135,.35);
  padding:18px 18px 20px;
  min-height:200px;
}
.wq-card-badge{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800;
  letter-spacing:.5px; color:#fca5a5; background:rgba(239,68,68,.15);
  border-radius:100px; padding:4px 11px; margin-bottom:10px;
}
.wq-card-ring{ position:absolute; top:16px; right:16px; width:60px; height:60px; }
.wq-ring-text{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.wq-ring-text span{ font-family:Georgia,serif; font-size:16px; font-weight:900; color:white; line-height:1; }
/* ROOT FIX (Marvens, 2026-08-11, point 14) : "jours restants" (et
   surtout "días restantes"/"dias restantes"/"jou restan yo" dans les
   autres langues) débordait du cercle — aucune limite de largeur, pas
   de retour à la ligne. Le texte est maintenant contraint à la largeur
   utile du cercle et peut passer sur 2 lignes si besoin, quelle que
   soit la langue. */
.wq-ring-text small{
  font-size:6px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.2px; margin-top:1px;
  max-width:40px; line-height:1.05; text-align:center; white-space:normal; word-break:break-word; hyphens:auto;
}
.wq-card-mascot{
  position:absolute; left:-8px; bottom:0; width:130px; height:auto; pointer-events:none;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));
}
.wq-card-body{ margin-left:118px; padding-top:4px; }
.wq-card-pill{
  display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800;
  color:#f0abfc; background:rgba(240,171,252,.12); border-radius:100px; padding:3px 10px; margin-bottom:10px;
}
.wq-card-question{
  font-size:17px; font-weight:800; color:white; line-height:1.35; margin-bottom:12px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.wq-card-stats{ display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.wq-card-answers{ font-size:11.5px; color:rgba(255,255,255,.65); }
.wq-card-rating{ font-size:12px; color:#fbbf24; font-weight:700; }
.wq-card-cta{
  background:linear-gradient(135deg,#f0c14b,#e0a92e); border:none; border-radius:100px;
  padding:11px 22px; font-size:13.5px; font-weight:800; color:#241a02; cursor:pointer;
  font-family:inherit; box-shadow:0 4px 14px rgba(224,169,46,.35);
}
@media (max-width:380px){
  .wq-card-mascot{ width:100px; }
  .wq-card-body{ margin-left:92px; }
}

/* ══ QUESTION DE LA SEMAINE — ÉCRAN DÉCOUVRIR ══ */
#s-wq-discover{ background:#050310; min-height:100%; }
#s-wq-discover .wq-d-hdr h1{ color:#fff; }
#s-wq-discover .wq-d-hdr .btn-back{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; }
#s-wq-discover .wq-answers-hdr h2{ color:#fff; }
#s-wq-discover .wq-ans-card{ background:rgba(15,10,35,.55); border-color:rgba(255,255,255,.09); backdrop-filter:blur(6px); }
#s-wq-discover .wq-ans-card.mine{ border-color:rgba(247,207,90,.5); background:rgba(247,207,90,.07); }
#s-wq-discover .wq-ans-name{ color:#fff; }
#s-wq-discover .wq-ans-text{ color:#e6dfff; }
#s-wq-discover .wq-d-empty{ color:rgba(255,255,255,.45); }
.wq-d-wrap{ width:100%; max-width:480px; margin:0 auto; padding:0 0 20px; }
.wq-d-hdr{
  display:flex; align-items:center; gap:12px; padding:18px 16px 10px;
}
.wq-d-hdr h1{
  flex:1; text-align:center; font-family:Georgia,serif; font-size:20px; font-weight:900;
  color:var(--text); margin-right:34px;
}
.wq-d-lang{ display:flex; gap:4px; }
.wq-d-lang button{
  background:rgba(var(--text-rgb),.08); border:1px solid rgba(var(--text-rgb),.12);
  border-radius:100px; padding:4px 8px; font-size:12px; cursor:pointer; font-family:inherit;
}
.wq-d-lang button.on{ background:rgba(168,85,247,.25); border-color:#a855f7; }

.wq-d-hero{
  position:relative; margin:6px 16px 0; padding:22px 18px 20px; border-radius:24px; overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(99,102,241,.4), transparent 60%),
    radial-gradient(circle at 85% 70%, rgba(236,72,153,.28), transparent 55%),
    linear-gradient(160deg, #171034 0%, #241757 55%, #12081f 100%);
  border:1.5px solid rgba(168,85,247,.35);
  box-shadow:0 10px 36px rgba(88,28,135,.4);
}
.wq-d-glow{
  position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:280px; height:220px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(129,140,248,.35), transparent 70%);
  filter:blur(6px);
}
.wq-d-pillrow{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.wq-d-question{
  position:relative; font-size:21px; font-weight:800; color:white; line-height:1.35; margin-bottom:16px;
}
.wq-d-meta{ position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.wq-d-avatars{ display:flex; }
.wq-d-avatars span{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:white; border:2px solid #241757; margin-left:-8px;
}
.wq-d-avatars span:first-child{ margin-left:0; }
.wq-d-count{ font-size:12px; color:rgba(255,255,255,.7); }
.wq-d-rating{ font-size:12.5px; color:#fbbf24; font-weight:700; }

.wq-featured{
  position:relative; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:14px 16px; margin-bottom:16px;
}
.wq-featured-label{ font-size:10.5px; font-weight:800; letter-spacing:.5px; color:#fbbf24; margin-bottom:6px; }
.wq-featured-text{ font-size:14px; font-style:italic; color:white; line-height:1.5; margin-bottom:8px; }
.wq-featured-foot{ display:flex; justify-content:space-between; font-size:11.5px; color:rgba(255,255,255,.6); }
.wq-featured-rating{ color:#fbbf24; font-weight:700; }

.wq-answer-btn{
  position:relative; width:100%; border:none; border-radius:100px; overflow:hidden;
  background:linear-gradient(160deg,#ffe9ad 0%,#f7cf5a 45%,#e8963d 100%);
  padding:14px; font-size:15.5px; font-weight:800; color:#3a2400; cursor:pointer; font-family:inherit;
  box-shadow:0 4px 0 #a5651a, 0 14px 26px -10px rgba(232,150,61,.7);
}
.wq-answer-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 #a5651a, 0 8px 18px -10px rgba(232,150,61,.7); }
.wq-answer-btn:disabled{ opacity:.55; cursor:default; }

.wq-answers-section{ padding:22px 16px 0; }
.wq-answers-hdr{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.wq-answers-hdr h2{ font-family:Georgia,serif; font-size:17px; color:var(--text); }
.wq-see-all{ background:none; border:none; color:#a855f7; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; }

.wq-ans-card{
  position:relative; background:var(--surface); border:1px solid rgba(var(--text-rgb),.08); border-radius:16px;
  padding:14px 14px 12px; margin-bottom:10px;
}
.wq-ans-card.mine{ border-color:rgba(168,85,247,.5); background:rgba(168,85,247,.06); }
.wq-ans-rank{
  position:absolute; top:-8px; left:12px; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; color:#241a02;
  background:#e5e7eb;
}
.wq-ans-rank.r1{ background:linear-gradient(160deg,#ffe9ad,#f7ce5b,#e8963d); }
.wq-ans-rank.r2{ background:linear-gradient(160deg,#f2f2f2,#c7c7cf,#9a9aa5); }
.wq-ans-rank.r3{ background:linear-gradient(160deg,#e2a86a,#c17a3a,#8f4f1f); color:#2a1608; }
.wq-ans-card.r1{ border-color:#f7ce5b; box-shadow:0 0 0 1px rgba(247,206,91,.3),0 0 24px 2px rgba(247,206,91,.3); }
.wq-ans-crown{ position:absolute; top:12px; right:12px; font-size:15px; }
.wq-ans-tags{ display:flex; gap:5px; margin-bottom:7px; flex-wrap:wrap; }
.wq-ans-tag{ font-size:10px; font-weight:800; padding:2px 8px; border-radius:100px; }
.wq-ans-tag.moment{ background:rgba(247,207,90,.15); color:#ffd873; border:1px solid rgba(247,207,90,.4); }
.wq-ans-tag.choice{ background:rgba(139,92,246,.2); color:#cba9ff; border:1px solid rgba(139,92,246,.5); }
.wq-tabs{ display:flex; gap:8px; margin-bottom:12px; }
.wq-tab{ flex:1; text-align:center; padding:9px 4px; border-radius:12px; font-size:12px; font-weight:800; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#cabdf0; cursor:pointer; }
.wq-tab.on{ background:linear-gradient(135deg,rgba(247,207,90,.22),rgba(232,150,61,.13)); color:#ffcc4d; border-color:rgba(247,207,90,.45); }
.wq-ans-hdr{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.wq-ans-avatar{
  width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background:linear-gradient(135deg,#a855f7,#6366f1); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:white;
}
.wq-ans-name{ font-size:13px; font-weight:700; color:var(--text); }
.wq-ans-name .crown{ color:var(--gold); margin-left:3px; }
.wq-ans-text{ font-size:14px; color:rgba(var(--text-rgb),.85); line-height:1.5; margin-bottom:10px; }
.wq-ans-foot{ display:flex; align-items:center; justify-content:space-between; }
.wq-ans-stars{ font-size:12px; color:#fbbf24; font-weight:700; }
.wq-ans-ratebtn{
  background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.3); color:#a855f7;
  border-radius:100px; padding:5px 12px; font-size:11.5px; font-weight:700; cursor:pointer; font-family:inherit;
}
.wq-ans-ratebtn.rated{ opacity:.6; cursor:default; }
.wq-d-empty{ text-align:center; padding:30px 16px; font-size:13px; color:rgba(var(--text-rgb),.5); }

/* ══ MODALS RÉPONDRE / NOTER ══ */
.wq-modal-overlay{
  position:fixed; inset:0; z-index:10000; display:flex; align-items:flex-end;
  background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
}
.wq-modal{
  width:100%; max-width:480px; margin:0 auto; background:var(--bg); border-radius:24px 24px 0 0;
  padding:20px 20px 28px; max-height:85vh; overflow-y:auto;
}
.wq-modal-sm{ border-radius:24px; margin:auto 16px; }
.wq-modal-hdr{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.wq-modal-hdr h3{ font-family:Georgia,serif; font-size:18px; color:var(--text); }
.wq-modal-close{
  background:rgba(var(--text-rgb),.08); border:none; width:30px; height:30px; border-radius:50%;
  color:var(--text); font-size:14px; cursor:pointer;
}
.wq-modal-question{ font-size:13.5px; color:rgba(var(--text-rgb),.6); margin-bottom:14px; line-height:1.4; }
#wq-answer-textarea{
  width:100%; min-height:120px; background:var(--surface); border:1px solid rgba(var(--text-rgb),.12);
  border-radius:14px; padding:12px 14px; font-size:14px; color:var(--text); font-family:inherit;
  resize:vertical;
}
.wq-modal-count{ text-align:right; font-size:11px; color:rgba(var(--text-rgb),.4); margin:6px 2px 14px; }
.wq-modal-submit{
  width:100%; padding:14px; border-radius:100px; border:none;
  background:linear-gradient(135deg,#f0c14b,#e0a92e); color:#241a02;
  font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;
}
.wq-modal-submit:disabled{ opacity:.5; cursor:not-allowed; }
.wq-rate-stars{ display:flex; justify-content:center; gap:8px; font-size:34px; margin:18px 0 22px; }
.wq-rate-stars span{ cursor:pointer; color:rgba(var(--text-rgb),.2); transition:color .15s; }
.wq-rate-stars span.on{ color:#fbbf24; }

/* ══ GUIDE KNOWME — modale d'aide accordéon ══ */
.guide-modal-sheet{ max-height:82vh; }
.guide-cat{ border-bottom:1px solid var(--border); }
.guide-cat:last-child{ border-bottom:none; }
.guide-cat-hdr{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 2px; cursor:pointer; user-select:none;
}
.guide-cat-title{ font-weight:700; font-size:14.5px; color:var(--text); }
.guide-cat-arrow{ color:var(--kw-violet); font-size:13px; transition:transform .2s; flex-shrink:0; }
.guide-cat.open .guide-cat-arrow{ transform:rotate(90deg); }
.guide-cat-body{ display:none; padding:0 2px 16px; }
.guide-cat.open .guide-cat-body{ display:block; }
.guide-sub{ margin-bottom:14px; }
.guide-sub-title{ font-weight:700; font-size:13px; color:var(--kw-violet); margin-bottom:4px; }
.guide-sub-text{ font-size:13px; line-height:1.6; color:rgba(var(--text-rgb),.8); }
.guide-sub-text ul{ margin:4px 0 0 18px; padding:0; }
.guide-sub-text li{ margin-bottom:4px; }