:root{--bg:#0a0a0f;--sf:#13131a;--sf2:#1c1c28;--gold:#f5c842;--gold2:#e8a800;--red:#e8344a;--green:#2ecc71;--blue:#4a9eff;--tx:#f0f0f0;--mt:#6b6b80;--bd:rgba(255,255,255,0.07);--nav-h:54px;}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;width:100%;}
body{background:#060609;color:var(--tx);font-family:'DM Sans',sans-serif;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;min-height:100dvh;}
*{scrollbar-width:none;}
*::-webkit-scrollbar{display:none;}
.wrap{
  width:100%;
  max-width:390px;
  height:100dvh;
  min-height:100dvh;
  background:var(--bg);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  box-sizing:border-box;
}
/* Mobile : plein écran, pas de bandes */
@media(max-width:499px){.wrap{max-width:100%;}}
#result.on{overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* ── iPhone SE et petits écrans (< 375px) ── */
@media(max-width:374px){
  .wrap{font-size:14px;}
  .home-btn{font-size:12px;padding:10px 8px;}
  .mc-card{padding:10px 8px;}
  .xpw{padding:12px 10px;}
}

/* ── Desktop / tablette portrait (≥ 500px) ── */
@media(min-width:500px){
  body{
    background:
      radial-gradient(ellipse 60% 50% at 30% 20%, rgba(245,200,66,.055) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 75% 70%, rgba(168,85,247,.04) 0%, transparent 55%),
      radial-gradient(ellipse 40% 35% at 60% 15%, rgba(96,165,250,.03) 0%, transparent 50%),
      #060609;
    align-items:center;
    justify-content:center;
  }
  .wrap{
    width:390px;
    height:min(844px, 100dvh);
    border-radius:50px;
    border:1.5px solid rgba(255,255,255,0.08);
    box-shadow:0 0 80px rgba(245,200,66,0.06),0 50px 100px rgba(0,0,0,0.8);
    flex-shrink:0;
  }
}

/* ── Tablette portrait large (≥ 768px) ── */
@media(min-width:768px){
  body::before{
    content:'';
    position:fixed;inset:0;
    background:
      radial-gradient(ellipse 40% 30% at 20% 50%, rgba(245,200,66,.025) 0%, transparent 60%),
      radial-gradient(ellipse 40% 30% at 80% 50%, rgba(168,85,247,.02) 0%, transparent 60%);
    pointer-events:none;
    z-index:0;
  }
  .wrap{
    height:min(844px, 95dvh);
  }
}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .3s;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.scr.on{opacity:1;pointer-events:all;}

/* ══ ARCADE SECRÈTE ══ */
.arc-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.arc-bg::before{content:'';position:absolute;inset:0;}
.arc-bg::after{content:'';position:absolute;inset:0;}
#arcade-menu .arc-bg{position:fixed;inset:0;}
#arcade-menu .arc-bg::before{
  background:
    radial-gradient(ellipse 50% 55% at 18% 10%, rgba(220,160,20,.30) 0%, transparent 58%),
    radial-gradient(ellipse 42% 38% at 82% 8%,  rgba(160,20,20,.28) 0%, transparent 56%),
    radial-gradient(ellipse 36% 48% at 8% 55%,  rgba(120,15,30,.22) 0%, transparent 58%),
    radial-gradient(ellipse 50% 36% at 85% 78%, rgba(180,90,10,.20) 0%, transparent 58%),
    radial-gradient(ellipse 44% 30% at 45% 92%, rgba(80,10,100,.18) 0%, transparent 56%);
  animation: arcOrbeFloat1 12s ease-in-out infinite;
}
#arcade-menu .arc-bg::after{
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 25%, rgba(0,0,0,.82) 100%);
  animation: arcOrbeFloat2 16s ease-in-out infinite;
}

@keyframes arcOrbeFloat1 {
  0%,100% { transform: translate(0, 0)    scale(1);    opacity: 1; }
  20%     { transform: translate(3%, 5%)  scale(1.06); opacity: .92; }
  40%     { transform: translate(-4%, 2%) scale(.97);  opacity: .88; }
  60%     { transform: translate(5%,-3%)  scale(1.04); opacity: .94; }
  80%     { transform: translate(-2%, 4%) scale(.98);  opacity: .90; }
}
@keyframes arcOrbeFloat2 {
  0%,100% { transform: translate(0, 0)    scale(1); }
  25%     { transform: translate(-3%,-4%) scale(1.03); }
  50%     { transform: translate(4%, 3%)  scale(.98); }
  75%     { transform: translate(-2%, 5%) scale(1.02); }
}
#arc-snake .arc-bg::before{background:radial-gradient(ellipse 52% 42% at 35% 30%,rgba(20,150,50,.50) 0%,transparent 58%),radial-gradient(ellipse 44% 38% at 70% 65%,rgba(10,100,30,.28) 0%,transparent 56%);}
#arc-snake .arc-bg::after{background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.90) 100%);}
#arc-bricks .arc-bg::before{background:radial-gradient(ellipse 52% 42% at 65% 28%,rgba(200,60,10,.50) 0%,transparent 58%),radial-gradient(ellipse 44% 38% at 25% 68%,rgba(150,30,0,.28) 0%,transparent 56%);}
#arc-bricks .arc-bg::after{background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.90) 100%);}
#arc-morpion .arc-bg::before{background:radial-gradient(ellipse 52% 42% at 40% 28%,rgba(110,0,160,.50) 0%,transparent 58%),radial-gradient(ellipse 44% 38% at 70% 68%,rgba(80,0,130,.28) 0%,transparent 56%);}
#arc-morpion .arc-bg::after{background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.90) 100%);}
#arc-slots .arc-bg::before{background:radial-gradient(ellipse 55% 45% at 30% 30%,rgba(200,160,0,.48) 0%,transparent 56%),radial-gradient(ellipse 45% 38% at 72% 62%,rgba(160,100,0,.30) 0%,transparent 56%);}
#arc-slots .arc-bg::after{background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.90) 100%);}
#reco .arc-bg::before{background:radial-gradient(ellipse 55% 45% at 30% 25%,rgba(168,85,247,.42) 0%,transparent 56%),radial-gradient(ellipse 45% 38% at 72% 65%,rgba(109,40,217,.28) 0%,transparent 56%),radial-gradient(ellipse 38% 32% at 55% 80%,rgba(196,132,252,.18) 0%,transparent 54%);}
#reco .arc-bg::after{background:radial-gradient(ellipse 40% 32% at 60% 38%,rgba(168,85,247,.08) 0%,transparent 52%),radial-gradient(ellipse 80% 70% at 50% 50%,transparent 25%,rgba(0,0,0,.92) 100%);}
#reco>*:not(.arc-bg){position:relative;z-index:1;}
#arcade-menu>*:not(.arc-bg),#arc-snake>*:not(.arc-bg),#arc-bricks>*:not(.arc-bg),#arc-morpion>*:not(.arc-bg),#arc-slots>*:not(.arc-bg){position:relative;z-index:1;}
.arc-head{
  position:relative;top:auto;left:auto;right:auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 12px;
  flex-shrink:0;z-index:2;
}
.arc-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;letter-spacing:2px;color:var(--gold);}
.arc-score-badge{font-family:'Special Gothic Expanded One',sans-serif;font-size:16px;color:var(--gold);letter-spacing:1px;}
/* Centre arcade */
.arc-center{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 18px max(24px,env(safe-area-inset-bottom));
  width:100%;gap:10px;
}
/* Badge unlock */
.arc-unlock-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(245,200,66,.08);border:1px solid rgba(245,200,66,.2);
  border-radius:20px;padding:5px 14px;
  font-size:9px;letter-spacing:3px;color:var(--gold);
  font-family:'Special Gothic Expanded One',sans-serif;margin-bottom:4px;
}
.arc-subtitle{text-align:center;font-size:12px;color:rgba(255,255,255,.38);margin-bottom:20px;padding:0 24px;line-height:1.6;}
/* Nouvelle grille liste */
.arc-grid{display:flex;flex-direction:column;gap:10px;width:100%;}
.arc-card{
  display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:16px;
  cursor:pointer;transition:transform .15s,border-color .2s,background .2s;
  position:relative;overflow:hidden;
}
.arc-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--arc-color,rgba(245,200,66,.06)) 0%,transparent 60%);
  opacity:0;transition:opacity .2s;
}
.arc-card:active{transform:scale(.97);}
.arc-card:active::before{opacity:1;}
.arc-card:active{border-color:var(--arc-color,rgba(245,200,66,.4));}
.arc-card-icon{
  width:58px;height:58px;border-radius:16px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--arc-bg,rgba(245,200,66,.1));
  border:1px solid var(--arc-color,rgba(245,200,66,.25));
}
.arc-card-icon svg{width:28px;height:28px;color:var(--arc-color,var(--gold));}
.arc-card-body{flex:1;min-width:0;}
.arc-card-name{font-family:'Special Gothic Expanded One',sans-serif;font-size:17px;letter-spacing:1.5px;color:var(--tx);margin-bottom:2px;}
.arc-card-sub{font-size:11px;color:rgba(255,255,255,.35);margin-bottom:6px;}
.arc-card-hs{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--arc-color,var(--gold));letter-spacing:.3px;opacity:.8;}
.arc-card-arrow{color:rgba(255,255,255,.2);flex-shrink:0;}
.arc-card-arrow svg{width:16px;height:16px;}
/* Snake / Bricks common */
.arc-game-wrap{display:flex;justify-content:center;flex-shrink:0;}
.arc-game-wrap canvas{border-radius:12px;border:1px solid rgba(255,255,255,.08);}
.arc-dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px;justify-content:center;flex-shrink:0;}
.arc-btn{background:var(--sf2);border:1px solid rgba(255,255,255,.1);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;user-select:none;transition:background .1s;}
.arc-btn:active{background:rgba(245,200,66,.15);}
.arc-gameover{position:absolute;inset:0;background:rgba(6,6,9,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:10;border-radius:inherit;padding:14px 18px max(env(safe-area-inset-bottom),14px);}
.arc-go-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:40px;color:var(--red);letter-spacing:3px;}
.arc-go-score{font-size:16px;color:rgba(255,255,255,.7);}
.arc-btn-lg{background:linear-gradient(135deg,rgba(245,200,66,.15),rgba(245,200,66,.08));border:1px solid rgba(245,200,66,.3);border-radius:14px;padding:14px 24px;font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;letter-spacing:1px;color:var(--gold);text-align:center;cursor:pointer;margin-top:4px;transition:transform .15s;}
.arc-btn-lg:active{transform:scale(.96);}
/* Morpion */
#arc-morpion{overflow:hidden !important;}
#arcade-menu{padding-top:max(54px,env(safe-area-inset-top));display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;position:absolute;inset:0;}
#arcade-menu .arc-center{justify-content:flex-start;flex:none;}
#arcade-menu .arc-center::after{content:'';position:fixed;bottom:0;left:0;right:0;height:90px;background:linear-gradient(to top,rgba(40,18,2,.7) 0%,transparent 100%);pointer-events:none;z-index:2;max-width:500px;}
/* #reco — consolidé dans le bloc MODE RECO ci-dessous */
#arc-morpion .arc-head{padding:max(54px,env(safe-area-inset-top)) 18px 10px;flex-shrink:0;}
#arc-morpion .arc-center{flex:1;min-height:0;padding:0 20px max(16px,env(safe-area-inset-bottom));justify-content:center;}
.morp-vs{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:6px;}
.morp-player{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:6px 14px;border-radius:20px;}
.morp-player.p1{background:rgba(232,160,224,.1);border:1px solid rgba(232,160,224,.25);color:#e8a0e0;}
.morp-player.p2{background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.25);color:var(--gold);}
.morp-sep{font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;letter-spacing:2px;color:rgba(255,255,255,.3);}
.morp-status{text-align:center;font-size:12px;color:rgba(255,255,255,.4);margin:8px 0;letter-spacing:.3px;min-height:16px;}
.morp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-bottom:16px;}
.morp-cell{aspect-ratio:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:36px;cursor:pointer;transition:background .15s,transform .1s,border-color .2s;}
.morp-cell:active{transform:scale(.92);}
.morp-cell.win{background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.45);box-shadow:0 0 16px rgba(46,204,113,.15);}
.morp-cell.p1-cell{background:rgba(232,160,224,.07);border-color:rgba(232,160,224,.2);}
.morp-cell.p2-cell{background:rgba(245,200,66,.07);border-color:rgba(245,200,66,.2);}
.morp-scores{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;width:100%;}
.morp-sc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:10px 4px;text-align:center;}
/* ══ PUISSANCE 4 ══ */
.p4-cell{
  aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  transition:background .18s,transform .1s,box-shadow .18s;
  cursor:pointer;
}
.p4-cell.p1{background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b);border:none;box-shadow:0 2px 10px rgba(245,158,11,.55),inset 0 -2px 4px rgba(0,0,0,.25);}
.p4-cell.p2{background:radial-gradient(circle at 35% 30%,#fca5a5,#ef4444);border:none;box-shadow:0 2px 10px rgba(239,68,68,.55),inset 0 -2px 4px rgba(0,0,0,.25);}
.p4-cell.win{animation:p4win .5s ease-in-out infinite alternate;}
@keyframes p4win{from{transform:scale(1);}to{transform:scale(1.12);filter:brightness(1.3);}}
.p4-cell.drop{animation:p4drop .22s cubic-bezier(.4,0,.2,1) both;}
@keyframes p4drop{from{transform:scale(.6);opacity:.4;}to{transform:scale(1);opacity:1;}}
.p4-arrow{
  display:flex;align-items:center;justify-content:center;
  height:26px;border-radius:8px;cursor:pointer;
  color:rgba(251,191,36,.5);font-size:14px;
  transition:color .15s,background .15s,transform .1s;
}
.p4-arrow:hover,.p4-arrow.hover{color:rgba(251,191,36,.95);background:rgba(251,191,36,.1);}
.p4-arrow:active{transform:scale(.88);}
.p4-arrow.disabled{pointer-events:none;opacity:0;}
.p4-preview{background:rgba(251,191,36,.15) !important;border-color:rgba(251,191,36,.3) !important;}
.p4-diff-btn{
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;
  padding:5px 11px;border-radius:20px;cursor:pointer;
  color:rgba(255,255,255,.35);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  transition:color .15s,background .15s,border-color .15s,transform .1s;
  white-space:nowrap;
}
.p4-diff-btn:active{transform:scale(.93);}
.p4-diff-btn.active{
  color:#fbbf24;background:rgba(251,191,36,.15);
  border-color:rgba(251,191,36,.4);
}


.morp-sc-val{font-family:'Special Gothic Expanded One',sans-serif;font-size:26px;color:var(--gold);}
.morp-sc-lbl{font-size:9px;color:rgba(255,255,255,.3);letter-spacing:.5px;margin-top:1px;}
/* ─── SNAKE layout fixe ─── */
#arc-snake{overflow:hidden !important;}
#arc-snake .arc-head{
  position:relative;top:auto;left:auto;right:auto;
  padding:max(54px,env(safe-area-inset-top)) 18px 10px;
  flex-shrink:0;
}
#arc-snake .arc-center{
  flex:1;min-height:0;
  padding:0 12px max(12px,env(safe-area-inset-bottom));
  justify-content:space-between;
}
.sn-canvas-wrap{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;
}
#snake-canvas{border-radius:16px;border:1px solid rgba(255,255,255,.08);max-width:100%;max-height:100%;}
/* D-PAD repensé */
.arc-dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px);gap:6px;justify-content:center;flex-shrink:0;padding-bottom:4px;}
.arc-btn{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;transition:background .1s;-webkit-tap-highlight-color:transparent;}
.arc-btn svg{width:20px;height:20px;color:rgba(255,255,255,.7);}
.arc-btn:active{background:rgba(245,200,66,.18);border-color:rgba(245,200,66,.4);}
.arc-btn:active svg{color:var(--gold);}
.arc-btn.pause-btn{background:rgba(245,200,66,.1);border-color:rgba(245,200,66,.25);}
.arc-btn.pause-btn svg{color:var(--gold);}

.br-slider-wrap{width:calc(100% - 32px);display:flex;flex-direction:column;align-items:center;gap:8px;}
.br-slider-hint{font-size:10px;color:rgba(255,255,255,.28);letter-spacing:1.5px;text-align:center;user-select:none;}
.br-slider-track{
  width:100%;height:56px;border-radius:28px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(245,200,66,.2);
  position:relative;cursor:grab;
  touch-action:none;user-select:none;
  overflow:hidden;
}
.br-slider-track:active{cursor:grabbing;}
.br-slider-fill{
  position:absolute;left:0;top:0;bottom:0;width:50%;
  background:linear-gradient(90deg,rgba(245,200,66,.08),rgba(245,200,66,.18));
  border-radius:28px;pointer-events:none;transition:width .05s linear;
}
.br-slider-thumb{
  position:absolute;top:50%;transform:translate(-50%,-50%);left:50%;
  width:48px;height:40px;border-radius:16px;
  background:linear-gradient(135deg,rgba(245,200,66,.9),rgba(220,160,0,.8));
  box-shadow:0 2px 16px rgba(245,200,66,.4),0 0 0 2px rgba(245,200,66,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;pointer-events:none;
  transition:width .1s,box-shadow .15s;
}
.br-slider-track:active .br-slider-thumb{
  width:56px;
  box-shadow:0 4px 24px rgba(245,200,66,.6),0 0 0 3px rgba(245,200,66,.4);
}
/* ── BRICKS layout fixe ── */
#arc-bricks{overflow:hidden !important;}
#arc-bricks .arc-head{padding:max(54px,env(safe-area-inset-top)) 18px 10px;flex-shrink:0;}

#arc-bricks .arc-center{flex:1;min-height:0;padding:12px 12px max(12px,env(safe-area-inset-bottom));justify-content:space-between;}
#arc-memory .arc-bg::before{background:radial-gradient(ellipse 52% 42% at 40% 28%,rgba(60,100,220,.48) 0%,transparent 58%),radial-gradient(ellipse 44% 38% at 70% 68%,rgba(30,60,180,.28) 0%,transparent 56%);}
#arc-memory .arc-bg::after{background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.90) 100%);}
#arc-memory>*:not(.arc-bg){position:relative;z-index:1;}
/* ── MEMORY layout ── */
#arc-memory{overflow:hidden !important;}
#arc-memory .arc-head{padding:max(54px,env(safe-area-inset-top)) 18px 10px;flex-shrink:0;}
#arc-speedquiz .arc-head{padding:max(54px,env(safe-area-inset-top)) 18px 10px;flex-shrink:0;}
#arc-memory .arc-center{flex:1;min-height:0;padding:8px 16px max(16px,env(safe-area-inset-bottom));justify-content:center;gap:10px;}
.mem-stats{display:flex;gap:10px;width:100%;flex-shrink:0;}
.mem-stat{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:8px;text-align:center;}
.mem-stat-val{font-family:'Special Gothic Expanded One',sans-serif;font-size:22px;color:var(--gold);}
.mem-stat-lbl{font-size:9px;color:rgba(255,255,255,.3);letter-spacing:.5px;}
.mem-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;width:100%;
  flex:1;min-height:0;
}
.mem-card{cursor:pointer;perspective:600px;-webkit-tap-highlight-color:transparent;min-height:0;}
.mem-card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.4,0,.2,1);}
.mem-card.flipped .mem-card-inner,.mem-card.matched .mem-card-inner{transform:rotateY(180deg);}
.mem-card-front,.mem-card-back{position:absolute;inset:0;border-radius:14px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.mem-card-front{background:rgba(96,165,250,.1);border:1px solid rgba(96,165,250,.25);}
.mem-card-front svg{width:22px;height:22px;color:rgba(96,165,250,.5);}
.mem-card-back{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transform:rotateY(180deg);font-size:28px;}
.mem-card.matched .mem-card-back{background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.4);}

#arc-slots{overflow:hidden !important;}
#arc-slots .arc-head{padding:max(54px,env(safe-area-inset-top)) 18px 10px;flex-shrink:0;}

#arc-slots .arc-center{flex:1;min-height:0;padding:8px 18px max(16px,env(safe-area-inset-bottom));justify-content:center;}

/* Slots redesign */
.slots-header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;}
.slots-credit-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.25);border-radius:20px;padding:8px 18px;}
.slots-credit-val{font-family:'Special Gothic Expanded One',sans-serif;font-size:28px;color:var(--gold);letter-spacing:1px;line-height:1;}
.slots-credit-lbl{font-size:10px;color:rgba(255,255,255,.35);letter-spacing:1px;}
.slots-machine{padding:0;margin:0 0 10px;position:relative;width:100%;}
.slots-window{display:flex;gap:8px;background:#0f0e18;border:2px solid rgba(245,200,66,.3);border-radius:20px;padding:10px;overflow:hidden;height:110px;position:relative;}
.slots-reel{flex:1;overflow:hidden;border-radius:12px;background:rgba(0,0,0,.4);position:relative;}
.slots-strip{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;transition:top .5s cubic-bezier(.25,.46,.45,.94);}
.slots-strip span{height:84px;display:flex;align-items:center;justify-content:center;font-size:44px;flex-shrink:0;}
.slots-line{position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%);height:2px;background:linear-gradient(90deg,transparent,rgba(245,200,66,.6),transparent);pointer-events:none;}
.slots-msg{text-align:center;font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;letter-spacing:1px;min-height:24px;color:var(--gold);margin-bottom:8px;}
.slots-paytable{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:10px 16px;font-size:11px;color:rgba(255,255,255,.35);display:flex;flex-direction:column;gap:4px;width:100%;margin-bottom:10px;}
.slots-paytable span{color:rgba(255,255,255,.55);}
.slots-spin-btn{width:100%;padding:16px;font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;letter-spacing:2px;background:linear-gradient(135deg,rgba(245,200,66,.18),rgba(245,200,66,.08));border:1px solid rgba(245,200,66,.35);border-radius:16px;color:var(--gold);cursor:pointer;transition:transform .15s;}
.slots-spin-btn:active{transform:scale(.97);}
.slots-over{display:none;flex-direction:column;gap:8px;width:100%;text-align:center;}


#home-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
  background:#0a0a0f;
  overflow:hidden;
}
#home-bg.visible{opacity:1;}

/* Canvas caché — les orbes CSS le remplacent */
#home-neuro{display:none;}

/* ── Orbes de lumière statiques ── */
#home-bg::before{
  content:'';
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* Orbe 1 — violet chaud, haut gauche */
    radial-gradient(ellipse 55% 40% at 18% 22%, rgba(168,85,247,.28) 0%, transparent 70%),
    /* Orbe 2 — or doux, haut centre-droit */
    radial-gradient(ellipse 45% 35% at 72% 12%, rgba(245,200,66,.18) 0%, transparent 65%),
    /* Orbe 3 — rose/magenta, milieu droit */
    radial-gradient(ellipse 38% 42% at 88% 48%, rgba(236,72,153,.20) 0%, transparent 68%),
    /* Orbe 4 — indigo, bas gauche */
    radial-gradient(ellipse 50% 38% at 12% 78%, rgba(99,102,241,.22) 0%, transparent 65%),
    /* Orbe 5 — bleu-cyan, bas centre */
    radial-gradient(ellipse 40% 30% at 55% 88%, rgba(56,189,248,.14) 0%, transparent 60%),
    /* Vignette sombre pour la lisibilité */
    radial-gradient(ellipse 90% 85% at 50% 50%, transparent 20%, rgba(0,0,0,.75) 100%);
}
#home-bg::after{
  content:'';
  position:absolute;inset:0;z-index:2;pointer-events:none;
  /* Grain très subtil via SVG inline pour du texture */
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity:.6;
}




/* -- HOME -- */
#home{
  padding:max(52px,calc(env(safe-area-inset-top) + 14px)) 14px max(40px,calc(env(safe-area-inset-bottom) + 24px));
  background:transparent;
  display:block !important;
  flex-direction:unset;
}

/* Contenu home au-dessus du fond */
#home > *{z-index:2;position:relative;}
/* Logo lumineux */
.logo{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:44px;letter-spacing:3px;line-height:1;
  background:linear-gradient(135deg,#fff3c0,var(--gold),#fff8e0,var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  
  animation:logoGlow 4s ease-in-out infinite;
}
@keyframes logoGlow{
  0%,100%{}
  50%{}
}
.logo-sub{font-size:10px;color:rgba(255,255,255,.35);letter-spacing:3px;text-transform:uppercase;margin-top:-2px;}

/* -- Topbar & buttons -- */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.tbr{display:flex;gap:8px;align-items:center;}
.ibtn{
  width:44px;height:44px;border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:transform .18s,background .18s,border-color .18s;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:rgba(255,255,255,.65);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.ibtn:active{transform:scale(.88);background:rgba(255,255,255,.1);}
.ibtn.off{opacity:.38;}
/* Couleurs spécifiques pour chaque bouton header (tous onglets) */
#btn-help,.ibtn-help{background:rgba(74,158,255,.08);border-color:rgba(74,158,255,.22);color:rgba(74,158,255,.75);}
#btn-help:active,.ibtn-help:active{background:rgba(74,158,255,.18);border-color:rgba(74,158,255,.4);}
#btn-music,.ibtn-music{background:rgba(245,200,66,.08);border-color:rgba(245,200,66,.22);color:rgba(245,200,66,.75);}
#btn-music:active,.ibtn-music:active{background:rgba(245,200,66,.18);border-color:rgba(245,200,66,.4);}
#btn-badges-home,.ibtn-badges{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.22);color:rgba(52,211,153,.75);}
#btn-badges-home:active,.ibtn-badges:active{background:rgba(52,211,153,.18);border-color:rgba(52,211,153,.4);}
#btn-profile{background:rgba(167,139,250,.08);border-color:rgba(167,139,250,.22);color:rgba(167,139,250,.75);}
#btn-profile:active{background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.4);}

/* -- XP widget -- */
/* ─── XP WIDGET ─── */
.xpw{
  background:linear-gradient(135deg,rgba(245,200,66,.11),rgba(232,168,0,.04));
  border:none;
  border-radius:20px;padding:18px 18px 15px;margin-bottom:10px;
  position:relative;overflow:hidden;
  box-shadow:0 2px 20px rgba(0,0,0,.25);
}
/* Bordure shimmer — fine ligne lumineuse qui tourne */
/* ── Card XP — Shimmer rotatif + grain pellicule ── */
.xpw::before{
  content:'';position:absolute;inset:-1.5px;border-radius:21.5px;z-index:0;
  background:conic-gradient(
    from var(--xpw-angle,0deg),
    rgba(245,200,66,0)     0%,
    rgba(245,200,66,.04)  10%,
    rgba(245,200,66,.14)  24%,
    rgba(255,235,130,.45)  36%,
    rgba(255,255,210,.85)  46%,
    rgba(255,255,240,1)    50%,
    rgba(255,255,210,.85)  54%,
    rgba(245,200,66,.14)   64%,
    rgba(245,200,66,.04)   76%,
    rgba(245,200,66,0)     84%,
    rgba(245,200,66,0)    100%
  );
  /* Masque en anneau : seule la bordure reste visible, le centre est transparent */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  padding:2px;
  animation:xpwBorderSpin 7s linear infinite;
  will-change:--xpw-angle;
  pointer-events:none;
}
@property --xpw-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes xpwBorderSpin{from{--xpw-angle:0deg;}to{--xpw-angle:360deg;}}
/* Fond intérieur */
.xpw::after{
  content:'';position:absolute;inset:1.5px;border-radius:19px;
  background:
    radial-gradient(ellipse 55% 45% at 50% -5%, rgba(255,240,180,.10) 0%, rgba(245,200,66,.04) 35%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(245,200,66,.13) 0%,transparent 65%),
    radial-gradient(ellipse 45% 35% at 88% 100%,rgba(232,168,0,.07) 0%,transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%,transparent 40%,rgba(0,0,0,.45) 100%),
    linear-gradient(135deg,#141008,#0e0b04);
  z-index:0;pointer-events:none;
  animation:xpwSpotlight 6s ease-in-out infinite;
}
@keyframes xpwSpotlight{
  0%,100%{opacity:1;}
  50%{opacity:.75;}
}
/* Grain pellicule par-dessus tout */
.xpw-grain{
  position:absolute;inset:0;border-radius:20px;z-index:3;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:overlay;
  animation:grainShift 0.09s steps(1) infinite;
}
/* Contenu au-dessus du masque ::after */
.xpw>*:not(.xpw-grain){position:relative;z-index:2;}
@keyframes grainShift{
  0%  {opacity:.07;background-position:0 0;}
  25% {opacity:.05;background-position:43px 17px;}
  50% {opacity:.09;background-position:-18px 38px;}
  75% {opacity:.06;background-position:27px -28px;}
  100%{opacity:.07;background-position:0 0;}
}
@keyframes vignettePulse{
  0%,100%{opacity:.6;}
  50%    {opacity:1;}
}
@keyframes cardGlowBreath{
  0%,100%{opacity:1;transform:scale(1);}
  50%    {opacity:.55;transform:scale(1.08);}
}
@property --hm-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
@property --ph-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}



.xpw-hero{display:flex;align-items:center;gap:12px;margin-bottom:12px;position:relative;z-index:1;}
.xpw-icon{
  font-size:30px;flex-shrink:0;
  width:46px;height:46px;border-radius:14px;
  background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.2);
  display:flex;align-items:center;justify-content:center;
  animation:xpIconFloat 4s ease-in-out infinite;
}
.xpw-icon svg{width:26px;height:26px;color:var(--gold);}
.lubig-i svg{width:58px;height:58px;color:var(--gold);}
.ricon svg{width:64px;height:64px;color:var(--gold);}
.lvl-row-icon svg{width:22px;height:22px;color:currentColor;}
@keyframes xpIconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

/* ── HOME CARD TILT ── */
.home-tilt-card{
  transform-style:preserve-3d;
  will-change:transform;
  transform:perspective(700px) rotateX(0deg) rotateY(0deg) scale(1);
  transition:transform .35s cubic-bezier(.2,1,.3,1), box-shadow .3s ease;
}
.home-tilt-card.htc-active{transition:none;}
.home-tilt-icon{
  transition:transform .35s cubic-bezier(.2,1,.3,1);
  will-change:transform;
}
.home-tilt-card.htc-active .home-tilt-icon{transition:none;}
.xpw-center{flex:1;min-width:0;}
.xpw-nm{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:22px;letter-spacing:2px;
  background:linear-gradient(90deg,#fff9e0,#f5c842,#ffe98a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;
}
/* Theme-aware rank name gradient — mirrors xpw shimmer color */
body.theme-neon    .xpw-nm{background:linear-gradient(90deg,#f0d8ff,#c466ff,#00e5ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.theme-crimson .xpw-nm{background:linear-gradient(90deg,#ffe0e5,#ff3a5c,#ff8fab);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.theme-ocean   .xpw-nm{background:linear-gradient(90deg,#e0faff,#00d4ff,#80f0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.theme-sunset  .xpw-nm{background:linear-gradient(90deg,#fff0d8,#ff8c38,#ffc87a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.theme-ice     .xpw-nm{background:linear-gradient(90deg,#f0faff,#8ed8f8,#45a8e0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.theme-aurora  .xpw-nm{background:linear-gradient(90deg,#f5eaff,#c084fc,#4ade80);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.theme-galaxy  .xpw-nm{background:linear-gradient(90deg,#ede8ff,#a78bfa,#00e5ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.theme-emerald .xpw-nm{background:linear-gradient(90deg,#e0fff3,#10f07c,#80ffc0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.theme-inferno .xpw-nm{background:linear-gradient(90deg,#fff5d8,#ff9500,#ffdd00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.theme-matrix  .xpw-nm{background:linear-gradient(90deg,#e0ffe6,#00ff41,#88ff00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.theme-rose    .xpw-nm{background:linear-gradient(90deg,#ffe8f4,#ff6eb4,#ffb8e0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.xpw-lvl{font-size:10px;color:rgba(255,255,255,.32);letter-spacing:2px;text-transform:uppercase;margin-top:3px;}
.xpw-right{text-align:right;flex-shrink:0;}
.xpw-xp{font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;color:var(--gold);letter-spacing:1px;}
.xpw-next{font-size:9px;color:rgba(255,255,255,.28);margin-top:2px;letter-spacing:.5px;}
.xpb-wrap{display:flex;align-items:center;gap:8px;position:relative;z-index:1;}
.xpb{flex:1;background:rgba(255,255,255,.06);border-radius:6px;height:6px;overflow:visible;position:relative;}
.xpbf{
  height:100%;border-radius:6px;position:relative;
  background:linear-gradient(90deg,rgba(200,155,30,.8),rgba(245,200,66,.9),rgba(255,230,120,.75));
  transition:width 1.4s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 5px rgba(245,200,66,.2);
  min-width:0;
}
.xpb-glow{
  position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;
  background:rgba(245,200,66,.85);
  box-shadow:0 0 5px 1px rgba(245,200,66,.35);
  animation:xpDot 2.8s ease-in-out infinite;
}
@keyframes xpDot{0%,100%{box-shadow:0 0 4px 1px rgba(245,200,66,.25);}50%{box-shadow:0 0 8px 3px rgba(245,200,66,.5);}}
.xpb-pct{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:13px;color:rgba(245,200,66,.75);
  letter-spacing:1px;flex-shrink:0;min-width:32px;text-align:right;
}
/* garder .xpw-top et .xpw-nl pour la compatibilité profil */
.xpw-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.xpw-nl{font-size:11px;color:rgba(255,255,255,.35);letter-spacing:.5px;}
.xps{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:rgba(255,255,255,.3);}
/* XP footer + badge next */
.xpw-footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px;min-height:14px;position:relative;z-index:1;}
.xpw-quote{margin-top:12px;padding:2px 12px;border-left:none;position:relative;z-index:1;}.xpw-quote::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:70%;border-radius:2px;background:rgba(245,200,66,.35);}
.xpw-quote-text{font-size:11px;font-style:italic;color:rgba(255,255,255,.55);line-height:1.5;letter-spacing:.1px;}
.xpw-quote-author{font-size:9.5px;color:rgba(245,200,66,.5);margin-top:4px;letter-spacing:.3px;}
.xpw-motivate{font-size:9.5px;color:rgba(245,200,66,.6);letter-spacing:.3px;flex:1;}
.xpw-today{font-size:9.5px;font-weight:600;color:rgba(46,204,113,.8);letter-spacing:.3px;flex-shrink:0;margin-left:8px;}
.xpw-accuracy{display:flex;align-items:center;gap:8px;margin-top:10px;position:relative;z-index:1;}
.xpw-accuracy-label{font-size:7.5px;color:rgba(255,255,255,.25);letter-spacing:2px;text-transform:uppercase;flex-shrink:0;}
.xpw-accuracy-bar-wrap{flex:1;height:4px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;}
.xpw-accuracy-bar{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width 1s cubic-bezier(.34,1.56,.64,1);width:0%;}
.xpw-accuracy-pct{font-family:'Special Gothic Expanded One',sans-serif;font-size:13px;color:rgba(245,200,66,.7);letter-spacing:1px;flex-shrink:0;min-width:28px;text-align:right;}

/* ─── STATS ROW ─── */
.srow{display:flex;gap:8px;margin-bottom:10px;}
.sm{
  flex:1;border-radius:16px;padding:12px 10px;
  display:flex;flex-direction:column;gap:8px;
  position:relative;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.07);
  transition:transform .18s;
}
.sm:active{transform:scale(.95);}
.sm-fire{
  background:linear-gradient(135deg,rgba(28,10,4,.97),rgba(18,6,2,.95));
  border-color:rgba(255,80,20,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.sm-fire.streak-active{border-color:rgba(255,100,30,.45);box-shadow:0 0 14px rgba(255,80,20,.18);animation:streakPulse 2.5s ease-in-out infinite;}
@keyframes streakPulse{0%,100%{box-shadow:0 0 8px rgba(255,80,20,.12);}50%{box-shadow:0 0 18px rgba(255,80,20,.28);border-color:rgba(255,120,40,.6);}}
.sm-gold{
  background:linear-gradient(135deg,rgba(28,20,4,.97),rgba(18,13,2,.95));
  border-color:rgba(245,200,66,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.sm-green{
  background:linear-gradient(135deg,rgba(4,20,12,.97),rgba(2,13,7,.95));
  border-color:rgba(46,204,113,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.sm::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--sm-accent,rgba(255,255,255,.2)),transparent);}
.sm-fire{--sm-accent:rgba(255,80,20,.5);}
.sm-gold{--sm-accent:rgba(245,200,66,.5);}
.sm-green{--sm-accent:rgba(46,204,113,.5);}
.sm::after{
  content:'';position:absolute;inset:-15%;pointer-events:none;
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%,var(--sm-glow,rgba(255,255,255,.04)) 0%,transparent 65%),
    radial-gradient(ellipse 60% 45% at 0% 100%,var(--sm-glow,rgba(255,255,255,.02)) 0%,transparent 70%);
  animation:cardGlowBreath 3.5s ease-in-out infinite;
}
.sm-fire{--sm-glow:rgba(255,80,20,.14);}
.sm-gold{--sm-glow:rgba(245,200,66,.11);}
.sm-green{--sm-glow:rgba(46,204,113,.11);}
.sm-fire::after{animation-delay:0s;}
.sm-gold::after{animation-delay:-2.3s;}
.sm-green::after{animation-delay:-4.6s;}
.sm-icon{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
  animation:xpIconFloat 4s ease-in-out infinite;
}
.sm-fire .sm-icon{animation-delay:0s;}
.sm-gold .sm-icon{animation-delay:.6s;}
.sm-green .sm-icon{animation-delay:1.2s;}
.sm-fire .sm-icon{background:rgba(255,80,20,.15);border:1px solid rgba(255,80,20,.25);}
.sm-gold .sm-icon{background:rgba(245,200,66,.12);border:1px solid rgba(245,200,66,.22);}
.sm-green .sm-icon{background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.22);}
.sm-icon svg{width:16px;height:16px;}
.sm-fire .sm-icon svg{color:#ff7040;}
.sm-gold .sm-icon svg{color:var(--gold);}
.sm-green .sm-icon svg{color:#4ade80;}
.sm-bottom{display:flex;flex-direction:column;gap:1px;}
.smv{font-family:'Special Gothic Expanded One',sans-serif;font-size:26px;line-height:1;}
.c-fire{color:#ff7040;}.c-gold{color:var(--gold);}.c-green{color:#4ade80;}
.sml{font-size:8px;color:rgba(255,255,255,.3);letter-spacing:1.5px;text-transform:uppercase;}

/* ─── DAILY CARD renforcé ─── */
@property --dc-angle{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes dcBorderSpin{from{--dc-angle:0deg;}to{--dc-angle:612deg;}}
.daily-card{
  border:1px solid rgba(245,200,66,.14);
  border-radius:20px;padding:0;margin-bottom:9px;
  cursor:pointer;position:relative;
  transition:transform .18s;
}
.daily-card:active{transform:scale(.98);}
/* Shimmer bordure */
.daily-card::before{content:'';position:absolute;inset:-1px;border-radius:21px;z-index:0;background:rgba(245,200,66,.22);pointer-events:none;}
/* Fond intérieur */
.daily-card::after{
  content:'';position:absolute;inset:1px;border-radius:19px;
  background:linear-gradient(135deg,#1e1602,#130e02);
  z-index:0;pointer-events:none;
}
.daily-card>*{position:relative;z-index:1;}
.daily-card-inner{
  position:relative;z-index:1;
  padding:16px;border-radius:19px;
  background:
    radial-gradient(ellipse 75% 50% at 5% 0%,rgba(245,200,66,.10) 0%,transparent 65%),
    radial-gradient(ellipse 50% 40% at 95% 100%,rgba(232,168,0,.06) 0%,transparent 60%);

}
.daily-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.daily-label{display:flex;align-items:center;gap:8px;}
.daily-flame{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:rgba(245,200,66,.12);border:1px solid rgba(245,200,66,.22);animation:xpIconFloat 4s ease-in-out infinite;animation-delay:.9s;}
.daily-flame svg{width:16px;height:16px;color:var(--gold);}
.daily-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:19px;letter-spacing:2.5px;color:var(--gold);}
.daily-badge{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;background:rgba(245,200,66,.15);border:1px solid rgba(245,200,66,.35);color:var(--gold);border-radius:10px;padding:4px 11px;}
.daily-badge.done{background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.35);color:var(--green);}
.daily-desc{font-size:12px;color:rgba(255,255,255,.45);margin-bottom:12px;line-height:1.6;}
.daily-bar-wrap{background:rgba(255,255,255,.07);border-radius:6px;height:5px;overflow:hidden;margin-bottom:8px;}
.daily-bar{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .8s cubic-bezier(.34,1.56,.64,1);}
.daily-meta{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.3);}
.daily-countdown{color:rgba(245,200,66,.7);font-weight:600;}
/* Historique 7 jours */
.daily-history{display:flex;gap:4px;margin-top:9px;align-items:center;}
.daily-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.daily-day-dot{width:100%;max-width:28px;height:6px;border-radius:3px;background:rgba(255,255,255,.08);}
.daily-day-dot.done{background:linear-gradient(90deg,var(--gold2),var(--gold));}
.daily-day-dot.failed{background:rgba(232,52,74,.35);}
.daily-day-dot.today{background:rgba(245,200,66,.25);border:1px solid rgba(245,200,66,.4);}
.daily-day-dot.today.done{background:linear-gradient(90deg,var(--gold2),var(--gold));border:none;}
.daily-day-lbl{font-size:8px;color:rgba(255,255,255,.2);letter-spacing:.3px;}

/* ─── SECTION HEADERS ─── */
.shd{
  font-size:10px;color:rgba(255,255,255,.32);
  text-transform:uppercase;letter-spacing:3px;
  margin-bottom:7px;
  display:flex;align-items:center;justify-content:space-between;
}

.shd{
  font-size:10px;color:rgba(255,255,255,.32);
  text-transform:uppercase;letter-spacing:3px;
  margin-bottom:7px;
  display:flex;align-items:center;justify-content:space-between;
}
/* Pas de ::before bullet — titres purement texte à gauche */

/* ─── BADGES STRIP ─── */
.bscroll{display:flex;gap:7px;overflow-x:auto;padding:6px 2px 6px;margin-bottom:10px;scrollbar-width:none;}
.bscroll::-webkit-scrollbar{display:none;}
.bc{
  flex-shrink:0;background:rgba(14,11,8,.7);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:9px 12px;text-align:center;
  min-width:68px;cursor:pointer;
  transition:transform .18s,border-color .18s;
  position:relative;backdrop-filter:blur(8px);
}
.bc.ok{border-color:rgba(245,200,66,.3);background:rgba(245,200,66,.08);}
.bc.lk{opacity:.18;filter:grayscale(1);}
.bc:active{transform:scale(.9);}
.bci{font-size:20px;margin-bottom:3px;}
.bcn{font-size:9px;color:rgba(255,255,255,.35);}
.bc.ok .bcn{color:rgba(245,200,66,.8);}
.bc-new{position:absolute;top:-4px;right:-4px;width:11px;height:11px;
  background:var(--red);border-radius:50%;border:2px solid var(--bg);
  box-shadow:0 0 8px rgba(232,52,74,.7);}

/* ─── MODE CARDS ─── */
.mcat-btn{
  flex-shrink:0;padding:7px 16px;border-radius:22px;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.38);cursor:pointer;transition:all .22s;white-space:nowrap;
  letter-spacing:.5px;
}
.mcat-btn.on{
  background:color-mix(in srgb,var(--gold) 16%,transparent);border-color:color-mix(in srgb,var(--gold) 50%,transparent);
  color:var(--gold);
}
.mc.hidden{display:none!important;}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.mc{
  background:var(--mc-card-bg,rgba(255,255,255,.04));
  border:1px solid var(--mc-card-border,rgba(255,255,255,.1));
  border-radius:16px;padding:12px 8px 10px;
  text-align:center;cursor:pointer;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
}
.mc::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--mc-color,rgba(245,200,66,.4)),transparent);
  opacity:.6;
}
.mc::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 100% 60% at 50% 0%,var(--mc-glow,rgba(245,200,66,.06)) 0%,transparent 70%);
  pointer-events:none;
}
.mc.mc-featured::after{ background:none; }
.mc.mc-featured{ box-shadow:none !important; }
.mc.sel{
  border-color:var(--mc-color,var(--gold));
  transform:scale(1.03);
  box-shadow:0 4px 20px var(--mc-shadow,rgba(245,200,66,.2));
}
.mc:not(.sel):not(.done):active{transform:scale(.95);}

/* Icône dans un carré arrondi coloré */
.mci{
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 6px;
  width:auto;height:auto;border-radius:0;
  background:none;border:none;
  color:var(--mc-color,var(--gold));
  position:relative;z-index:1;
}
.mci svg{width:22px;height:22px;}

.mc-cat{display:none;}
.mc-label{font-size:11px;font-weight:600;color:rgba(255,255,255,.75);letter-spacing:.1px;display:block;transition:color .22s;line-height:1.2;position:relative;z-index:1;}
.mc.sel .mc-label{color:#fff;}

/* Badge NEW — discret */
.mnew{
  position:absolute;top:8px;right:8px;
  font-size:7.5px;font-weight:800;letter-spacing:.5px;
  background:rgba(232,52,74,.85);color:#fff;
  border-radius:5px;padding:2px 5px;
  opacity:.8;
}
.mc.done{opacity:.5;}
/* Mode verrouillé */
.mc.locked{opacity:.45;cursor:default;}
.mc.locked .mc-shimmer::after{animation:none !important;}
.mc.locked:active{transform:none;}
.mc-lock{
  position:absolute;top:6px;right:6px;
  width:16px;height:16px;border-radius:5px;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
}
.mc-lock svg{width:9px;height:9px;color:rgba(255,255,255,.5);}
/* Popup déblocage mode */
#mode-lock-modal{z-index:750;}
@keyframes modeUnlock{
  0%{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.85);}
  60%{opacity:1;transform:translateX(-50%) translateY(3px) scale(1.03);}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}

/* Shimmer */
.mc-shimmer{position:absolute;inset:0;border-radius:18px;overflow:hidden;pointer-events:none;}
.mc-shimmer::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);}
/* Shimmer toujours actif — vitesse variable selon état */
.mc:not(.locked) .mc-shimmer::after{animation:mcShimmer 5.5s ease-in-out infinite;}
.mc.sel .mc-shimmer::after{animation:mcShimmer 2.4s ease-in-out infinite;}
.mc:has(.mnew):not(.sel) .mc-shimmer::after{animation:mcShimmer 3.8s ease-in-out infinite;}
@keyframes mcShimmer{0%{left:-80%;}60%,100%{left:160%;}}

/* Décalages (delays) par mode — effet vague naturelle */
.mc[data-mode="quiz" data-cat="culture"]          .mc-shimmer::after{animation-delay:0s;}
.mc[data-mode="photo" data-cat="visuel"]         .mc-shimmer::after{animation-delay:-.7s;}
.mc[data-mode="year" data-cat="visuel"]          .mc-shimmer::after{animation-delay:-1.4s;}
.mc[data-mode="bo" data-cat="visuel"]            .mc-shimmer::after{animation-delay:-2.1s;}
.mc[data-mode="boxoffice" data-cat="culture"]     .mc-shimmer::after{animation-delay:-2.9s;}
.mc[data-mode="replique" data-cat="culture"]      .mc-shimmer::after{animation-delay:-.4s;}
.mc[data-mode="acteur" data-cat="identite"]        .mc-shimmer::after{animation-delay:-1.1s;}
.mc[data-mode="realisateur" data-cat="identite"]   .mc-shimmer::after{animation-delay:-1.8s;}
.mc[data-mode="compositeur" data-cat="identite"]   .mc-shimmer::after{animation-delay:-2.5s;}
.mc[data-mode="filmographie" data-cat="identite"]  .mc-shimmer::after{animation-delay:-3.2s;}
.mc[data-mode="casting" data-cat="identite"]       .mc-shimmer::after{animation-delay:-.9s;}
.mc[data-mode="generique" data-cat="visuel"]     .mc-shimmer::after{animation-delay:-1.6s;}
.mc[data-mode="location" data-cat="visuel"]      .mc-shimmer::after{animation-delay:-2.3s;}
.mc[data-mode="vraifaux" data-cat="culture"]      .mc-shimmer::after{animation-delay:-3.0s;}
.mc[data-mode="decennie" data-cat="culture"]      .mc-shimmer::after{animation-delay:-.3s;}
.mc[data-mode="blindtest" data-cat="audio"]       .mc-shimmer::after{animation-delay:-1.0s;}
.mc[data-mode="versus" data-cat="defi"]        .mc-shimmer::after{animation-delay:-1.7s;}
.mc[data-mode="survie" data-cat="defi"]        .mc-shimmer::after{animation-delay:-2.4s;}
.mc[data-mode="versusfilms" data-cat="culture"]   .mc-shimmer::after{animation-delay:-3.1s;}
.mc[data-mode="pitch" data-cat="culture"]         .mc-shimmer::after{animation-delay:-.6s;}
.mc[data-mode="training"]      .mc-shimmer::after{animation-delay:-1.3s;}

/* Couleur par mode */
/* ── Catégorie CULTURE — ambré/doré chaud ── */
.mc[data-cat="culture"]{
  --mc-card-bg:linear-gradient(150deg,rgba(30,22,4,.97),rgba(18,13,2,.95));
  --mc-card-border:rgba(245,200,66,.18);
  --mc-color:#f5c842;
  --mc-glow:rgba(245,200,66,.08);
  --mc-shadow:rgba(245,200,66,.22);
  --mc-icon-bg:rgba(245,200,66,.12);
  --mc-icon-border:rgba(245,200,66,.22);
}
/* ── Catégorie VISUEL — bleu écran de cinéma ── */
.mc[data-cat="visuel"]{
  --mc-card-bg:linear-gradient(150deg,rgba(4,16,32,.97),rgba(2,10,22,.95));
  --mc-card-border:rgba(96,165,250,.18);
  --mc-color:#60a5fa;
  --mc-glow:rgba(96,165,250,.08);
  --mc-shadow:rgba(96,165,250,.22);
  --mc-icon-bg:rgba(96,165,250,.12);
  --mc-icon-border:rgba(96,165,250,.22);
}
/* ── Catégorie IDENTITÉ — violet coulisses ── */
.mc[data-cat="identite"]{
  --mc-card-bg:linear-gradient(150deg,rgba(18,8,32,.97),rgba(12,4,22,.95));
  --mc-card-border:rgba(167,139,250,.18);
  --mc-color:#a78bfa;
  --mc-glow:rgba(167,139,250,.08);
  --mc-shadow:rgba(167,139,250,.22);
  --mc-icon-bg:rgba(167,139,250,.12);
  --mc-icon-border:rgba(167,139,250,.22);
}
/* ── Catégorie DÉFI — rouge compétition ── */
.mc[data-cat="defi"]{
  --mc-card-bg:linear-gradient(150deg,rgba(32,4,8,.97),rgba(22,2,6,.95));
  --mc-card-border:rgba(248,113,113,.2);
  --mc-color:#f87171;
  --mc-glow:rgba(248,113,113,.08);
  --mc-shadow:rgba(248,113,113,.22);
  --mc-icon-bg:rgba(248,113,113,.12);
  --mc-icon-border:rgba(248,113,113,.22);
}
.mc[data-mode="versus" data-cat="defi"]  {--mc-color:#f87171;}
.mc[data-mode="survie" data-cat="defi"]  {--mc-color:#f43f5e;--mc-icon-bg:rgba(244,63,94,.12);--mc-icon-border:rgba(244,63,94,.22);}
/* Vies mode survie */
.survie-lives{display:flex;gap:5px;justify-content:center;flex-shrink:0;padding:2px 0 4px;}
.survie-heart{font-size:18px;transition:transform .3s,opacity .3s;}
.survie-heart.lost{opacity:.2;transform:scale(.75);}
@keyframes heartLost{0%{transform:scale(1.3);}50%{transform:scale(.6);opacity:.4;}100%{transform:scale(.75);opacity:.2;}}
.survie-heart.losing{animation:heartLost .4s ease both;}
.mc[data-mode="versusfilms" data-cat="culture"]   {--mc-color:#ec4899;--mc-bg:rgba(236,72,153,.1);}
/* Pitch mode */
.pitch-box{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:18px 16px;flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:auto;
}
.pitch-label{font-size:9px;color:rgba(245,158,11,.6);letter-spacing:2.5px;text-transform:uppercase;}
.pitch-guillemets{font-family:'Special Gothic Expanded One',sans-serif;font-size:48px;color:rgba(245,158,11,.2);line-height:.6;flex-shrink:0;}
.pitch-text{font-size:15px;font-weight:500;color:rgba(255,255,255,.85);line-height:1.65;}
/* Versus Films mode */
.vf-wrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:0 18px 4px;}
.vf-criterion{
  text-align:center;font-size:10px;color:rgba(255,255,255,.35);
  letter-spacing:2px;text-transform:uppercase;flex-shrink:0;
}
.vf-criterion strong{color:#ec4899;font-size:12px;letter-spacing:1px;}
.vf-cards{display:flex;gap:10px;flex:1;min-height:0;}
.vf-card{
  flex:1;border-radius:18px;overflow:hidden;cursor:pointer;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.09);
  display:flex;flex-direction:column;
  transition:all .2s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
.vf-card:active{transform:scale(.96);}
.vf-card.vf-ok{border-color:rgba(46,204,113,.6);box-shadow:0 0 24px rgba(46,204,113,.2);animation:btnOk .4s cubic-bezier(.34,1.56,.64,1) both;}
.vf-card.vf-no{border-color:rgba(232,52,74,.4);opacity:.55;}
.vf-poster{width:100%;flex:1;min-height:0;object-fit:cover;display:block;}
.vf-info{padding:10px 8px 12px;flex-shrink:0;}
.vf-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:14px;letter-spacing:.8px;color:#fff;line-height:1.1;margin-bottom:3px;}
.vf-year{font-size:10px;color:rgba(255,255,255,.3);}
.vf-vs{
  flex-shrink:0;align-self:center;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:22px;letter-spacing:2px;
  color:rgba(255,255,255,.2);
}
.vf-reveal{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(0,0,0,.9),transparent);
  padding:8px;text-align:center;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:13px;letter-spacing:1px;
  opacity:0;transition:opacity .3s;
}
.vf-card.vf-ok .vf-reveal{opacity:1;color:var(--green);}
.vf-card.vf-no .vf-reveal{opacity:1;color:var(--red);}

/* ── Catégorie AUDIO — violet musique ── */
.mc[data-cat="audio"]{
  --mc-card-bg:linear-gradient(150deg,rgba(14,6,28,.97),rgba(10,3,20,.95));
  --mc-card-border:rgba(167,139,250,.18);
  --mc-color:#a78bfa;
  --mc-glow:rgba(167,139,250,.08);
  --mc-shadow:rgba(167,139,250,.22);
  --mc-icon-bg:rgba(167,139,250,.12);
  --mc-icon-border:rgba(167,139,250,.22);
}

.mc[data-mode="training"]{
  --mc-card-bg:linear-gradient(150deg,rgba(14,16,20,.97),rgba(10,12,16,.95));
  --mc-card-border:rgba(148,163,184,.18);
  --mc-color:#94a3b8;
  --mc-glow:rgba(148,163,184,.06);
  --mc-shadow:rgba(148,163,184,.2);
  --mc-icon-bg:rgba(148,163,184,.1);
  --mc-icon-border:rgba(148,163,184,.2);
}

/* XP bar : glow animé */
.xpbf{box-shadow:0 0 8px rgba(245,200,66,.35);}

/* Dots progression : transition plus fluide */
.dot{transition:background .4s cubic-bezier(.34,1.56,.64,1);}
.dot.dv{box-shadow:0 0 4px rgba(46,204,113,.4);}

/* Badge toast keyframe (used inline) */
@keyframes badgeSlideUp{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.mc.sel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--mc-color,rgba(245,200,66,.5)),transparent);
  opacity:1;
}
/* (shimmer défini plus haut) */

/* -- MODE RECO -- */
#reco{position:absolute;inset:0;display:flex;flex-direction:column;background:linear-gradient(180deg,#0d0a1a,#07050f);overflow:hidden;padding-top:max(54px,env(safe-area-inset-top));z-index:50;}
.reco-header{padding:16px 18px 12px;display:flex;align-items:center;gap:12px;flex-shrink:0;}
.reco-back{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);cursor:pointer;transition:all .18s;flex-shrink:0;}
.reco-back:active{background:rgba(255,255,255,.13);transform:scale(.92);}
.reco-header-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;letter-spacing:2px;color:rgba(255,255,255,.7);}
.reco-progress{flex:1;height:3px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
.reco-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#7c3aed,#a855f7);transition:width .4s cubic-bezier(.34,1.56,.64,1);}
/* Question card */
.reco-question-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 20px 20px;gap:20px;overflow:hidden;}
.reco-q-label{font-size:10px;color:rgba(167,139,250,.6);letter-spacing:2px;text-transform:uppercase;text-align:center;}
.reco-q-text{font-family:'Special Gothic Expanded One',sans-serif;font-size:28px;letter-spacing:1px;color:#fff;text-align:center;line-height:1.2;}
.reco-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.reco-options.col1{grid-template-columns:1fr;}
.reco-options.col3{grid-template-columns:1fr 1fr 1fr;}
.reco-opt{
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.09);
  border-radius:16px;padding:14px 10px;text-align:center;cursor:pointer;
  transition:all .18s cubic-bezier(.34,1.56,.64,1);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  position:relative;overflow:hidden;
}
.reco-opt:active{transform:scale(.94);}
.reco-opt.sel{border-color:#a855f7;background:rgba(168,85,247,.12);box-shadow:0 0 18px rgba(168,85,247,.15);}
.reco-opt-icon{width:28px;height:28px;flex-shrink:0;color:rgba(192,132,252,.85);transition:color .2s;}
.reco-opt-icon svg{width:100%;height:100%;}
.reco-opt.sel .reco-opt-icon{color:#c084fc;}
.reco-opt-label{font-size:11px;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.2px;line-height:1.2;}
.reco-opt.sel .reco-opt-label{color:#c084fc;}
/* Bouton suivant */
.reco-next-btn{
  margin:0 20px max(20px,env(safe-area-inset-bottom,20px));flex-shrink:0;
  background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;
  border-radius:18px;padding:17px;font-family:'Special Gothic Expanded One',sans-serif;
  font-size:19px;letter-spacing:2px;cursor:pointer;
  transition:transform .15s,opacity .15s;opacity:.4;pointer-events:none;
}
.reco-next-btn.active{opacity:1;pointer-events:all;}
.reco-next-btn.active:active{transform:scale(.97);}
/* Loading */
.reco-loading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;}
.reco-loading-ring{width:52px;height:52px;border-radius:50%;border:3px solid rgba(168,85,247,.2);border-top-color:#a855f7;animation:recoSpin 1s linear infinite;}
@keyframes recoSpin{to{transform:rotate(612deg);}}
.reco-loading-text{font-size:13px;color:rgba(255,255,255,.4);letter-spacing:.5px;text-align:center;line-height:1.6;}
/* Résultat */
.reco-result{flex:1;overflow-y:auto;padding:0 18px max(24px,env(safe-area-inset-bottom));}
.reco-result-poster{width:120px;height:180px;border-radius:14px;overflow:hidden;margin:0 auto 12px;box-shadow:0 16px 48px rgba(0,0,0,.7);flex-shrink:0;}
.reco-result-poster img{width:100%;height:100%;object-fit:cover;display:block;}
.reco-result-match{font-size:9px;letter-spacing:3px;color:rgba(168,85,247,.7);text-transform:uppercase;margin-bottom:10px;text-align:center;}
.reco-result-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:26px;letter-spacing:1.5px;color:#fff;line-height:1;margin-bottom:6px;}
.reco-result-meta{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.reco-result-meta-pill{font-size:10px;color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:3px 9px;}
.reco-film-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;margin-bottom:10px;}
.reco-info-row{display:flex;gap:10px;align-items:flex-start;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.reco-info-row:last-child{border-bottom:none;padding-bottom:0;}
.reco-info-label{font-size:9px;letter-spacing:1.5px;color:rgba(255,255,255,.28);text-transform:uppercase;width:76px;flex-shrink:0;padding-top:1px;}
.reco-info-val{font-size:12px;color:rgba(255,255,255,.72);flex:1;line-height:1.45;}
.reco-result-why{font-size:13px;color:rgba(255,255,255,.65);line-height:1.65;background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.14);border-radius:14px;padding:14px;margin-bottom:10px;}
.reco-result-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;justify-content:center;}
.reco-result-tag{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2);border-radius:20px;padding:4px 11px;font-size:10px;color:rgba(192,132,252,.85);}
.reco-rating{font-family:'Special Gothic Expanded One',sans-serif;font-size:15px;color:var(--gold);}
.reco-again-btn{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:15px;font-family:'Special Gothic Expanded One',sans-serif;font-size:17px;letter-spacing:2px;color:rgba(255,255,255,.55);cursor:pointer;transition:transform .15s;margin-bottom:8px;}
.reco-again-btn:active{transform:scale(.97);}
.reco-home-btn{width:100%;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:16px;padding:15px;font-family:'Special Gothic Expanded One',sans-serif;font-size:17px;letter-spacing:2px;cursor:pointer;}
/* -- MODE BANDE-ANNONCE -- */
/* Blind Test — fond violet musical */
#game-bg.mode-blindtest::before{background:
  radial-gradient(ellipse 52% 42% at 55% 28%,rgba(100,0,200,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 28% 68%,rgba(60,0,160,.30) 0%,transparent 56%);}
#game-bg.mode-blindtest::after{background:
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}
/* Boîte de citation du mode Qui a dit ça */
.qad-box{
  background:rgba(255,255,255,.06);border:1.5px solid rgba(244,114,182,.3);
  border-radius:18px;padding:20px 18px 16px;width:100%;position:relative;
}
.qad-guillemets{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:60px;color:rgba(244,114,182,.18);
  line-height:1;position:absolute;top:4px;left:12px;pointer-events:none;
}
.qad-quote{
  font-size:17px;font-weight:600;line-height:1.65;color:var(--tx);
  text-align:center;padding:8px 4px 0;font-style:italic;
}
.qad-fr{
  font-size:11px;color:rgba(255,255,255,.35);text-align:center;
  margin-top:8px;font-style:normal;padding:0 4px;
}
.qad-film{
  display:inline-flex;align-items:center;gap:5px;margin-top:10px;
  background:rgba(244,114,182,.1);border:1px solid rgba(244,114,182,.25);
  border-radius:10px;padding:4px 10px;font-size:11px;color:rgba(244,114,182,.8);
  font-weight:600;letter-spacing:.5px;
}
/* Décennie — fond violet */
#game-bg.mode-decennie::before{background:
  radial-gradient(ellipse 52% 42% at 40% 30%,rgba(90,60,180,.52) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 68% 68%,rgba(70,40,150,.28) 0%,transparent 56%);}
#game-bg.mode-decennie::after{background:
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}
/* Vrai ou Faux — layout */
.vf-wrap{width:100%;display:flex;flex-direction:column;gap:10px;}
.vf-question{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:20px 18px;font-size:15px;font-weight:600;
  line-height:1.65;color:var(--tx);text-align:center;
}
.vf-expl{
  background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.28);
  border-radius:14px;padding:11px 15px;font-size:12px;color:rgba(255,255,255,.6);
  line-height:1.55;display:none;cursor:pointer;user-select:none;
}
.vf-expl.show{display:block;animation:fadeScaleIn .35s ease both;}
.vf-expl.show:active{opacity:.7;}
.vf-tap-hint{display:none;text-align:center;font-size:10px;color:rgba(255,255,255,.22);letter-spacing:.5px;padding-bottom:2px;}
.vf-tap-hint.show{display:block;animation:fadeScaleIn .4s ease .8s both;}
/* -- PROFIL PARTAGÉ -- */
/* ── GESTIONNAIRE MUSIQUE PROFIL ── */
/* ─── MINI-PLAYER HOME ─── */
.mini-player{margin-bottom:10px;background:linear-gradient(135deg,rgba(20,14,4,.92),rgba(14,10,2,.85));border:1px solid rgba(245,200,66,.18);border-radius:18px;padding:11px 14px;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .15s;}
.mini-player::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,200,66,.38),transparent);}
.mini-player:active{transform:scale(.99);}
.mp-icon{width:40px;height:40px;border-radius:12px;background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.22);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.mp-info{flex:1;min-width:0;}
.mp-track{font-size:12px;font-weight:600;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px;}
.mp-mode{font-size:9px;color:rgba(255,255,255,.3);margin-top:1px;letter-spacing:.3px;}
.mp-bar-wrap{height:2px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:6px;}
.mp-bar{height:100%;background:rgba(245,200,66,.55);border-radius:2px;width:0%;transition:width 1s linear;}
.mp-controls{display:flex;gap:5px;align-items:center;flex-shrink:0;}
.mp-btn{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s;color:rgba(255,255,255,.55);flex-shrink:0;}
.mp-btn svg{width:12px;height:12px;flex-shrink:0;}
.mp-btn.play{background:rgba(245,200,66,.14);border-color:rgba(245,200,66,.32);color:var(--gold);}
.mp-btn.play svg{width:13px;height:13px;}
.mp-btn:active{transform:scale(.84);}
/* ─── JUKEBOX SCREEN ─── */
#jukebox{padding:max(54px,env(safe-area-inset-top)) 18px 0;display:flex;flex-direction:column;height:100%;}
#jukebox > *:not(.jk-bg){position:relative;z-index:1;}
.jk-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;flex-shrink:0;}
.jk-icon{width:82px;height:82px;border-radius:22px;background:rgba(245,200,66,.1);border:1.5px solid rgba(245,200,66,.28);display:flex;align-items:center;justify-content:center;font-size:38px;animation:xpIconFloat 4s ease-in-out infinite;user-select:none;-webkit-user-select:none;caret-color:transparent;pointer-events:all;-webkit-appearance:none;line-height:1;overflow:hidden;}
.jk-track{font-family:'Special Gothic Expanded One',sans-serif;font-size:22px;letter-spacing:2px;color:var(--gold);text-align:center;line-height:1.1;margin-top:2px;}
.jk-mode{font-size:10px;color:rgba(255,255,255,.32);letter-spacing:1.5px;text-transform:uppercase;text-align:center;}
.jk-progress-zone{width:100%;padding:0 2px;}
.jk-prog-wrap{width:100%;background:transparent;border-radius:0;height:3px;cursor:pointer;position:relative;margin-bottom:4px;}
.jk-prog-fill{height:100%;background:linear-gradient(90deg,rgba(200,155,30,.8),var(--gold));border-radius:3px;width:0%;position:relative;}
.jk-prog-fill::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(245,200,66,.5);}
.jk-times{display:flex;justify-content:space-between;font-size:9px;color:rgba(255,255,255,.25);letter-spacing:.3px;}
.jk-controls{display:flex;align-items:center;gap:14px;margin-top:4px;}
.jk-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s;color:rgba(255,255,255,.6);}
.jk-btn svg{width:16px;height:16px;}
.jk-btn:active{transform:scale(.88);}
.jk-btn.main{width:56px;height:56px;background:rgba(245,200,66,.14);border-color:rgba(245,200,66,.38);color:var(--gold);}
.jk-btn.main svg{width:20px;height:20px;}
.jk-playlist{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:max(20px,env(safe-area-inset-bottom,20px));}
.jk-row{display:flex;align-items:center;gap:11px;padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;border-radius:12px;transition:background .15s;}
.jk-row:active{background:rgba(255,255,255,.06);}
.jk-row.active .jk-row-name{color:var(--gold);}
.jk-row.active .jk-row-icon{background:rgba(245,200,66,.14);border-color:rgba(245,200,66,.3);}
.jk-row-icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;transition:background .2s,border-color .2s;user-select:none;-webkit-user-select:none;}
.jk-row-info{flex:1;min-width:0;}
.jk-row-name{font-size:13px;font-weight:500;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s;}
.jk-row-label{font-size:9px;color:rgba(255,255,255,.28);margin-top:1px;letter-spacing:.3px;}
.jk-unlock-hint{font-size:9px;color:rgba(255,255,255,.28);margin-top:2px;letter-spacing:.2px;font-style:italic;}
.jk-row.locked{opacity:.45;cursor:pointer;}
.jk-row.locked:active{background:rgba(255,255,255,.05);}
.jk-row-lock{width:28px;height:28px;border-radius:8px;flex-shrink:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;}
.jk-row-lock svg{width:11px;height:11px;color:rgba(255,255,255,.4);}
.jk-eq{display:flex;align-items:flex-end;gap:2px;height:14px;flex-shrink:0;padding-right:2px;}
.jk-eq-bar{width:3px;background:var(--gold);border-radius:1px;animation:jkEq .7s ease-in-out infinite alternate;}
.jk-eq-bar:nth-child(2){animation-delay:.18s;animation-duration:.9s;}
.jk-eq-bar:nth-child(3){animation-delay:.35s;animation-duration:.6s;}
@keyframes jkEq{from{height:3px;}to{height:13px;}}
#game-bg.mode-jukebox{background:radial-gradient(ellipse 70% 55% at 50% 38%,rgba(155,95,0,.8) 0%,#07050a 65%);}
#game-bg.mode-jukebox::before{background:radial-gradient(ellipse 52% 42% at 36% 26%,rgba(215,145,8,.44) 0%,transparent 58%),radial-gradient(ellipse 44% 38% at 68% 66%,rgba(165,85,0,.26) 0%,transparent 56%),radial-gradient(ellipse 38% 32% at 20% 70%,rgba(95,45,0,.18) 0%,transparent 54%);}
#game-bg.mode-jukebox::after{background:radial-gradient(ellipse 40% 32% at 62% 42%,rgba(188,110,4,.15) 0%,transparent 52%),radial-gradient(ellipse 80% 70% at 50% 50%,transparent 26%,rgba(0,0,0,.87) 100%);}

/* ─── MINI-PLAYER HOME ─── */
.mini-player{
  margin-bottom:10px;
  background:linear-gradient(135deg,rgba(20,14,4,.92),rgba(14,10,2,.85));
  border:1px solid rgba(245,200,66,.18);border-radius:18px;
  padding:11px 14px;display:flex;align-items:center;gap:12px;
  position:relative;overflow:hidden;cursor:pointer;
  transition:border-color .2s,transform .15s;
}
.mini-player::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,200,66,.38),transparent);}
.mini-player:active{transform:scale(.99);}
.mp-icon{width:40px;height:40px;border-radius:12px;
  background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.22);
  display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.mp-info{flex:1;min-width:0;}
.mp-track{font-size:12px;font-weight:600;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px;}
.mp-mode{font-size:9px;color:rgba(255,255,255,.3);margin-top:1px;letter-spacing:.3px;}
.mp-bar-wrap{height:2px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:6px;}
.mp-bar{height:100%;background:rgba(245,200,66,.55);border-radius:2px;width:0%;transition:width 1s linear;}
.mp-controls{display:flex;gap:5px;align-items:center;flex-shrink:0;}
.mp-btn{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .15s;color:rgba(255,255,255,.55);flex-shrink:0;}
.mp-btn svg{width:12px;height:12px;flex-shrink:0;}
.mp-btn.play{background:rgba(245,200,66,.14);border-color:rgba(245,200,66,.32);color:var(--gold);}
.mp-btn.play svg{width:13px;height:13px;}
.mp-btn:active{transform:scale(.84);}
/* ─── JUKEBOX SCREEN ─── */
#jukebox{padding:max(54px,env(safe-area-inset-top)) 18px 0;display:flex;flex-direction:column;height:100%;}
#jukebox > *:not(.jk-bg){position:relative;z-index:1;}
.jk-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;flex-shrink:0;}
.jk-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:17px;letter-spacing:3px;color:rgba(255,255,255,.6);}
.jk-hero{display:flex;flex-direction:column;align-items:center;padding:8px 0 16px;gap:8px;flex-shrink:0;position:relative;perspective:600px;
  transition:padding .35s cubic-bezier(.4,0,.2,1), gap .35s cubic-bezier(.4,0,.2,1);}

/* Transitions sur les éléments qui changent de taille/opacité */
.jk-icon{
  transition:width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1),
             border-radius .35s, font-size .35s, opacity .25s ease, transform .35s cubic-bezier(.4,0,.2,1);
}
.jk-mode{ transition: opacity .2s ease, transform .2s ease; }
.jk-track{ transition: font-size .3s ease, letter-spacing .3s ease, color .5s; }
.jk-btn{ transition: transform .15s, background .2s, border-color .2s, width .3s cubic-bezier(.4,0,.2,1), height .3s cubic-bezier(.4,0,.2,1), opacity .2s ease; }
.jk-prog-track{ transition: height .3s ease; }
.jk-times{ transition: font-size .3s ease; }

/* ── Mode condensé : hero réduit en mini-player ── */
.jk-hero.condensed{padding:6px 0 8px;gap:0;}
.jk-hero.condensed .jk-icon{
  width:38px;height:38px;border-radius:12px;font-size:18px;
  animation:none;transform:none !important;
  transition:width .35s cubic-bezier(.4,0,.2,1),height .35s cubic-bezier(.4,0,.2,1),border-radius .35s,font-size .35s,opacity .2s;
}
.jk-hero.condensed .jk-track{font-size:13px;letter-spacing:1px;margin-top:0;}
.jk-hero.condensed .jk-mode{display:none;}
.jk-hero.condensed .jk-konami-dots{display:none;}
.jk-hero.condensed .jk-controls{gap:10px;margin-top:4px;}
.jk-hero.condensed .jk-btn{width:34px;height:34px;}
.jk-hero.condensed .jk-btn.main{width:40px;height:40px;}
.jk-hero.condensed .jk-btn svg{width:13px;height:13px;}
.jk-hero.condensed .jk-btn.main svg{width:15px;height:15px;}
.jk-hero.condensed .jk-times{font-size:8px;}
.jk-hero.condensed .jk-prog-track{height:2px;}
/* Shuffle/mute fondent en opacité en condensed */
.jk-hero.condensed #jk-shuffle-btn,
.jk-hero.condensed #jk-mute-btn{opacity:0;pointer-events:none;width:0;min-width:0;overflow:hidden;padding:0;border:none;margin:0;}

/* En mode condensé, le hero passe en ligne horizontale */
.jk-hero.condensed{flex-direction:row;justify-content:space-between;align-items:center;padding:6px 4px 8px;gap:10px;}
.jk-hero.condensed .jk-konami-dots{display:none;}
.jk-hero.condensed .jk-progress-zone{flex:1;min-width:0;}
/* Masquer ce qui n'est pas nécessaire en mode condensé */
.jk-hero.condensed .jk-mode{display:none;}
.jk-hero.condensed .jk-track{font-size:12px;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
/* Bloc texte + barre centré */
.jk-hero-mid{flex:1;min-width:0;width:100%;display:flex;flex-direction:column;gap:4px;transition:gap .35s;}
.jk-hero.condensed .jk-hero-mid{gap:2px;}
/* Boutons prev/next visibles en mode condensé */
.jk-hero.condensed .jk-controls{margin-top:0;gap:6px;flex-shrink:0;}
/* Icône hero — swipeable */
.jk-icon{
  width:90px;height:90px;border-radius:24px;
  background:rgba(245,200,66,.1);border:1.5px solid rgba(245,200,66,.28);
  display:flex;align-items:center;justify-content:center;font-size:42px;
  animation:xpIconFloat 4s ease-in-out infinite;
  user-select:none;-webkit-user-select:none;caret-color:transparent;
  pointer-events:all;touch-action:none;-webkit-appearance:none;line-height:1;overflow:hidden;
  transition:border-color .6s,box-shadow .6s,background .6s;
  transform-style:preserve-3d;will-change:transform;cursor:grab;
}
.jk-icon:active{cursor:grabbing;}

.jk-track{font-family:'Special Gothic Expanded One',sans-serif;font-size:22px;letter-spacing:2px;color:var(--gold);text-align:center;line-height:1.1;margin-top:2px;transition:color .5s;}
.jk-mode{font-size:10px;color:rgba(255,255,255,.32);letter-spacing:1.5px;text-transform:uppercase;text-align:center;}
/* Barre progression plus grande et tactile */
.jk-progress-zone{width:100%;padding:0 2px;}
.jk-hero-mid{flex:1;min-width:0;width:100%;display:flex;flex-direction:column;gap:4px;transition:gap .35s;}
.jk-prog-wrap{
  width:100%;background:transparent;border-radius:0;
  height:3px;cursor:pointer;position:relative;margin-bottom:6px;
  padding:8px 0;box-sizing:content-box;margin-top:-6px;
}
.jk-prog-wrap::before{
  content:'';position:absolute;inset:-9px 0;
  /* zone tactile agrandie invisible */
}
.jk-prog-track{
  width:100%;height:4px;border-radius:4px;
  background:rgba(255,255,255,.15);position:relative;overflow:visible;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
.jk-prog-fill{
  height:100%;border-radius:4px;width:0%;
  position:relative;transition:width .8s linear;
  background:linear-gradient(90deg,rgba(200,140,20,.9),var(--gold));
  box-shadow:0 0 8px rgba(245,200,66,.35);
}
.jk-prog-fill::after{
  content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 6px rgba(245,200,66,.6);opacity:0;transition:opacity .2s;
}
.jk-prog-wrap:hover .jk-prog-fill::after,.jk-prog-wrap:active .jk-prog-fill::after,.jk-prog-wrap.dragging .jk-prog-fill::after{opacity:1;}
.jk-prog-wrap.dragging .jk-prog-track{height:5px;margin-top:-1px;}
.jk-prog-wrap.dragging .jk-prog-fill::after{width:12px;height:12px;right:-6px;box-shadow:0 0 8px rgba(245,200,66,.8);}
.jk-prog-wrap{transition:none;}
.jk-times{display:flex;justify-content:space-between;font-size:9px;color:rgba(255,255,255,.28);letter-spacing:.3px;}
.jk-controls{display:flex;align-items:center;gap:16px;margin-top:6px;}
.jk-btn{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,background .2s,border-color .2s;color:rgba(255,255,255,.6);}
.jk-btn svg{width:16px;height:16px;}
.jk-btn:active{transform:scale(.88);}
.jk-btn.main{width:60px;height:60px;border-color:rgba(245,200,66,.38);color:var(--gold);transition:transform .15s,background .3s,border-color .3s;}
.jk-btn.main svg{width:22px;height:22px;}
/* Playlist */
.jk-playlist{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:max(20px,env(safe-area-inset-bottom,20px));}
.jk-row{
  display:flex;align-items:center;gap:11px;
  padding:10px 10px;margin-bottom:2px;
  border-radius:14px;cursor:pointer;
  transition:background .15s,border-color .2s;
  border:1px solid transparent;
}
.jk-row:active{background:rgba(255,255,255,.06);}
.jk-row.active{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);}
.jk-row.active .jk-row-name{color:var(--gold);}
.jk-row.active .jk-row-icon{border-color:rgba(245,200,66,.35);}
.jk-row.locked{opacity:.45;cursor:pointer;}
.jk-row.locked:active{background:rgba(255,255,255,.05);}
.jk-row-icon{
  width:40px;height:40px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  flex-shrink:0;transition:background .3s,border-color .3s;
  user-select:none;-webkit-user-select:none;
}
.jk-row-info{flex:1;min-width:0;}
.jk-row-name{font-size:13px;font-weight:500;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s;}
.jk-row-label{font-size:9px;color:rgba(255,255,255,.28);margin-top:2px;letter-spacing:.3px;}
.jk-unlock-hint{font-size:9px;color:rgba(255,255,255,.22);margin-top:2px;letter-spacing:.3px;display:flex;align-items:center;gap:4px;}
.jk-row-lock{width:16px;height:16px;opacity:.3;flex-shrink:0;}
.jk-eq{display:flex;align-items:flex-end;gap:2px;height:16px;flex-shrink:0;padding-right:2px;}
.jk-eq-bar{width:3px;background:var(--gold);border-radius:1px;animation:jkEq .7s ease-in-out infinite alternate;}
.jk-eq-bar:nth-child(2){animation-delay:.18s;animation-duration:.9s;}
.jk-eq-bar:nth-child(3){animation-delay:.35s;animation-duration:.6s;}
@keyframes jkEq{from{height:3px;}to{height:14px;}}
.jk-amb-btn{width:32px;height:32px;border-radius:8px;border:none;background:none;color:rgba(255,255,255,.22);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s;}
.jk-amb-btn:active{transform:scale(.85);}
.jk-amb-btn.is-amb{color:var(--gold);background:rgba(245,200,66,.1);}
/* Fond réactif — transitionne avec la piste */
#game-bg.mode-jukebox{transition:background 1.5s ease;}
#game-bg.mode-jukebox::before{transition:background 1.5s ease;}

/* ─── KONAMI UNLOCK ─── */
@keyframes jkKonamiPulse{0%{box-shadow:0 0 0 0 rgba(245,200,66,.7);}70%{box-shadow:0 0 0 22px rgba(245,200,66,0);}100%{box-shadow:0 0 0 0 rgba(245,200,66,0);}}
@keyframes jkKonamiReveal{0%{opacity:0;transform:translateY(16px) scale(.92);}60%{opacity:1;transform:translateY(-3px) scale(1.02);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes jkKonamiShake{0%,100%{transform:translateX(0);}20%{transform:translateX(-5px);}40%{transform:translateX(5px);}60%{transform:translateX(-3px);}80%{transform:translateX(3px);}}
.jk-konami-flash{animation:jkKonamiPulse .5s ease both !important;}
/* Indicateur progression: 6 points sous l'icône hero */
.jk-konami-dots{display:flex;gap:5px;justify-content:center;margin-top:4px;height:8px;flex-shrink:0;}
.jk-konami-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.12);transition:background .12s,transform .12s,box-shadow .12s;}
.jk-konami-dot.lit{background:var(--gold);transform:scale(1.4);box-shadow:0 0 5px rgba(245,200,66,.6);}
/* Zone vidéo header */
.jk-vid-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-shrink:0;animation:jkKonamiReveal .45s cubic-bezier(.34,1.56,.64,1) both;}
.jk-vid-back{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.5px;cursor:pointer;padding:6px 10px 6px 6px;border-radius:10px;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent;}
.jk-vid-back:active{background:rgba(255,255,255,.07);color:var(--tx);}
.jk-vid-zone-label{font-family:'Special Gothic Expanded One',sans-serif;font-size:13px;letter-spacing:2px;color:rgba(245,200,66,.45);}
/* ─── MUSIC MANAGER — liste épurée ─── */
.music-track-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 4px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.music-track-row:last-child{border-bottom:none;}
.music-track-row.is-ambient .music-track-label{color:var(--gold);}
.music-track-row.is-ambient .music-track-icon-box{background:rgba(245,200,66,.14);border-color:rgba(245,200,66,.25);}
.music-track-icon-box{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.music-track-info{flex:1;min-width:0;}
.music-track-label{
  font-size:12px;font-weight:500;color:rgba(255,255,255,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.music-track-file{font-size:9px;color:rgba(255,255,255,.2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Boutons SVG ultra-compact */
.music-btns{display:flex;align-items:center;gap:3px;flex-shrink:0;}
.mbtn{
  width:26px;height:26px;border-radius:7px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:rgba(255,255,255,.3);
  transition:color .15s,background .15s;
}
.mbtn:active{transform:scale(.88);}
.mbtn:hover{color:rgba(255,255,255,.65);background:rgba(255,255,255,.07);}
.mbtn.playing{color:var(--gold);}
.mbtn.amb-active{color:var(--gold);background:rgba(245,200,66,.1);}
.music-section-sep{
  font-size:8.5px;color:rgba(255,255,255,.2);letter-spacing:2px;
  text-transform:uppercase;padding:10px 0 4px;
}
.music-section-sep:first-child{padding-top:0;}
.share-card-btn{
  width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:12px 16px;margin-top:8px;margin-bottom:24px;
  display:flex;align-items:center;gap:10px;cursor:pointer;
  transition:all .2s;color:rgba(255,255,255,.6);font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;
}
.share-card-btn:active{transform:scale(.97);}
.share-card-btn svg{flex-shrink:0;}
/* Canvas hors-écran pour la carte */
#profile-share-canvas{display:none;}
.mode-info-over{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:700;
  display:none;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.mode-info-over.on{display:flex;opacity:1;pointer-events:all;}
.mode-info-sh{
  background:linear-gradient(180deg,rgba(12,10,6,.99),rgba(8,6,3,.99));
  border-radius:28px 28px 0 0;
  border:1px solid rgba(255,255,255,.08);border-bottom:none;
  padding:0 22px max(16px,env(safe-area-inset-bottom,16px));
  width:100%;max-width:500px;
  max-height:92dvh;overflow-y:auto;overflow-x:hidden;
  transform:translateY(60px);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
  position:relative;
  isolation:isolate;
}
.mode-info-sh::after{
  content:'';
  position:absolute;inset:0;
  border-radius:28px 28px 0 0;
  background:
    radial-gradient(ellipse 120% 55% at 10% 0%,  color-mix(in srgb,var(--mi-color,#f5c842) 35%,transparent) 0%, transparent 60%),
    radial-gradient(ellipse 90% 40% at 90% 15%,  color-mix(in srgb,var(--mi-color,#f5c842) 20%,transparent) 0%, transparent 55%),
    radial-gradient(ellipse 100% 45% at 50% 50%, color-mix(in srgb,var(--mi-color,#f5c842) 12%,transparent) 0%, transparent 65%),
    radial-gradient(ellipse 90% 35% at 20% 80%,  color-mix(in srgb,var(--mi-color,#f5c842) 10%,transparent) 0%, transparent 60%),
    radial-gradient(ellipse 85% 30% at 80% 90%,  color-mix(in srgb,var(--mi-color,#f5c842) 8%,transparent)  0%, transparent 55%);
  pointer-events:none;
  z-index:0;
  transition:background .35s;
}

.mode-info-sh>*{position:relative;z-index:1;}
.mode-info-over.on .mode-info-sh{transform:translateY(0);}
.mode-info-accent{
  position:absolute;top:0;left:0;right:0;height:2px;
  border-radius:28px 28px 0 0;
  background:linear-gradient(90deg,transparent,var(--mi-color,var(--gold)),transparent);
  opacity:.8;
}
.mode-info-hdl{
  width:40px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.15);
  margin:16px auto 22px;
}
.mode-info-head{
  display:flex;align-items:center;gap:16px;
  margin-bottom:20px;padding:0 2px;
}
.mode-info-icon{
  width:64px;height:64px;border-radius:20px;
  background:var(--mi-bg,rgba(245,200,66,.1));
  border:1.5px solid var(--mi-color,rgba(245,200,66,.4));
  display:flex;align-items:center;justify-content:center;
  font-size:30px;flex-shrink:0;
  box-shadow:0 0 24px rgba(0,0,0,.4),0 0 0 4px rgba(0,0,0,.2);
}
.mode-info-title{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:30px;letter-spacing:2px;
  color:var(--mi-color,var(--gold));line-height:1;
}
.mode-info-sub{
  font-size:11px;color:rgba(255,255,255,.35);
  letter-spacing:1.5px;text-transform:uppercase;margin-top:5px;
}
.mode-info-desc{
  font-size:14px;color:rgba(255,255,255,.7);line-height:1.65;
  margin-bottom:16px;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
}
.mode-info-tips{display:flex;flex-direction:row;flex-wrap:wrap;gap:7px;margin-bottom:20px;}
.mode-info-tip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--mi-bg,rgba(245,200,66,.07));
  border:1px solid var(--mi-color,rgba(245,200,66,.2));
  border-radius:20px;padding:6px 12px;
  font-size:11px;color:rgba(255,255,255,.7);
  font-weight:500;
}
.mode-info-tip-icon{font-size:13px;flex-shrink:0;}
.mode-info-tip-svg{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
}
.mode-info-tip-svg svg{width:15px;height:15px;color:rgba(255,255,255,.5);}
/* Sélecteur de questions */
.qcount-label{font-size:9px;color:rgba(255,255,255,.3);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;}
#qcount-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%;margin-bottom:14px;}
.qcount-btn{
  padding:10px 4px;border-radius:12px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;letter-spacing:1px;
  cursor:pointer;width:100%;transition:all .2s;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.4);
}
.qcount-btn.qcount-active{
  background:rgba(245,200,66,.14);border-color:rgba(245,200,66,.45);
  color:var(--gold);
}
/* Sélecteur de difficulté */
#diff-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;margin-bottom:14px;}
.diff-btn{
  padding:8px 2px;border-radius:12px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:14px;letter-spacing:.8px;
  cursor:pointer;width:100%;transition:all .2s;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.35);display:flex;flex-direction:column;align-items:center;gap:2px;
}
.diff-btn span.diff-icon{font-size:16px;line-height:1;}
.diff-btn span.diff-lbl{font-size:11px;letter-spacing:.5px;}
.diff-btn.diff-active[data-d="all"]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.9);}
.diff-btn.diff-active[data-d="easy"]{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.5);color:#34d399;}
.diff-btn.diff-active[data-d="medium"]{background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.5);color:#60a5fa;}
.diff-btn.diff-active[data-d="hard"]{background:rgba(251,146,60,.14);border-color:rgba(251,146,60,.5);color:#fb923c;}
/* ── Mode Découverte toggle ── */
#decouverte-wrap{width:100%;margin-bottom:0;}
.decouverte-toggle-btn{
  width:100%;display:flex;align-items:center;gap:10px;
  background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.2);
  border-radius:14px;padding:11px 14px;cursor:pointer;transition:all .25s;
  outline:none;
}
.decouverte-toggle-btn.on{background:rgba(52,211,153,.16);border-color:rgba(52,211,153,.5);}
.dtb-icon{font-size:18px;flex-shrink:0;}
.dtb-text{flex:1;text-align:left;}
.dtb-label{font-size:11px;font-weight:700;letter-spacing:.5px;color:#34d399;}
.dtb-sub{font-size:10px;color:rgba(255,255,255,.35);margin-top:1px;}
.decouverte-toggle-pill{
  width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,.12);
  position:relative;transition:background .2s;flex-shrink:0;
}
.decouverte-toggle-btn.on .decouverte-toggle-pill{background:rgba(52,211,153,.65);}
.decouverte-toggle-pill::after{
  content:'';position:absolute;top:3px;left:3px;
  width:14px;height:14px;border-radius:50%;background:#fff;
  transition:transform .2s;
}
.decouverte-toggle-btn.on .decouverte-toggle-pill::after{transform:translateX(16px);}
/* Badge Découverte dans la card mode */
.mc-decouverte-badge{position:absolute;top:7px;left:7px;background:rgba(52,211,153,.18);border:1px solid rgba(52,211,153,.4);border-radius:6px;font-size:8px;font-weight:700;letter-spacing:1px;color:#34d399;padding:2px 6px;text-transform:uppercase;pointer-events:none;}

/* ── 3 cards empilées pleine largeur (Découverte, Trivia Ciné, Blind Test) ── */
.mc.mc-featured{
  padding:13px 15px;
  text-align:left;
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
.mc.mc-featured::before{
  background:linear-gradient(90deg,transparent,var(--mc-color,rgba(245,200,66,.5)),transparent);
}
.mc.mc-featured.sel{transform:scale(1.01);}
.mc.mc-featured:not(.sel):not(.done):active{transform:scale(.99);}

/* Stack : chaque card garde ses propres bords et fond — on supprime juste le gap */
/* Boutons */
.mode-info-btns{display:flex;gap:10px;width:100%;}
.mode-info-play-wrap{flex:2;}
.mode-info-play{
  flex:2;color:#000;
  border:none;border-radius:16px;padding:18px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;letter-spacing:3px;
  cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;width:100%;display:block;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--mi-color,var(--gold)) 70%,#fff 30%) 0%,
    var(--mi-color,var(--gold)) 40%,
    color-mix(in srgb,var(--mi-color,var(--gold)) 85%,#000 15%) 100%
  );
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(0,0,0,.2) inset;
}
.mode-info-play::after{
  content:'';position:absolute;
  top:-50%;left:-30%;width:20%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-20deg);
  animation:mipGlare 3.2s ease-in-out 1s infinite;
  pointer-events:none;
}
@keyframes mipGlare{
  0%,100%{left:-30%;opacity:0;}
  5%{opacity:1;}
  45%{left:120%;opacity:1;}
  55%{opacity:0;}
}
.mode-info-play:active{
  transform:scale(.97);
  box-shadow:0 2px 12px color-mix(in srgb,var(--mi-color,var(--gold)) 35%,transparent),0 1px 0 rgba(255,255,255,.3) inset;
  animation:none;
}
.mode-info-close{
  flex:1;background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:17px;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;transition:transform .15s;
}
.mode-info-close:active{transform:scale(.97);}

/* ── TUTORIEL INTERACTIF ── */
#onboarding{
  position:fixed;inset:0;z-index:8000;
  background:rgba(0,0,0,.0);pointer-events:none;
  transition:background .4s;
}
#onboarding.on{background:rgba(0,0,0,.85);pointer-events:all;}
.ob-card{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--sf);border-radius:28px 28px 0 0;
  padding:20px 20px max(28px,env(safe-area-inset-bottom,28px));
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.25,.46,.45,.94);
  max-width:500px;margin:0 auto;
}
#onboarding.on .ob-card{transform:translateY(0);}
.ob-step-dots{display:flex;gap:6px;justify-content:center;margin-top:16px;margin-bottom:6px;}

/* Hint de swipe */
.ob-swipe-hint {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,.35); letter-spacing: .5px;
  margin-bottom: 16px;
  animation: obSwipeWiggle 2.2s ease-in-out infinite;
  transition: opacity .4s, transform .4s;
}
.ob-swipe-hint svg { opacity: .5; }
.ob-swipe-hint-gone {
  opacity: 0; pointer-events: none; transform: translateY(-4px);
}
@keyframes obSwipeWiggle {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}
.ob-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.15);transition:all .3s;}
.ob-dot.on{background:var(--gold);width:22px;border-radius:4px;}
.ob-icon{font-size:44px;text-align:center;display:block;margin-bottom:8px;animation:rIconPop .5s cubic-bezier(.34,1.56,.64,1) both;}
.ob-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:28px;letter-spacing:2px;color:var(--gold);text-align:center;margin-bottom:4px;}
.ob-desc{font-size:13px;color:rgba(255,255,255,.6);text-align:center;line-height:1.55;margin-bottom:12px;}
.ob-demo{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:14px 16px;margin-bottom:18px;
}
.ob-demo-q{font-size:14px;color:rgba(255,255,255,.75);margin-bottom:12px;text-align:center;font-weight:500;}
.ob-demo-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ob-demo-btn{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:12px 8px;font-size:12px;font-weight:500;
  color:rgba(255,255,255,.75);cursor:pointer;text-align:center;
  transition:all .18s cubic-bezier(.34,1.56,.64,1);
}
.ob-demo-btn:active{transform:scale(.95);}
.ob-demo-btn.ob-ok{background:rgba(46,204,113,.22);border-color:rgba(46,204,113,.5);color:#4ade80;font-weight:700;animation:btnOk .4s cubic-bezier(.34,1.56,.64,1) both;}
.ob-demo-btn.ob-no{background:rgba(232,52,74,.18);border-color:rgba(232,52,74,.45);color:#f87171;animation:btnNo .35s ease both;}
.ob-slider{
  overflow:hidden;
  width:100%;
  touch-action:pan-y;
}
.ob-slides-track{
  display:flex;
  transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
}
.ob-slide{
  min-width:100%;
  box-sizing:border-box;
  padding:0 2px;
  text-align:center;
}
.ob-icon{font-size:44px;text-align:center;display:block;margin-bottom:8px;animation:rIconPop .5s cubic-bezier(.34,1.56,.64,1) both;}
.ob-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:28px;letter-spacing:2px;color:var(--gold);text-align:center;margin-bottom:4px;}
.ob-desc{font-size:13px;color:rgba(255,255,255,.6);text-align:center;line-height:1.55;margin-bottom:12px;}
.ob-demo{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:14px 16px;margin-bottom:18px;
}
/* Onboarding stats row */
.ob-stats-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:8px 0 12px;
  gap:8px;
}
.ob-stat{
  background:rgba(245,200,66,.07);
  border:1px solid rgba(245,200,66,.2);
  border-radius:16px;
  padding:12px 8px;
  text-align:center;
}
.ob-stat-n{
  display:block;
  font-family:'Special Gothic Expanded One',sans-serif;
  font-size:34px;
  letter-spacing:1px;
  color:var(--gold);
  line-height:1;
}
.ob-stat-l{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,.45);
  letter-spacing:.5px;
  margin-top:4px;
}
/* Onboarding features */
.ob-features{
  display:flex;flex-direction:column;gap:7px;
  margin:4px 0 10px;
  text-align:left;
}
.ob-feature{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px 12px;
}
.ob-feat-icon{font-size:26px;flex-shrink:0;}
.ob-feat-title{
  font-family:'Special Gothic Expanded One',sans-serif;
  font-size:16px;letter-spacing:1px;
  color:rgba(255,255,255,.85);
  margin-bottom:2px;
}
.ob-feat-desc{
  font-size:11px;
  color:rgba(255,255,255,.4);
  line-height:1.4;
}

.ob-next{
  width:100%;background:linear-gradient(100deg,#f5c842,#e8a800);
  color:#000;border:none;border-radius:18px;padding:16px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:22px;letter-spacing:3px;
  cursor:pointer;transition:transform .15s;box-shadow:0 4px 20px rgba(245,200,66,.35);
}
.ob-next:active{transform:scale(.97);}

/* ── STATS AVANCÉES ── */
.stats-chart-wrap{
  background:linear-gradient(150deg,rgba(16,20,30,.97),rgba(10,13,22,.95));
  border:1px solid rgba(74,140,255,.2);
  border-radius:20px;padding:14px 16px 16px;margin-bottom:16px;
  position:relative;
  cursor:pointer;transition:border-color .2s;
  box-shadow:0 2px 20px rgba(0,0,0,.3);
}
.stats-chart-wrap:active{border-color:rgba(74,140,255,.4);}
.stats-chart-wrap::before{
  content:'';position:absolute;inset:0;border-radius:20px;
  background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(74,140,255,.07) 0%,transparent 65%);
  pointer-events:none;
}
.stats-chart-title{
  font-size:9px;color:rgba(255,255,255,.3);letter-spacing:2.5px;
  text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;
  line-height:1;
}
.stats-chart-title:not(:last-child){margin-bottom:12px;}
.stats-chart-title span{color:rgba(245,200,66,.55);font-size:10px;letter-spacing:.3px;}
/* Sparkline */
.sparkline-wrap{display:flex;align-items:flex-end;gap:5px;height:56px;margin-bottom:6px;padding-top:4px;margin-top:16px;}
.spark-bar{
  flex:1;border-radius:5px 5px 2px 2px;
  background:rgba(245,200,66,.14);min-height:8px;
  transition:height .6s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
.spark-bar.today{background:var(--gold);box-shadow:0 0 12px rgba(245,200,66,.3);}
.spark-bar.today::after{
  content:attr(data-score);position:absolute;bottom:calc(100% + 5px);left:50%;
  transform:translateX(-50%);color:var(--gold);
  font-size:9px;padding:2px 5px;border-radius:5px;white-space:nowrap;pointer-events:none;
  font-weight:700;
}
.spark-labels{display:flex;gap:5px;}
.spark-label{flex:1;font-size:8px;color:rgba(255,255,255,.22);text-align:center;}
.spark-label.today{color:var(--gold);font-weight:700;}
/* Mini stats row */
.spark-mini-row{display:flex;gap:6px;margin-bottom:10px;}
.spark-mini{
  flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:9px 6px 8px;text-align:center;min-height:48px;display:flex;flex-direction:column;justify-content:center;
}
.spark-mini-val{font-family:'Special Gothic Expanded One',sans-serif;font-size:15px;color:var(--gold);line-height:1;}
.spark-mini-lbl{font-size:7px;color:rgba(255,255,255,.3);letter-spacing:1px;text-transform:uppercase;margin-top:3px;}
/* Mode bars */
.mode-bars{display:flex;flex-direction:column;gap:7px;padding-top:2px;}
.mode-bar-row{display:flex;align-items:center;gap:8px;}
.mode-bar-icon{font-size:13px;width:20px;text-align:center;flex-shrink:0;}
.mode-bar-track{flex:1;height:6px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;}
.mode-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .6s cubic-bezier(.34,1.56,.64,1);}
.mode-bar-count{font-size:10px;font-weight:600;color:rgba(255,255,255,.35);width:18px;text-align:right;flex-shrink:0;}
.mode-bar-name{font-size:10px;color:rgba(255,255,255,.4);width:80px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.heatmap-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(28px,1fr));gap:4px;margin-top:8px;}
.hm-cell{
  aspect-ratio:1;border-radius:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;cursor:pointer;position:relative;
  transition:transform .15s;
}
.hm-cell:active{transform:scale(.88);}
.hm-cell.hm-has{border-color:rgba(245,200,66,.25);}
.hm-cell.hm-0{background:rgba(255,255,255,.04);}
.hm-cell.hm-1{background:rgba(245,200,66,.1);}
.hm-cell.hm-2{background:rgba(245,200,66,.2);}
.hm-cell.hm-3{background:rgba(245,200,66,.35);}

/* ── SGRID stats ── */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px;}
.sc{
  border-radius:16px;padding:12px 10px 10px;
  display:flex;flex-direction:column;gap:4px;
  position:relative;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,rgba(20,16,6,.96),rgba(14,11,4,.94));
  border:1px solid rgba(245,200,66,.14);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .18s,border-color .18s;
}
.sc:active{transform:scale(.95);}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--sc-accent,rgba(255,255,255,.2)),transparent);}
.sc::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 100% 60% at 50% 0%,var(--sc-glow,rgba(255,255,255,.04)) 0%,transparent 70%);
  pointer-events:none;
}
.sc-xp   {--sc-accent:rgba(245,200,66,.5);--sc-glow:rgba(245,200,66,.12);border-color:rgba(245,200,66,.22);background:linear-gradient(135deg,rgba(30,22,5,.97),rgba(18,13,3,.95));}
.sc-games{--sc-accent:rgba(74,158,255,.5);--sc-glow:rgba(74,158,255,.12);border-color:rgba(74,158,255,.22);background:linear-gradient(135deg,rgba(5,14,28,.97),rgba(3,9,18,.95));}
.sc-pct  {--sc-accent:rgba(46,204,113,.5);--sc-glow:rgba(46,204,113,.12);border-color:rgba(46,204,113,.22);background:linear-gradient(135deg,rgba(4,20,12,.97),rgba(2,13,7,.95));}
.sc-str  {--sc-accent:rgba(255,112,64,.5);--sc-glow:rgba(255,112,64,.12);border-color:rgba(255,112,64,.22);background:linear-gradient(135deg,rgba(28,10,4,.97),rgba(18,6,2,.95));}
.sc-time {--sc-accent:rgba(167,139,250,.5);--sc-glow:rgba(167,139,250,.12);border-color:rgba(167,139,250,.22);background:linear-gradient(135deg,rgba(14,10,28,.97),rgba(9,6,18,.95));}
.sc-best {--sc-accent:rgba(251,191,36,.5);--sc-glow:rgba(251,191,36,.12);border-color:rgba(251,191,36,.22);background:linear-gradient(135deg,rgba(28,20,4,.97),rgba(18,13,2,.95));}
.sc-icon{
  width:32px;height:32px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.sc-icon svg{width:16px;height:16px;}
.sv{font-family:'Special Gothic Expanded One',sans-serif;font-size:26px;line-height:1;}
.sl{font-size:8px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1.5px;}
.hm-cell.hm-3{background:rgba(245,200,66,.38);}

/* ── PSEUDO INPUT ── */
.pseudo-wrap{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;
  margin-bottom:10px;cursor:pointer;transition:border-color .2s;
}
.pseudo-wrap:focus-within{border-color:rgba(245,200,66,.5);}
.pseudo-input{
  flex:1;background:none;border:none;outline:none;
  font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;
  color:var(--tx);caret-color:var(--gold);
}
.pseudo-input::placeholder{color:rgba(255,255,255,.25);}
.pseudo-edit{font-size:14px;color:rgba(255,255,255,.3);}

/* ── VERSUS SETUP ── */
.vs-setup{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:16px 20px max(28px,env(safe-area-inset-bottom,20px));width:100%;
}
.vs-setup-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:26px;letter-spacing:3px;color:var(--gold);text-align:center;}
.vs-setup-sub{font-size:12px;color:rgba(255,255,255,.4);text-align:center;margin-top:-4px;}
.vs-player-input{
  width:100%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);
  border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;
  transition:border-color .2s;
}
.vs-player-input:focus-within{border-color:rgba(245,200,66,.5);}
.vs-player-input-icon{font-size:18px;flex-shrink:0;user-select:none;-webkit-user-select:none;}
.vs-player-input input{
  flex:1;background:none;border:none;outline:none;
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;
  color:var(--tx);caret-color:var(--gold);
}
.vs-player-input input::placeholder{color:rgba(255,255,255,.25);}
.vs-nb-label{font-size:9px;color:rgba(255,255,255,.3);letter-spacing:2px;text-transform:uppercase;align-self:flex-start;}
.vs-nb-row{display:flex;gap:8px;width:100%;justify-content:center;}
.vs-nb-btn{
  padding:11px 20px;border-radius:12px;background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);
  font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;letter-spacing:1px;
  cursor:pointer;transition:all .18s;text-align:center;min-width:80px;
}
.vs-nb-btn.on{border-color:rgba(245,200,66,.5);background:rgba(245,200,66,.12);color:var(--gold);}
/* Setup joueurs */
.vs-player-count-row{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:4px;width:100%;row-gap:7px;}
.vs-pc-btn{padding:10px;border-radius:12px;font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;letter-spacing:1px;cursor:pointer;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);color:rgba(255,255,255,.4);transition:all .2s;text-align:center;}
.vs-pc-btn.on{background:rgba(245,200,66,.14);border-color:rgba(245,200,66,.45);color:var(--gold);}
.vs-players-inputs{display:flex;flex-direction:column;gap:7px;width:100%;}
.vs-divider{font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;color:rgba(255,255,255,.25);flex-shrink:0;}
/* ── MODE VERSUS — masquer les éléments inutiles, garder le bouton retour ── */
#game.vs-mode .ghd{padding:max(14px,env(safe-area-inset-top,14px)) 18px 4px;justify-content:flex-start;}
#game.vs-mode .ghd>div{display:none;}
#game.vs-mode .twrap{display:none;}
#game.vs-mode .pdots{display:none;}
#game.vs-mode .survie-lives{display:none!important;}
/* ── SCOREBOARD VERSUS — horizontal compact ── */
.vs-scoreboard{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;padding:10px 14px 6px;flex-shrink:0;flex-wrap:wrap;}
.vs-player{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:6px 10px;min-width:0;flex:1;}
.vs-player.active{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25);}
.vs-player-name{font-size:11px;font-weight:600;letter-spacing:.3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.vs-player-score{font-family:'Special Gothic Expanded One',sans-serif;line-height:1;}
.vs-scoreboard .vs-divider{font-size:14px;flex-shrink:0;}
.vs-scoreboard.many{gap:4px;padding:8px 10px 4px;}
.vs-scoreboard.many .vs-player{padding:5px 8px;border-radius:10px;}
.vs-turn-badge{
  display:flex;align-items:center;gap:6px;
  background:rgba(245,200,66,.12);border:1px solid rgba(245,200,66,.3);
  border-radius:12px;padding:7px 14px;margin-bottom:10px;flex-shrink:0;
  font-size:12px;color:var(--gold);font-weight:600;letter-spacing:.5px;
  animation:fadeScaleIn .3s ease both;
}
.vs-turn-icon{font-size:16px;}
.vs-result-wrap{width:100%;text-align:center;}
.vs-winner-icon{font-size:60px;animation:rIconPop .6s cubic-bezier(.34,1.56,.64,1) both;display:block;margin-bottom:8px;}
.vs-winner-name{font-family:'Special Gothic Expanded One',sans-serif;font-size:32px;color:var(--gold);letter-spacing:2px;margin-bottom:4px;}
.vs-winner-sub{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:20px;}
.vs-final-scores{display:flex;gap:10px;justify-content:center;margin-bottom:22px;width:100%;}
.vs-final-card{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 10px;text-align:center;}
.vs-final-card.winner{border-color:rgba(245,200,66,.4);background:rgba(245,200,66,.08);}
.vs-final-card-name{font-size:12px;color:rgba(255,255,255,.45);margin-bottom:4px;}
.vs-final-card-score{font-family:'Special Gothic Expanded One',sans-serif;font-size:32px;color:var(--gold);}
.vs-final-card-correct{font-size:11px;color:rgba(255,255,255,.35);margin-top:2px;}
.daily-card{
  border:1px solid rgba(245,200,66,.14);
  border-radius:20px;padding:0;margin-bottom:9px;
  cursor:pointer;position:relative;
  transition:transform .18s;
}
.daily-card::before{content:'';position:absolute;inset:-1px;border-radius:21px;z-index:0;background:rgba(245,200,66,.22);pointer-events:none;}
.daily-card::after{
  content:'';position:absolute;inset:1px;border-radius:19px;
  background:linear-gradient(135deg,#1e1602,#130e02);
  z-index:0;pointer-events:none;
}
.daily-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.daily-label{display:flex;align-items:center;gap:8px;}
.daily-flame{font-size:20px;animation:xpIconFloat 4s ease-in-out infinite;animation-delay:0s;}
.daily-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;letter-spacing:2px;color:var(--gold);}
.daily-badge{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(245,200,66,.2);border:1px solid rgba(245,200,66,.4);color:var(--gold);border-radius:8px;padding:3px 9px;}
.daily-badge.done{background:rgba(46,204,113,.15);border-color:rgba(46,204,113,.4);color:var(--green);}
.daily-desc{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:10px;line-height:1.5;}
.daily-bar-wrap{background:rgba(255,255,255,.07);border-radius:4px;height:5px;overflow:hidden;}
.daily-bar{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .8s cubic-bezier(.34,1.56,.64,1);}
.daily-meta{display:flex;justify-content:space-between;margin-top:5px;font-size:10px;color:rgba(255,255,255,.35);}
.daily-countdown{color:var(--gold);font-weight:600;}
.daily-history{display:flex;gap:4px;margin-top:8px;align-items:center;}
.daily-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.daily-day-dot{width:100%;max-width:28px;height:5px;border-radius:3px;background:rgba(255,255,255,.07);}
.daily-day-dot.done{background:linear-gradient(90deg,var(--gold2),var(--gold));}
.daily-day-dot.failed{background:rgba(232,52,74,.3);}
.daily-day-dot.today{background:rgba(245,200,66,.2);border:1px solid rgba(245,200,66,.35);}
.daily-day-dot.today.done{background:linear-gradient(90deg,var(--gold2),var(--gold));border:none;}
.daily-day-lbl{font-size:8px;color:rgba(255,255,255,.18);letter-spacing:.2px;}
/* Score count-up résultats */
@keyframes scoreCountUp{0%{opacity:0;transform:translateY(16px) scale(.7);}60%{opacity:1;transform:translateY(-4px) scale(1.09);}80%{transform:translateY(2px) scale(.97);}100%{transform:translateY(0) scale(1);}}
/* Carte mode jouée — pas d'animation parasite */
.mc.done{opacity:.72;}
.mc.done::before{content:none;}
.mc.done.sel{animation:none;}
@keyframes badgeGlowPulse{
  0%,100%{box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 20px rgba(245,200,66,.12);}
  50%{box-shadow:0 8px 40px rgba(0,0,0,.7),0 0 32px rgba(245,200,66,.28);}
}
@keyframes hmvFlipHintFade{
  0%{opacity:0;transform:translateX(-50%) translateY(6px);}
  15%{opacity:1;transform:translateX(-50%) translateY(0);}
  70%{opacity:1;}
  100%{opacity:0;transform:translateX(-50%) translateY(-4px);}
}

.trow{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:11px;scrollbar-width:none;}
.trow::-webkit-scrollbar{display:none;}
.tc{flex-shrink:0;background:rgba(10,8,5,.6);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:7px 14px;font-size:11px;font-weight:600;color:rgba(255,255,255,.45);cursor:pointer;transition:all .2s;white-space:nowrap;}
.tc.sel{background:rgba(74,158,255,.15);border-color:var(--blue);color:var(--blue);}
.tc:active{transform:scale(.94);}

/* ─── PROCHAIN BADGE ─── */
.next-badge-card{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:12px 14px;cursor:pointer;transition:all .2s;
}
.next-badge-card:active{transform:scale(.98);}
.next-badge-icon{
  font-size:26px;width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  filter:grayscale(1);opacity:.55;
}
.next-badge-info{flex:1;min-width:0;}
.next-badge-label{font-size:9px;color:rgba(255,255,255,.28);letter-spacing:2px;text-transform:uppercase;margin-bottom:3px;}
.next-badge-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.7);}
.next-badge-desc{font-size:10px;color:rgba(255,255,255,.35);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.next-badge-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.08);margin-top:6px;overflow:hidden;}
.next-badge-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .8s ease;}
.next-badge-pct{font-size:11px;color:rgba(255,255,255,.3);flex-shrink:0;font-family:'Special Gothic Expanded One',sans-serif;letter-spacing:1px;}
/* ─── MESSAGE DU JOUR ─── */
/* ── CARD MESSAGE DU JOUR — format bandeau horizontal compact ── */
.dmc-card{
  border-radius:14px;
  padding:11px 14px 11px 16px;
  position:relative;overflow:hidden;
  cursor:default;margin:0 0 9px;
  display:flex;align-items:center;gap:12px;
  -webkit-tap-highlight-color:transparent;
  animation:dmcFadeIn .35s ease both;
}
/* Barre d'accent verticale gauche */
.dmc-card::before{
  content:'';position:absolute;left:0;top:12%;bottom:12%;
  width:3px;border-radius:0 3px 3px 0;pointer-events:none;
}
.dmc-card.dmc-wink   {background:rgba(232,100,52,.07); border:1px solid rgba(232,100,52,.2);}
.dmc-card.dmc-astuce {background:rgba(46,204,113,.07); border:1px solid rgba(46,204,113,.2);}
.dmc-card.dmc-conseil{background:rgba(168,85,247,.07); border:1px solid rgba(168,85,247,.2);}
.dmc-card.dmc-pepite {background:rgba(245,200,66,.07); border:1px solid rgba(245,200,66,.2);}
.dmc-card.dmc-quote  {background:rgba(74,158,255,.07);  border:1px solid rgba(74,158,255,.2);}
.dmc-card.dmc-wink::before   {background:rgba(232,100,52,.75);}
.dmc-card.dmc-astuce::before {background:rgba(46,204,113,.75);}
.dmc-card.dmc-conseil::before{background:rgba(168,85,247,.75);}
.dmc-card.dmc-pepite::before {background:rgba(245,200,66,.75);}
.dmc-card.dmc-quote::before  {background:rgba(74,158,255,.75);}
/* Bloc emoji */
.dmc-emoji-wrap{
  font-size:24px;flex-shrink:0;
  width:42px;height:42px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
}
.dmc-wink   .dmc-emoji-wrap{background:rgba(232,100,52,.1);}
.dmc-astuce .dmc-emoji-wrap{background:rgba(46,204,113,.1);}
.dmc-conseil .dmc-emoji-wrap{background:rgba(168,85,247,.1);}
.dmc-pepite .dmc-emoji-wrap{background:rgba(245,200,66,.1);}
.dmc-quote  .dmc-emoji-wrap{background:rgba(74,158,255,.1);}
/* Texte */
.dmc-body{flex:1;min-width:0;}
.dmc-label{
  display:block;font-size:8px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:3px;
}
.dmc-wink   .dmc-label{color:rgba(232,100,52,.8);}
.dmc-astuce .dmc-label{color:rgba(46,204,113,.8);}
.dmc-conseil .dmc-label{color:rgba(168,85,247,.8);}
.dmc-pepite .dmc-label{color:rgba(245,200,66,.8);}
.dmc-quote  .dmc-label{color:rgba(74,158,255,.8);}
.dmc-text{font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.5;font-weight:400;}
/* Éléments de l'ancien layout masqués */
.dmc-header,.dmc-emoji,.dmc-footer,.dmc-icon,.dmc-date,.dmc-tag{display:none;}
@keyframes dmcFadeIn{from{opacity:0;transform:translateX(-5px);}to{opacity:1;transform:translateX(0);}}

/* ─── ANECDOTE DU JOUR — DESIGN CINÉMATOGRAPHIQUE ─── */
@keyframes anecHalo{
  0%,100%{opacity:.65;transform:scale(1)   translateY(0);}
  50%    {opacity:1;  transform:scale(1.12) translateY(-4px);}
}
@keyframes anecFadeIn{
  from{opacity:0;transform:translateY(10px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes filmScroll{
  from{background-position:0 0;}
  to{background-position:0 28px;}
}
@keyframes anecSpotlight{
  0%,100%{opacity:.55;transform:translateX(-50%) scaleX(1);}
  40%    {opacity:.80;transform:translateX(-46%) scaleX(1.08);}
  70%    {opacity:.60;transform:translateX(-54%) scaleX(.94);}
}
/* Shimmer de fond — trait de lumière qui traverse lentement */
@keyframes anecBgShimmer{
  0%  {transform:translateX(-140%) skewX(-18deg);}
  35% {transform:translateX(380%)  skewX(-18deg);}
  100%{transform:translateX(380%)  skewX(-18deg);}
}
@keyframes anecSlideInRight{
  from{opacity:0;transform:translateX(48px) scale(.97);}
  to  {opacity:1;transform:translateX(0)    scale(1);}
}
@keyframes anecSlideInLeft{
  from{opacity:0;transform:translateX(-48px) scale(.97);}
  to  {opacity:1;transform:translateX(0)     scale(1);}
}
@keyframes anecProgress{from{width:0%;}to{width:100%;}}

.anec-cinema-card{
  position:relative;overflow:hidden;border-radius:22px;
  margin-bottom:10px;cursor:pointer;
  min-height:148px;
  background:linear-gradient(180deg,#0d0a16 0%,#0a0a12 50%,#0c0e0a 100%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 8px 40px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06) inset;
  animation:anecFadeIn .45s cubic-bezier(.22,.68,0,1.2) both;
}
/* Shimmer de fond — élément dédié */
.anec-bg-shimmer{
  position:absolute;top:0;left:0;width:45%;height:100%;
  pointer-events:none;z-index:1;
  background:linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,.028) 48%,
    rgba(255,255,255,.042) 50%,
    rgba(255,255,255,.028) 52%,
    transparent 80%
  );
  transform:translateX(-140%) skewX(-18deg);
  will-change:transform;
  animation:anecBgShimmer 6s ease-in-out infinite;
  animation-delay:1.2s;
}
.anec-cinema-card.slide-in-right{animation:anecSlideInRight .38s cubic-bezier(.22,.68,0,1.15) both;}
.anec-cinema-card.slide-in-left {animation:anecSlideInLeft  .38s cubic-bezier(.22,.68,0,1.15) both;}
/* Effet projecteur — cône de lumière venant du haut */
.anec-spotlight{
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:100%;height:100%;
  background:radial-gradient(ellipse 50% 40% at 50% -5%, rgba(255,240,200,.09) 0%, rgba(255,220,120,.04) 40%, transparent 70%);
  pointer-events:none;z-index:1;
  animation:anecSpotlight 6s ease-in-out infinite;
}
/* Halo de couleur en fond */
.anec-halo{
  position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;z-index:0;
  animation:anecHalo 4s ease-in-out infinite;
}
/* Accent gauche coloré */
.anec-film-strip{
  position:absolute;top:0;left:12%;right:12%;height:3px;
  border-radius:0 0 4px 4px;
  z-index:1;
}
/* Contenu principal */
.anec-content{
  position:relative;z-index:2;
  padding:14px 18px 12px 18px;
  display:flex;flex-direction:column;gap:0;
}
/* Header : label + date */
.anec-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:11px;
}
.anec-label{
  font-size:8px;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;
}
.anec-date{
  font-size:10px;color:rgba(255,255,255,.3);
  font-weight:500;letter-spacing:.3px;
}
/* Ligne emoji + texte */
.anec-body{display:flex;align-items:flex-start;gap:12px;}
.anec-emoji{display:none;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 12px rgba(0,0,0,.4);
  animation:xpIconFloat 4s ease-in-out infinite;animation-delay:0s;
}
.anec-txt{
  flex:1;min-width:0;
  font-size:13.5px;color:rgba(255,255,255,.85);
  line-height:1.65;font-weight:400;padding-top:2px;
}
/* Footer */
.anec-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:12px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.05);
}
.anec-tag{
  font-size:9px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;border-radius:6px;padding:3px 9px;
}
.anecdote-dots{display:flex;gap:5px;align-items:center;}
.anecdote-dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.18);
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
}
.anecdote-dot.active{width:28px;border-radius:3px;}
.anecdote-dot.active .anec-dot-progress{
  position:absolute;top:0;left:0;height:100%;
  background:currentColor;opacity:.55;border-radius:inherit;
  animation:anecProgress 8s linear both;
}

/* ─── ANCIENNE ANECDOTE DU JOUR ─── */
.anecdote-card{
  background:linear-gradient(150deg,rgba(20,14,4,.95),rgba(12,9,3,.9));
  border:1px solid rgba(245,200,66,.18);border-radius:20px;
  padding:16px 18px 14px;position:relative;overflow:hidden;
  cursor:pointer;margin-bottom:9px;
  box-shadow:0 2px 20px rgba(0,0,0,.25);
}
.anecdote-card::before{
  content:'';position:absolute;inset:0;border-radius:20px;
  background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(245,200,66,.06) 0%,transparent 65%);
  pointer-events:none;
}
.anecdote-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.anecdote-label-wrap{display:flex;align-items:center;gap:8px;}
.anecdote-icon{width:28px;height:28px;border-radius:8px;background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:xpIconFloat 4s ease-in-out infinite;animation-delay:.3s;}
.anecdote-icon svg{width:13px;height:13px;color:var(--gold);}
.anecdote-label{font-size:9px;color:rgba(255,255,255,.35);letter-spacing:2.5px;text-transform:uppercase;}
.anecdote-date{font-size:10px;color:rgba(255,255,255,.28);font-weight:500;letter-spacing:.2px;}
.anecdote-text{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.65;font-weight:400;}
.anecdote-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;}
.anecdote-tag{font-size:9px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:rgba(245,200,66,.6);background:rgba(245,200,66,.08);border:1px solid rgba(245,200,66,.15);border-radius:8px;padding:3px 9px;}
.anecdote-dots{display:flex;gap:5px;align-items:center;}
.anecdote-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .25s;}
.anecdote-dot.active{width:16px;border-radius:3px;background:var(--gold);}

/* -- BOUTON JOUER : foil doré premium -- */
@keyframes pbtn-glare{
  0%,100%{left:-30%;opacity:0;}
  5%{opacity:1;}
  42%{left:120%;opacity:1;}
  52%{opacity:0;}
}
@keyframes pbtn-glow-pulse{
  0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -3px 0 rgba(0,0,0,.22) inset;transform:scale(1);}
  50%    {box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -3px 0 rgba(0,0,0,.22) inset;transform:scale(1.013);}
}
@keyframes pbtn-shimmer-slide{
  to{background-position:calc(100% + 4rem) 0;}
}

.pbtn,
.vs-launch-btn{
  width:100%;border:none;border-radius:20px;height:68px;
  color:#1a0e00;cursor:pointer;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:27px;letter-spacing:6px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  position:relative;overflow:hidden;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
  margin-top:4px;
  /* Fond doré multi-couche avec profondeur */
  background:linear-gradient(170deg,
    #ffe97a 0%,
    #f5c842 28%,
    #e8a800 55%,
    #f5c842 72%,
    #ffd84a 100%
  );
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -3px 0 rgba(100,60,0,.3) inset,
    inset 0 0 12px rgba(255,220,80,.1);
  animation:pbtn-glow-pulse 2.8s ease-in-out 0s infinite;
}

/* Grain doré */
.pbtn::before,
.vs-launch-btn::before{
  content:'';
  position:absolute;inset:0;border-radius:inherit;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size:cover;
  mix-blend-mode:overlay;
  opacity:.5;
  pointer-events:none;
}

/* Glare unique, propre, rapide */
.pbtn::after,
.vs-launch-btn::after{
  content:'';
  position:absolute;
  top:-50%;left:-30%;width:20%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg);
  animation:pbtn-glare 3.2s ease-in-out 1s infinite;
  pointer-events:none;
}

.pbtn:active,
.vs-launch-btn:active{
  transform:scale(.96);
  box-shadow:0 3px 16px rgba(245,200,66,.35),0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(100,60,0,.25) inset;
  animation:none;
}
.pbtn-icon{font-size:22px;position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}
.pbtn-text{position:relative;z-index:1;text-shadow:0 1px 2px rgba(255,200,0,.3);}

/* -- CARD MODE ALÉATOIRE -- */
@keyframes randomSpin{0%{transform:rotate(0deg) scale(1);}30%{transform:rotate(180deg) scale(1.2);}60%{transform:rotate(300deg) scale(1.1);}100%{transform:rotate(360deg) scale(1);}}
@keyframes randomPulse{0%,100%{box-shadow:0 0 0 0 rgba(168,85,247,0);}50%{box-shadow:0 0 24px 4px rgba(168,85,247,.22);}}
#random-mode-card:active{transform:scale(.97) !important;}
#random-mode-card.spinning #random-mode-icon-wrap{animation:randomSpin .55s cubic-bezier(.34,1.56,.64,1);}
#random-mode-card.pulsing{animation:randomPulse .6s ease-out;}

/* -- FOND DE JEU par mode -- */
#game-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .7s ease;
  overflow:hidden;
}
#game-bg.on{opacity:1;}

/* Halos animés — même technique que l'accueil, couleurs par mode */
#game-bg::before{
  content:'';position:absolute;inset:-30%;width:160%;height:160%;
  animation:gameProjA 9s ease-in-out infinite;
  opacity:.9;
}
#game-bg::after{
  content:'';position:absolute;inset:-20%;width:140%;height:140%;
  animation:gameProjB 13s ease-in-out infinite reverse;
  opacity:.7;
}
@keyframes gameProjA{
  0%,100%{transform:translate(0%,0%) rotate(0deg) scale(1);}
  20%    {transform:translate(7%,9%) rotate(6deg) scale(1.06);}
  40%    {transform:translate(-8%,4%) rotate(-5deg) scale(.96);}
  60%    {transform:translate(10%,-7%) rotate(4deg) scale(1.05);}
  80%    {transform:translate(-5%,8%) rotate(-3deg) scale(.97);}
}
@keyframes gameProjB{
  0%,100%{transform:translate(0%,0%) rotate(0deg);}
  25%    {transform:translate(-6%,-8%) rotate(-7deg);}
  50%    {transform:translate(9%,5%) rotate(6deg);}
  75%    {transform:translate(-7%,7%) rotate(-5deg);}
}

/* Trivia Ciné — ambre chaud */
#game-bg.mode-quiz::before{background:
  radial-gradient(ellipse 52% 42% at 38% 28%,rgba(200,130,10,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 70% 65%,rgba(150,80,0,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 20% 72%,rgba(120,60,0,.22) 0%,transparent 54%);}
#game-bg.mode-quiz::after{background:
  radial-gradient(ellipse 40% 32% at 60% 40%,rgba(180,100,5,.20) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Affiche Mystère — bleu nuit */
#game-bg.mode-photo::before{background:
  radial-gradient(ellipse 52% 42% at 65% 30%,rgba(0,70,160,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 25% 65%,rgba(0,40,120,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 70% 75%,rgba(0,30,100,.22) 0%,transparent 54%);}
#game-bg.mode-photo::after{background:
  radial-gradient(ellipse 40% 32% at 40% 45%,rgba(0,60,140,.18) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Quelle Année — violet profond */
#game-bg.mode-year::before{background:
  radial-gradient(ellipse 52% 42% at 50% 25%,rgba(80,0,160,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 30% 70%,rgba(60,0,120,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 75% 60%,rgba(40,0,100,.22) 0%,transparent 54%);}
#game-bg.mode-year::after{background:
  radial-gradient(ellipse 40% 32% at 60% 40%,rgba(70,0,140,.18) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Indices Mystère — rose */
#game-bg.mode-bo::before{background:
  radial-gradient(ellipse 52% 42% at 30% 60%,rgba(140,0,90,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 70% 30%,rgba(110,0,70,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 55% 80%,rgba(80,0,60,.22) 0%,transparent 54%);}
#game-bg.mode-bo::after{background:
  radial-gradient(ellipse 40% 32% at 55% 45%,rgba(120,0,80,.18) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Box-office — vert émeraude */
#game-bg.mode-boxoffice::before{background:
  radial-gradient(ellipse 52% 42% at 70% 70%,rgba(0,110,50,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 25% 40%,rgba(0,80,35,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 60% 20%,rgba(0,60,30,.22) 0%,transparent 54%);}
#game-bg.mode-boxoffice::after{background:
  radial-gradient(ellipse 40% 32% at 45% 55%,rgba(0,90,40,.18) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* La Réplique — orange */
#game-bg.mode-replique::before{background:
  radial-gradient(ellipse 52% 42% at 25% 50%,rgba(130,50,0,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 70% 30%,rgba(100,40,0,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 50% 80%,rgba(80,30,0,.22) 0%,transparent 54%);}
#game-bg.mode-replique::after{background:
  radial-gradient(ellipse 40% 32% at 55% 45%,rgba(110,45,0,.18) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Acteur Mystère — violet magenta */
#game-bg.mode-acteur::before{background:
  radial-gradient(ellipse 52% 42% at 78% 25%,rgba(100,0,130,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 20% 60%,rgba(80,0,110,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 55% 80%,rgba(60,0,90,.22) 0%,transparent 54%);}
#game-bg.mode-acteur::after{background:
  radial-gradient(ellipse 40% 32% at 45% 40%,rgba(90,0,120,.18) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Compositeur — cyan profond */
#game-bg.mode-compositeur::before{background:
  radial-gradient(ellipse 52% 42% at 50% 75%,rgba(0,85,130,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 75% 30%,rgba(0,65,100,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 20% 45%,rgba(0,50,80,.22) 0%,transparent 54%);}
#game-bg.mode-compositeur::after{background:
  radial-gradient(ellipse 40% 32% at 45% 45%,rgba(0,75,115,.18) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Le Casting — doré */
#game-bg.mode-casting::before{background:
  radial-gradient(ellipse 52% 42% at 60% 30%,rgba(110,75,0,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 25% 65%,rgba(80,55,0,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 70% 75%,rgba(60,40,0,.22) 0%,transparent 54%);}
#game-bg.mode-casting::after{background:
  radial-gradient(ellipse 40% 32% at 45% 45%,rgba(100,65,0,.18) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Générique — orange brûlé */
#game-bg.mode-generique::before{background:
  radial-gradient(ellipse 52% 42% at 50% 40%,rgba(110,40,0,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 25% 70%,rgba(80,30,0,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 75% 65%,rgba(60,20,0,.22) 0%,transparent 54%);}
#game-bg.mode-generique::after{background:
  radial-gradient(ellipse 40% 32% at 55% 40%,rgba(100,35,0,.18) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Filmographie — violet moyen */
#game-bg.mode-filmographie::before{background:
  radial-gradient(ellipse 52% 42% at 45% 35%,rgba(70,0,140,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 72% 68%,rgba(50,0,110,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 22% 70%,rgba(40,0,90,.22) 0%,transparent 54%);}
#game-bg.mode-filmographie::after{background:
  radial-gradient(ellipse 40% 32% at 55% 42%,rgba(60,0,130,.18) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Réalisateur — rouge bordeaux */
#game-bg.mode-realisateur::before{background:
  radial-gradient(ellipse 52% 42% at 40% 30%,rgba(130,0,30,.55) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 72% 68%,rgba(100,0,20,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 22% 72%,rgba(80,0,15,.22) 0%,transparent 54%);}
#game-bg.mode-realisateur::after{background:
  radial-gradient(ellipse 40% 32% at 55% 42%,rgba(120,0,25,.18) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Lieu de tournage — vert désert */
#game-bg.mode-location::before{background:
  radial-gradient(ellipse 52% 42% at 35% 35%,rgba(60,100,0,.50) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 70% 65%,rgba(40,80,0,.28) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 55% 78%,rgba(30,60,0,.20) 0%,transparent 54%);}
#game-bg.mode-location::after{background:
  radial-gradient(ellipse 40% 32% at 50% 40%,rgba(50,90,0,.16) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Vrai ou Faux — vert émeraude */
#game-bg.mode-vraifaux::before{background:
  radial-gradient(ellipse 52% 42% at 42% 32%,rgba(0,150,90,.52) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 70% 68%,rgba(0,110,65,.28) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 22% 72%,rgba(0,90,55,.20) 0%,transparent 54%);}
#game-bg.mode-vraifaux::after{background:
  radial-gradient(ellipse 40% 32% at 55% 42%,rgba(0,130,75,.16) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* 2 Joueurs — rouge-rose VS */
#game-bg.mode-versus::before{background:
  radial-gradient(ellipse 52% 42% at 20% 50%,rgba(140,0,50,.55) 0%,transparent 55%),
  radial-gradient(ellipse 52% 42% at 80% 50%,rgba(0,50,140,.45) 0%,transparent 55%),
  radial-gradient(ellipse 38% 32% at 50% 80%,rgba(80,0,30,.20) 0%,transparent 52%);}
#game-bg.mode-versus::after{background:
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Training — violet doux */
#game-bg.mode-training::before{background:
  radial-gradient(ellipse 52% 42% at 40% 30%,rgba(90,60,180,.45) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 68% 68%,rgba(70,40,150,.28) 0%,transparent 56%);}
#game-bg.mode-training::after{background:
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Séries TV — teal / cyan */
#game-bg.mode-series::before{background:
  radial-gradient(ellipse 52% 42% at 38% 30%,rgba(20,184,166,.52) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 72% 66%,rgba(6,182,212,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 20% 74%,rgba(20,184,166,.20) 0%,transparent 54%);}
#game-bg.mode-series::after{background:
  radial-gradient(ellipse 40% 32% at 58% 40%,rgba(13,148,136,.16) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.88) 100%);}

/* Survie — rouge sang, animation heartbeat */
#game-bg.mode-survie{background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(120,0,20,.85) 0%,#070008 65%);}
#game-bg.mode-survie::before{
  background:
    radial-gradient(ellipse 55% 48% at 50% 42%,rgba(220,30,50,.60) 0%,transparent 58%),
    radial-gradient(ellipse 40% 35% at 20% 70%,rgba(160,10,30,.32) 0%,transparent 56%),
    radial-gradient(ellipse 38% 32% at 80% 25%,rgba(180,20,40,.28) 0%,transparent 54%);
  animation:survieHeartA 4s ease-in-out infinite;}
#game-bg.mode-survie::after{background:
  radial-gradient(ellipse 45% 38% at 65% 55%,rgba(200,10,35,.18) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 24%,rgba(0,0,0,.92) 100%);
  animation:survieHeartB 4s ease-in-out infinite;}
@keyframes survieHeartA{
  0%,100%{transform:translate(0%,0%) scale(1);opacity:.9;}
  10%    {transform:translate(0%,0%) scale(1.06);opacity:1;}
  20%    {transform:translate(0%,0%) scale(.97);opacity:.85;}
  30%    {transform:translate(0%,0%) scale(1.04);opacity:.95;}
  50%    {transform:translate(4%,6%) rotate(3deg) scale(.96);opacity:.75;}
  75%    {transform:translate(-5%,-4%) rotate(-2deg) scale(1.02);opacity:.85;}
}
@keyframes survieHeartB{
  0%,100%{transform:translate(0%,0%) scale(1);}
  10%    {transform:translate(0%,0%) scale(1.05);}
  20%    {transform:translate(0%,0%) scale(.98);}
  30%    {transform:translate(0%,0%) scale(1.03);}
  50%    {transform:translate(-4%,5%) rotate(-3deg) scale(.97);}
  75%    {transform:translate(5%,-3%) rotate(2deg) scale(1.01);}
}

/* Rébus — orange vif cinéma */
#game-bg.mode-rebus::before{background:
  radial-gradient(ellipse 55% 45% at 35% 28%,rgba(240,120,0,.52) 0%,transparent 58%),
  radial-gradient(ellipse 45% 38% at 72% 65%,rgba(180,60,0,.30) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 55% 80%,rgba(140,40,0,.20) 0%,transparent 54%);}
#game-bg.mode-rebus::after{background:
  radial-gradient(ellipse 40% 32% at 60% 38%,rgba(240,100,0,.12) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 25%,rgba(0,0,0,.90) 100%);}
/* Pendu — bleu nuit mystérieux */
#game-bg.mode-pendu::before{background:
  radial-gradient(ellipse 52% 42% at 38% 30%,rgba(30,80,200,.50) 0%,transparent 58%),
  radial-gradient(ellipse 44% 38% at 68% 68%,rgba(15,50,140,.28) 0%,transparent 56%),
  radial-gradient(ellipse 38% 32% at 20% 72%,rgba(10,40,120,.20) 0%,transparent 54%);}
#game-bg.mode-pendu::after{background:
  radial-gradient(ellipse 40% 32% at 58% 40%,rgba(60,100,220,.12) 0%,transparent 52%),
  radial-gradient(ellipse 80% 70% at 50% 50%,transparent 28%,rgba(0,0,0,.90) 100%);}

/* ── RÉBUS ── */
.rebus-display{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:0 18px;
  background:transparent;
}
.rebus-emojis{
  font-size:52px;line-height:1.2;text-align:center;
  letter-spacing:4px;
  filter:drop-shadow(0 4px 20px rgba(240,120,0,.35));
  animation:rebusIn .5s cubic-bezier(.34,1.56,.64,1) both;
  user-select:none;-webkit-user-select:none;
}
@keyframes rebusIn{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:scale(1);}}
.rebus-hint{
  font-size:11px;color:rgba(255,255,255,.3);letter-spacing:2px;text-transform:uppercase;
  margin-top:4px;
}
.rebus-category{
  font-size:10px;color:rgba(240,120,0,.7);letter-spacing:2.5px;text-transform:uppercase;
  background:rgba(240,120,0,.08);border:1px solid rgba(240,120,0,.18);
  border-radius:8px;padding:4px 12px;
}

/* ── PENDU ── */
.pendu-wrap{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  gap:0;padding:0 14px max(12px,env(safe-area-inset-bottom));overflow:hidden;
}
.pendu-top{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:16px 0 0;width:100%;
}
.pendu-svg-wrap{flex-shrink:0;}
.pendu-svg{width:140px;height:118px;}
.pendu-word{
  /* Conteneur de groupes de mots — ne wrap qu'entre les mots, pas dans un mot */
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 14px;   /* espace inter-mots généreux */
  padding:4px 10px;
}
.pendu-word-group{
  /* Un groupe = un mot — ne se coupe jamais en deux lignes */
  display:flex;flex-direction:row;align-items:flex-end;
  gap:5px;          /* espace inter-lettres dans un mot */
  flex-shrink:0;
}
.pendu-letter-slot{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  min-width:20px;padding-bottom:4px;
}
.pendu-letter-char{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:24px;line-height:1;
  color:var(--tx);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .2s;
  opacity:0;transform:translateY(-8px);
}
.pendu-letter-char.shown{opacity:1;transform:translateY(0);}
.pendu-letter-bar{width:100%;height:2px;background:rgba(255,255,255,.22);border-radius:1px;}
.pendu-letter-bar.active{background:var(--blue);}
.pendu-letter-space{width:14px;height:24px;display:flex;align-items:flex-end;}
.pendu-keyboard{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  padding:12px 8px;flex-shrink:0;
  margin-top:auto;
  width:100%;
}
.pendu-key{
  width:36px;height:42px;border-radius:11px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.85);font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .12s,background .15s,opacity .2s;
  user-select:none;-webkit-user-select:none;
}
.pendu-key:active{transform:scale(.88);background:rgba(255,255,255,.18);}
.pendu-key.used-wrong{background:rgba(232,52,74,.18);border-color:rgba(232,52,74,.35);color:rgba(232,52,74,.6);opacity:.5;pointer-events:none;}
.pendu-key.used-ok{background:rgba(46,204,113,.15);border-color:rgba(46,204,113,.3);color:rgba(46,204,113,.8);pointer-events:none;}
.pendu-errors{
  display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.45);
  flex-shrink:0;
}
.pendu-err-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);transition:background .3s;}
.pendu-err-dot.on{background:var(--red);box-shadow:0 0 6px rgba(232,52,74,.5);}
.pendu-category-badge{
  font-size:10px;color:rgba(74,158,255,.7);letter-spacing:2.5px;text-transform:uppercase;
  background:rgba(74,158,255,.08);border:1px solid rgba(74,158,255,.18);
  border-radius:8px;padding:4px 12px;flex-shrink:0;
}
.pendu-reveal-word{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;letter-spacing:2px;
  color:var(--red);text-align:center;padding:4px 16px;
  animation:fadeScaleIn .4s ease both;
}

#game,#lvlup,#result{position:absolute;inset:0;z-index:1;}


/* -- SPLASH SCREEN -- */
/* ── Overlay paysage mobile ── */
#landscape-overlay{
  display:none; /* caché par défaut */
  position:fixed;inset:0;z-index:99999;
  background:#0f0e18;
  flex-direction:column;align-items:center;justify-content:center;
  gap:0;
}
.lo-inner{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:24px;text-align:center;
}
.lo-icon{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,200,66,.08);
  border:1.5px solid rgba(245,200,66,.2);
  border-radius:20px;
  color:var(--gold);
  animation:loRotate 2s ease-in-out infinite;
}
.lo-icon svg{width:52px;height:auto;}
@keyframes loRotate{
  0%,100%{transform:rotate(0deg);}
  30%{transform:rotate(90deg);}
  70%{transform:rotate(90deg);}
}
.lo-title{
  font-family:'Special Gothic Expanded One',sans-serif;
  font-size:22px;letter-spacing:2px;
  color:rgba(255,255,255,.9);
}
.lo-sub{
  font-size:12px;color:rgba(255,255,255,.4);
  line-height:1.5;letter-spacing:.3px;
}
/* Afficher uniquement sur mobile (<= 900px) en paysage, sauf si zone vidéo active */
@media screen and (orientation:landscape) and (max-height:500px){
  #landscape-overlay:not(.lo-hidden){
    display:flex;
  }
}

#splash{
  position:fixed;inset:0;z-index:9999;
  background:#0f0e18;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;
  transition:opacity .6s ease;
}
#splash.out{opacity:0;pointer-events:none;}

/* Fond animé du splash — même halos projecteur que l'accueil */
#splash-bg{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
}
/* orbes animées */
@keyframes orbeFloat1{
  0%,100%{transform:translate(0,0) scale(1);}
  30%    {transform:translate(3%,4%) scale(1.06);}
  60%    {transform:translate(-4%,2%) scale(.96);}
}
@keyframes orbeFloat2{
  0%,100%{transform:translate(0,0) scale(1);}
  25%    {transform:translate(-3%,-5%) scale(1.04);}
  65%    {transform:translate(4%,-2%) scale(.97);}
}
#splash-bg::before{
  content:'';position:absolute;inset:-30%;width:160%;height:160%;
  background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(200,120,20,.55) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(20,60,180,.45) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(140,20,80,.38) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(170,80,10,.32) 0%, transparent 50%);
}
#splash-bg::after{
  content:'';position:absolute;inset:-20%;width:140%;height:140%;
  background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(190,105,15,.18) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(10,55,150,.15) 0%, transparent 52%),
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 25%, rgba(0,0,0,.45) 100%);
}
/* canvas film effect par-dessus les orbes */
#splash-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  opacity:0;
}
/* Le canvas devient visible seulement quand le rideau est ouvert */
#splash.curtain-open #splash-canvas{
  opacity:1;
}
#splash-film-ref{
  display:none;
}
#splash-skip{
  position:absolute;
  bottom:max(38px, calc(env(safe-area-inset-bottom) + 32px));
  left:0;right:0;
  height:25%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:0;
  text-align:center;
  z-index:9998;
  font-size:9px;letter-spacing:3px;text-transform:uppercase;
  font-family:'DM Sans',sans-serif;
  cursor:pointer;user-select:none;
  touch-action:manipulation;
  pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;
  color:rgba(255,255,255,.45);
}
#splash-skip.visible{
  opacity:1;
  pointer-events:auto;
  animation:skipPulse 3s ease-in-out infinite;
}
@keyframes skipPulse{
  0%,100%{color:rgba(255,255,255,.40);}
  50%    {color:rgba(255,255,255,.90);}
}
/* Bloquer tous les taps sur le splash quand le rideau est ouvert */
#splash.curtain-open{pointer-events:all;}

/* ── Agitation rapide des orbes à l'ouverture du rideau ── */
#splash-bg-anim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;
}
#splash-bg-anim::before{
  content:'';position:absolute;inset:-30%;width:160%;height:160%;
  background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(200,120,20,.55) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(20,60,180,.45) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(140,20,80,.38) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(170,80,10,.32) 0%, transparent 50%);
}
#splash-bg-anim::after{
  content:'';position:absolute;inset:-20%;width:140%;height:140%;
  background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(190,105,15,.22) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(10,55,150,.18) 0%, transparent 52%);
}

/* Explosion de couleurs vive puis retour au calme */
@keyframes orbeJolt{
  0%  {opacity:0; transform:scale(.75)  translate(0,0);}
  5%  {opacity:1; transform:scale(1.22) translate(-6%,-5%);}
  15% {opacity:1; transform:scale(.90)  translate(7%, 6%);}
  28% {opacity:1; transform:scale(1.14) translate(-5%, 4%);}
  44% {opacity:.85;transform:scale(.96) translate(4%,-3%);}
  62% {opacity:.55;transform:scale(1.05) translate(-2%, 2%);}
  80% {opacity:.20;transform:scale(.99) translate(1%,-1%);}
  100%{opacity:0; transform:scale(1)    translate(0,0);}
}
@keyframes orbeJolt2{
  0%  {opacity:0; transform:scale(.8)   translate(0,0);}
  7%  {opacity:1; transform:scale(.86)  translate(7%, 5%);}
  18% {opacity:1; transform:scale(1.18) translate(-6%,-6%);}
  32% {opacity:.95;transform:scale(.91) translate(5%, 5%);}
  50% {opacity:.70;transform:scale(1.10) translate(-4%,-3%);}
  68% {opacity:.40;transform:scale(.97) translate(2%, 2%);}
  84% {opacity:.12;transform:scale(1.02) translate(-1%,-1%);}
  100%{opacity:0; transform:scale(1)    translate(0,0);}
}
@keyframes bgJoltFade{
  0%  {opacity:0;}
  4%  {opacity:1;}
  70% {opacity:1;}
  100%{opacity:0;}
}

#splash.curtain-open #splash-bg-anim{
  animation:none;
}
#splash.curtain-open #splash-bg-anim::before{
  animation:none;
}
#splash.curtain-open #splash-bg-anim::after{
  animation:none;
}

/* ── RIDEAU CINÉMA — V4 : Velours plissé ── */
.splash-curtain{
  position:absolute;inset:0;z-index:1;
  display:flex;
  pointer-events:none;
}

.splash-curtain-seam{
  position:absolute;
  top:0;bottom:0;
  left:calc(50% - 1px);
  width:2px;
  background:transparent;
  box-shadow:0 0 25px 18px rgba(0,0,0,.6);
  pointer-events:none;
  z-index:10;
  transition:opacity .4s ease;
}
.splash-curtain.open .splash-curtain-seam{opacity:0;}
.splash-curtain-l,.splash-curtain-r{
  flex:1;
  position:relative;
  overflow:hidden;
  transition:none;
}

/* Plis : alternance lumière/ombre simulant le velours drapé */
.splash-curtain-l{
  transform-origin:left center;
  background:
    linear-gradient(90deg, transparent 88%, rgba(0,0,0,.7) 100%),
    linear-gradient(90deg, rgba(80,30,20,.18) 0%, transparent 18%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.0)   0px,
      rgba(0,0,0,.28)  6px,
      rgba(60,10,10,.08) 12px,
      rgba(0,0,0,.0)   22px,
      rgba(0,0,0,.22)  30px,
      rgba(0,0,0,.0)   42px,
      rgba(20,5,5,.15) 50px,
      rgba(0,0,0,.32)  56px,
      rgba(0,0,0,.0)   70px,
      rgba(0,0,0,.18)  80px,
      rgba(0,0,0,.0)   96px,
      rgba(0,0,0,.26)  104px,
      rgba(0,0,0,.0)   118px,
      rgba(30,8,8,.12) 128px,
      rgba(0,0,0,.28)  136px,
      rgba(0,0,0,.0)   152px
    ),
    linear-gradient(90deg,
      rgb(18,5,8) 0%,
      rgb(28,8,12) 30%,
      rgb(22,6,10) 60%,
      rgb(15,4,7) 100%
    );
  box-shadow:12px 0 50px rgba(0,0,0,.9), inset -40px 0 50px rgba(0,0,0,.85);
}
.splash-curtain-r{
  transform-origin:right center;
  background:
    linear-gradient(270deg, transparent 88%, rgba(0,0,0,.7) 100%),
    linear-gradient(270deg, rgba(80,30,20,.18) 0%, transparent 18%),
    repeating-linear-gradient(270deg,
      rgba(0,0,0,.0)   0px,
      rgba(0,0,0,.28)  6px,
      rgba(60,10,10,.08) 12px,
      rgba(0,0,0,.0)   22px,
      rgba(0,0,0,.22)  30px,
      rgba(0,0,0,.0)   42px,
      rgba(20,5,5,.15) 50px,
      rgba(0,0,0,.32)  56px,
      rgba(0,0,0,.0)   70px,
      rgba(0,0,0,.18)  80px,
      rgba(0,0,0,.0)   96px,
      rgba(0,0,0,.26)  104px,
      rgba(0,0,0,.0)   118px,
      rgba(30,8,8,.12) 128px,
      rgba(0,0,0,.28)  136px,
      rgba(0,0,0,.0)   152px
    ),
    linear-gradient(270deg,
      rgb(18,5,8) 0%,
      rgb(28,8,12) 30%,
      rgb(22,6,10) 60%,
      rgb(15,4,7) 100%
    );
  box-shadow:-12px 0 50px rgba(0,0,0,.9), inset 40px 0 50px rgba(0,0,0,.85);
}

/* Liseré retiré */

/* Ombre bord intérieur */

.splash-curtain.open .splash-curtain-l{
  animation:curtainOpenL 4.2s cubic-bezier(.4,.0,.6,1) forwards;
}
.splash-curtain.open .splash-curtain-r{
  animation:curtainOpenR 4.2s cubic-bezier(.4,.0,.6,1) forwards;
}
@keyframes curtainOpenL{
  0%  {transform:translateX(0);}
  100%{transform:translateX(-100%);}
}
@keyframes curtainOpenR{
  0%  {transform:translateX(0);}
  100%{transform:translateX(100%);}
}
.splash-logo-wrap{position:relative;z-index:7;text-align:center;opacity:0;transform:scale(.8);transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.56,.64,1);background:transparent;}
.splash-logo-wrap.show{opacity:1;transform:scale(1);}
/* Logo CinéQuiz fondu discret à l'ouverture du rideau */
#splash.curtain-open .splash-logo-wrap{
  opacity:0;
  pointer-events:none;
  transition:opacity 0.5s ease;
}
/* Masquage immédiat dès le swipe (avant curtain-open) */
#splash.rideau-ouvert .splash-logo-wrap{
  opacity:0;
  pointer-events:none;
  transition:opacity 0.35s ease;
}
#splash.rideau-ouvert .splash-tagline{
  opacity:0;
  transition:opacity 0.35s ease;
}
#splash.rideau-ouvert .splash-credit{
  opacity:0!important;
  transform:translateY(8px);
  transition:opacity 0.25s ease, transform 0.25s ease;
}
/* Logo-film-mode : réapparaît en haut en petit après l'ouverture */
#splash .splash-logo-wrap.logo-film-mode{
  position:absolute;
  top:max(10px, env(safe-area-inset-top, 0px));
  left:0;right:0;
  bottom:auto;
  opacity:1;
  transform:scale(0.72);
  transform-origin:top center;
  transition:opacity 0.70s ease 0.10s, transform 0.70s cubic-bezier(.34,1.2,.64,1) 0.10s;
  pointer-events:none;
}
#splash .splash-logo-wrap.logo-film-mode .splash-tagline{
  opacity:1;
  transition:opacity 0.60s ease 0.35s;
}
/* Swipe-wrap masqué sur le splash film */
#splash.curtain-open .splash-swipe-wrap{
  opacity:0;
  pointer-events:none;
  transition:opacity 0.4s ease;
}
/* Tagline et credit masqués pendant rideau */
#splash.curtain-open .splash-tagline{
  opacity:0;
  transition:opacity 0s;
}
#splash.curtain-open .splash-credit{
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.splash-logo-container{
  filter:
    drop-shadow(1px 1px 0 rgba(0,0,0,0.60))
    drop-shadow(2px 2px 0 rgba(0,0,0,0.54))
    drop-shadow(3px 3px 0 rgba(0,0,0,0.46))
    drop-shadow(4px 4px 0 rgba(0,0,0,0.38))
    drop-shadow(5px 5px 0 rgba(0,0,0,0.28))
    drop-shadow(6px 7px 8px rgba(0,0,0,0.55));
}
.splash-logo{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:88px;letter-spacing:6px;
  background:linear-gradient(135deg,#fff3c0,var(--gold),#fff8e0,var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  display:block;
}

/* ── Splash logo adapté au thème — même sens que le doré par défaut ── */
body.theme-neon    .splash-logo{background:linear-gradient(135deg,#ffccf5,#ee00cc,#f0c8ff,#7700bb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-crimson .splash-logo{background:linear-gradient(135deg,#ffd0d8,#ff3a5c,#ffe0e5,#aa0020);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-ocean   .splash-logo{background:linear-gradient(135deg,#ccf5ff,#00c8f0,#e0f8ff,#006699);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-sunset  .splash-logo{background:linear-gradient(135deg,#ffe8c0,#ff8c38,#fff0d8,#cc3300);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-ice     .splash-logo{background:linear-gradient(135deg,#f0faff,#7ecef8,#e0f5ff,#1a6699);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-aurora  .splash-logo{background:linear-gradient(135deg,#ccffdd,#30ee80,#f0d0ff,#8800cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-galaxy  .splash-logo{background:linear-gradient(135deg,#ece8ff,#9966ff,#f5f0ff,#3300aa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-emerald .splash-logo{background:linear-gradient(135deg,#ccffe0,#00e870,#e0fff0,#006633);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-inferno .splash-logo{background:linear-gradient(135deg,#ffff99,#ff8800,#fff0aa,#cc1100);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-matrix  .splash-logo{background:linear-gradient(135deg,#ddffcc,#00ff55,#eeffdd,#005522);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-rose    .splash-logo{background:linear-gradient(135deg,#ffe8f5,#ff44aa,#fff0f8,#880044);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}


/* ── Swipe button adapté au thème ── */
body .splash-swipe-thumb{background:linear-gradient(145deg,#f5c842,#e8a800);box-shadow:0 2px 16px rgba(245,200,66,.45),0 0 0 1px rgba(245,200,66,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#0a0810;}
body .splash-swipe-track{border-color:rgba(245,200,66,.45);animation:none;}
body.theme-neon .splash-swipe-thumb{background:linear-gradient(145deg,#c466ff,#9b30ff);box-shadow:0 2px 16px rgba(196,102,255,.45),0 0 0 1px rgba(196,102,255,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#0a0810;}
body.theme-neon .splash-swipe-track{border-color:rgba(196,102,255,.45);animation:none;}
body.theme-crimson .splash-swipe-thumb{background:linear-gradient(145deg,#ff3a5c,#cc0025);box-shadow:0 2px 16px rgba(255,58,92,.45),0 0 0 1px rgba(255,58,92,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#0a0810;}
body.theme-crimson .splash-swipe-track{border-color:rgba(255,58,92,.45);animation:none;}
body.theme-ocean .splash-swipe-thumb{background:linear-gradient(145deg,#00d4ff,#0099cc);box-shadow:0 2px 16px rgba(0,212,255,.45),0 0 0 1px rgba(0,212,255,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#0a0810;}
body.theme-ocean .splash-swipe-track{border-color:rgba(0,212,255,.45);animation:none;}
body.theme-sunset .splash-swipe-thumb{background:linear-gradient(145deg,#ff8c38,#e55e00);box-shadow:0 2px 16px rgba(255,140,56,.45),0 0 0 1px rgba(255,140,56,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#0a0810;}
body.theme-sunset .splash-swipe-track{border-color:rgba(255,140,56,.45);animation:none;}
body.theme-ice .splash-swipe-thumb{background:linear-gradient(145deg,#c8eeff,#45a8e0);box-shadow:0 2px 16px rgba(200,238,255,.45),0 0 0 1px rgba(200,238,255,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#003366;}
body.theme-ice .splash-swipe-track{border-color:rgba(200,238,255,.45);animation:none;}
body.theme-aurora .splash-swipe-thumb{background:linear-gradient(145deg,#4ade80,#c084fc);box-shadow:0 2px 16px rgba(74,222,128,.45),0 0 0 1px rgba(74,222,128,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#0a0810;}
body.theme-aurora .splash-swipe-track{border-color:rgba(74,222,128,.45);animation:none;}
body.theme-galaxy .splash-swipe-thumb{background:linear-gradient(145deg,#a78bfa,#6d28d9);box-shadow:0 2px 16px rgba(167,139,250,.45),0 0 0 1px rgba(167,139,250,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#0a0810;}
body.theme-galaxy .splash-swipe-track{border-color:rgba(167,139,250,.45);animation:none;}
body.theme-emerald .splash-swipe-thumb{background:linear-gradient(145deg,#10f07c,#00b85a);box-shadow:0 2px 16px rgba(16,240,124,.45),0 0 0 1px rgba(16,240,124,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#0a0810;}
body.theme-emerald .splash-swipe-track{border-color:rgba(16,240,124,.45);animation:none;}
body.theme-inferno .splash-swipe-thumb{background:linear-gradient(145deg,#ffdd00,#ff9500);box-shadow:0 2px 16px rgba(255,221,0,.45),0 0 0 1px rgba(255,221,0,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#0a0810;}
body.theme-inferno .splash-swipe-track{border-color:rgba(255,221,0,.45);animation:none;}
body.theme-matrix .splash-swipe-thumb{background:linear-gradient(145deg,#88ff00,#00ff41);box-shadow:0 2px 16px rgba(136,255,0,.45),0 0 0 1px rgba(136,255,0,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#0a0810;}
body.theme-matrix .splash-swipe-track{border-color:rgba(136,255,0,.45);animation:none;}
body.theme-rose .splash-swipe-thumb{background:linear-gradient(145deg,#ffaadd,#ff6eb4);box-shadow:0 2px 16px rgba(255,170,221,.45),0 0 0 1px rgba(255,170,221,.45),inset 0 1px 0 rgba(255,255,255,.25);color:#0a0810;}
body.theme-rose .splash-swipe-track{border-color:rgba(255,170,221,.45);animation:none;}




/* ── Swipe button adapté au thème ── */
body.theme-neon    .splash-swipe-thumb{background:linear-gradient(145deg,#e0aaff,#c466ff,#9933cc);color:#1a0030;}
body.theme-neon    .splash-swipe-track{border-color:rgba(196,102,255,.4);}
body.theme-neon    .splash-swipe-track::before{background:linear-gradient(90deg,rgba(196,102,255,.2),rgba(196,102,255,.06));}
body.theme-crimson .splash-swipe-thumb{background:linear-gradient(145deg,#ff8fab,#ff3a5c,#c0002a);color:#fff0f2;}
body.theme-crimson .splash-swipe-track{border-color:rgba(255,58,92,.4);}
body.theme-crimson .splash-swipe-track::before{background:linear-gradient(90deg,rgba(255,58,92,.2),rgba(255,58,92,.06));}
body.theme-ocean   .splash-swipe-thumb{background:linear-gradient(145deg,#80f0ff,#00d4ff,#0098cc);color:#001a24;}
body.theme-ocean   .splash-swipe-track{border-color:rgba(0,212,255,.4);}
body.theme-ocean   .splash-swipe-track::before{background:linear-gradient(90deg,rgba(0,212,255,.2),rgba(0,212,255,.06));}
body.theme-sunset  .splash-swipe-thumb{background:linear-gradient(145deg,#ffc87a,#ff8c38,#e55e00);color:#1a0800;}
body.theme-sunset  .splash-swipe-track{border-color:rgba(255,140,56,.4);}
body.theme-sunset  .splash-swipe-track::before{background:linear-gradient(90deg,rgba(255,140,56,.2),rgba(255,140,56,.06));}
body.theme-ice     .splash-swipe-thumb{background:linear-gradient(145deg,#e8f6ff,#8ed8f8,#45a8e0);color:#001830;}
body.theme-ice     .splash-swipe-track{border-color:rgba(142,216,248,.4);}
body.theme-ice     .splash-swipe-track::before{background:linear-gradient(90deg,rgba(142,216,248,.2),rgba(142,216,248,.06));}
body.theme-aurora  .splash-swipe-thumb{background:linear-gradient(145deg,#4ade80,#c084fc,#f472b6);color:#0a0014;}
body.theme-aurora  .splash-swipe-track{border-color:rgba(192,132,252,.4);}
body.theme-aurora  .splash-swipe-track::before{background:linear-gradient(90deg,rgba(192,132,252,.2),rgba(192,132,252,.06));}
body.theme-galaxy  .splash-swipe-thumb{background:linear-gradient(145deg,#d8c8ff,#a78bfa,#6d28d9);color:#0d0020;}
body.theme-galaxy  .splash-swipe-track{border-color:rgba(167,139,250,.4);}
body.theme-galaxy  .splash-swipe-track::before{background:linear-gradient(90deg,rgba(167,139,250,.2),rgba(167,139,250,.06));}
body.theme-emerald .splash-swipe-thumb{background:linear-gradient(145deg,#80ffc0,#10f07c,#00b85a);color:#001a0e;}
body.theme-emerald .splash-swipe-track{border-color:rgba(16,240,124,.4);}
body.theme-emerald .splash-swipe-track::before{background:linear-gradient(90deg,rgba(16,240,124,.2),rgba(16,240,124,.06));}
body.theme-inferno .splash-swipe-thumb{background:linear-gradient(145deg,#ffdd00,#ff9500,#ff3000);color:#1a0800;}
body.theme-inferno .splash-swipe-track{border-color:rgba(255,149,0,.4);}
body.theme-inferno .splash-swipe-track::before{background:linear-gradient(90deg,rgba(255,149,0,.2),rgba(255,149,0,.06));}
body.theme-matrix  .splash-swipe-thumb{background:linear-gradient(145deg,#88ff00,#00ff41,#00bb30);color:#001400;}
body.theme-matrix  .splash-swipe-track{border-color:rgba(0,255,65,.4);}
body.theme-matrix  .splash-swipe-track::before{background:linear-gradient(90deg,rgba(0,255,65,.2),rgba(0,255,65,.06));}
body.theme-rose    .splash-swipe-thumb{background:linear-gradient(145deg,#ffb8e0,#ff6eb4,#d4006c);color:#1a0014;}
body.theme-rose    .splash-swipe-track{border-color:rgba(255,110,180,.4);}
body.theme-rose    .splash-swipe-track::before{background:linear-gradient(90deg,rgba(255,110,180,.2),rgba(255,110,180,.06));}
.splash-tagline{
  font-size:11px;letter-spacing:7px;text-transform:uppercase;margin-top:4px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,.55) 47%,
    rgba(255,255,255,1.00) 50%,
    rgba(255,255,255,.55) 53%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,.55) 100%
  );
  background-size:600% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.70)) drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}
.splash-tagline::before,
.splash-tagline::after{
  content:'';
  display:block;flex-shrink:0;
  width:22px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45));
  -webkit-text-fill-color:initial;
}
.splash-tagline::after{
  background:linear-gradient(90deg,rgba(255,255,255,.45),transparent);
}
.splash-logo-wrap.show .splash-tagline{
  animation:taglineBreathe 5s ease-in-out 0.8s infinite, taglineShimmer 9s linear 1s infinite;
  will-change:transform, background-position;
}
@keyframes taglineShimmer{0%{background-position:100% center;}100%{background-position:-100% center;}}
  100%{background-position:110% center;}
}
@keyframes taglineBreathe{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-5px);}
}
@keyframes taglineBreathe{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-6px);}
}
100%{background-position:200% center;}}
  100%{background-position:-120% center;}
}
.splash-sep{width:28px;height:1px;margin:10px auto 0;background:linear-gradient(90deg,transparent,rgba(245,200,66,.4),transparent);}
.splash-swipe-wrap{
  margin-top:200px;
  display:flex;justify-content:center;
  transition:opacity .4s ease, transform .4s ease;
}
.splash-swipe-wrap.hidden{opacity:0;transform:translateY(-6px);pointer-events:none;}

.splash-swipe-track{
  position:relative;
  width:300px;height:60px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(245,200,66,.2);
  border-radius:999px;
  overflow:hidden;
  display:flex;align-items:center;
  animation:swipeBorderPulse 3.6s ease-in-out infinite;
}

@keyframes swipeBorderPulse{
  0%,100%{border-color:rgba(245,200,66,.2);box-shadow:none;}
  50%{border-color:rgba(245,200,66,.5);box-shadow:0 0 14px rgba(245,200,66,.1),inset 0 0 10px rgba(245,200,66,.04);}
}

/* Fill that grows behind thumb */
.splash-swipe-track::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;
  width:var(--swipe-fill,48px);
  background:linear-gradient(90deg,rgba(245,200,66,.18),rgba(245,200,66,.06));
  border-radius:999px;
  transition:width .04s linear;
  pointer-events:none;
}

/* Shimmer light sweep */
.splash-swipe-track::after{
  content:'';
  position:absolute;top:0;bottom:0;
  width:60px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  border-radius:999px;
  pointer-events:none;
  animation:swipeShimmer 2.8s ease-in-out 0.5s 2;
}
@keyframes labelShimmer{0%{background-position:100% center;}100%{background-position:-100% center;}}
  100%{background-position:110% center;}
}
@keyframes swipeShimmer{
  0%{left:-60px;opacity:0;}
  10%{opacity:1;}
  60%{left:calc(100% + 60px);opacity:1;}
  65%,100%{left:calc(100% + 60px);opacity:0;}
}

.splash-swipe-thumb{
  position:absolute;
  left:5px;
  width:42px;height:42px;
  border-radius:50%;
  background:linear-gradient(145deg,#ffe066,#f5c842,#d49a00);
  box-shadow:0 2px 16px rgba(245,200,66,.5), 0 0 0 1px rgba(245,200,66,.4), inset 0 1px 0 rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  color:#1a1200;
  cursor:grab;
  touch-action:none;
  user-select:none;
  z-index:2;
  animation:swipeHint 2.4s ease-in-out 1.4s 3;
}
.splash-swipe-thumb:active{cursor:grabbing;box-shadow:0 2px 22px rgba(245,200,66,.65), 0 0 0 1px rgba(245,200,66,.5);}

@keyframes swipeHint{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(16px);}
  55%{transform:translateX(6px);}
  75%{transform:translateX(10px);}
}

.splash-swipe-chevrons{
  display:flex;align-items:center;gap:0;
  line-height:1;
}
.splash-swipe-chevrons svg:first-child{opacity:.5;}
.splash-swipe-chevrons svg:last-child{opacity:1;}

.splash-swipe-label{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Special Gothic Expanded One',sans-serif;
  font-size:16px;letter-spacing:3.5px;
  pointer-events:none;
  padding-left:52px;
  transition:opacity .25s ease;
  z-index:1;
  background:linear-gradient(90deg,
    rgba(255,255,255,.40) 0%,
    rgba(255,255,255,.40) 45%,
    rgba(255,255,255,.40) 47%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.40) 53%,
    rgba(255,255,255,.40) 55%,
    rgba(255,255,255,.40) 100%
  );
  background-size:600% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:labelShimmer 8s linear 1s infinite;
}
.splash-credit{
  position:absolute;bottom:10px;
  left:0;right:0;text-align:center;
  font-size:10px;
  letter-spacing:2.5px;text-transform:uppercase;
  z-index:3;
  opacity:0;
  transition:opacity .8s ease .7s, transform .5s ease;
  background:linear-gradient(90deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.20) 45%,
    rgba(255,255,255,.20) 47%,
    rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.20) 53%,
    rgba(255,255,255,.20) 55%,
    rgba(255,255,255,.20) 100%
  );
  background-size:600% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:creditShimmer 12s linear 2s infinite;
}
#splash.ready .splash-credit{opacity:1;}
#splash.curtain-open .splash-credit{opacity:0!important;transform:translateY(8px);transition:opacity .4s ease, transform .4s ease;}
@keyframes creditShimmer{0%{background-position:100% center;}100%{background-position:-100% center;}}
  100%{background-position:110% center;}
}




/* ── Flash projecteur à l'ouverture du rideau ── */
#splash-flash{ display:none; }



/* ── Shimmer rideau adapté au thème ── */

/* ── Citation ciné à l'ouverture du rideau ── */
/* ── Zone logo SVG film — centre écran ── */
/* ── Wrapper flex : citation + logo film ── */
#splash-content-wrap{
  position:absolute;
  top:50%;left:0;right:0;
  transform:translateY(calc(-50% + 14px));
  display:flex;flex-direction:column;align-items:center;
  gap:24px;
  z-index:7;pointer-events:none;
  opacity:0;
  transition:opacity 0.65s ease 0.20s, transform 0.65s cubic-bezier(.22,1,.36,1) 0.20s;
}
#splash-content-wrap.reveal{
  opacity:1;
  transform:translateY(-50%);
}
/* Citation — dans le flux */
#splash-quote{
  position:static;
  width:100%;
  padding:0 36px;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.55s ease 0.35s, transform 0.55s ease 0.35s;
}
#splash-quote.reveal{
  opacity:1 !important;
  transform:translateY(0) !important;
}
/* Logo film — dans le flux, juste sous la citation */
#splash-film-logo{
  width:56%;max-width:210px;
  pointer-events:none;
  opacity:0;
  transform:translateY(8px) scale(0.95);
  transition:opacity 0.55s ease 0.55s, transform 0.55s cubic-bezier(.22,1,.36,1) 0.55s;
}
#splash-film-logo.reveal{
  opacity:1;
  transform:translateY(0) scale(1);
}
#splash-film-logo svg,
#splash-film-logo img{
  width:100%;height:auto;
  display:block;
  mix-blend-mode:screen;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,0.30));
  background:transparent;
}
/* splash-quote.reveal géré dans la règle #splash-quote ci-dessus */
#splash-quote-text{
  font-family:'DM Sans',sans-serif;
  font-size:16px;
  font-style:italic;
  font-weight:300;
  color:rgba(255,255,255,.92);
  line-height:1.60;
  letter-spacing:.2px;
  text-shadow:0 2px 20px rgba(0,0,0,.95), 0 1px 6px rgba(0,0,0,.80);
  text-align:center;
  margin-bottom:0;
}
#splash-film-ref-inline{
  display:none; /* masqué ici, affiché via #splash-film-ref-bottom */
}
@keyframes splash-ref-shimmer{
  0%  {background-position:100% center;}
  100%{background-position:-100% center;}
}
#splash-film-ref-bottom{
  position:absolute!important;
  bottom:2px!important;
  top:auto!important;
  left:0;right:0;
  padding:0 10px 2px;
  font-size:9px;letter-spacing:3px;text-transform:uppercase;
  font-family:'DM Sans',sans-serif;
  color:rgba(255,255,255,0.38);
  text-align:center;
  z-index:8;
  pointer-events:none;
  opacity:0;
  text-shadow:0 1px 8px rgba(0,0,0,.90), 0 2px 20px rgba(0,0,0,.70);
  transition:opacity 0.9s ease 0s;
}
#splash-film-ref-bottom.reveal{
  opacity:1;
  background:linear-gradient(90deg,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.28) 44%,
    rgba(255,255,255,.90) 50%,
    rgba(255,255,255,.28) 56%,
    rgba(255,255,255,.28) 100%
  );
  background-size:500% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  animation:splash-ref-shimmer 8s linear 0.5s infinite;
  will-change:background-position;
}
.splash-quote-inner{
  display:block;
  text-align:center;
}
#splash-quote-attr{display:none;}




/* ── Orbes adaptées au thème à l'ouverture du rideau ── */
body.theme-neon #splash-bg-anim::before{background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(180,80,255,.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(80,20,200,.8) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(220,100,255,.7) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(100,0,220,.6) 0%, transparent 50%);}
body.theme-neon #splash-bg-anim::after{background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(100,0,220,.3) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(80,20,200,.25) 0%, transparent 52%);}
body.theme-crimson #splash-bg-anim::before{background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(255,30,60,.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(180,0,30,.8) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(255,80,100,.7) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(200,20,50,.6) 0%, transparent 50%);}
body.theme-crimson #splash-bg-anim::after{background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(200,20,50,.3) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(180,0,30,.25) 0%, transparent 52%);}
body.theme-ocean #splash-bg-anim::before{background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(0,180,255,.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(0,80,200,.8) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(0,220,255,.7) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(20,100,210,.6) 0%, transparent 50%);}
body.theme-ocean #splash-bg-anim::after{background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(20,100,210,.3) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(0,80,200,.25) 0%, transparent 52%);}
body.theme-sunset #splash-bg-anim::before{background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(255,120,20,.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(220,60,0,.8) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(255,180,40,.7) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(200,80,10,.6) 0%, transparent 50%);}
body.theme-sunset #splash-bg-anim::after{background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(200,80,10,.3) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(220,60,0,.25) 0%, transparent 52%);}
body.theme-ice #splash-bg-anim::before{background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(180,220,255,.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(80,160,255,.8) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(220,240,255,.7) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(100,180,255,.6) 0%, transparent 50%);}
body.theme-ice #splash-bg-anim::after{background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(100,180,255,.3) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(80,160,255,.25) 0%, transparent 52%);}
body.theme-aurora #splash-bg-anim::before{background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(60,220,100,.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(180,80,255,.8) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(20,200,120,.7) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(140,60,220,.6) 0%, transparent 50%);}
body.theme-aurora #splash-bg-anim::after{background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(140,60,220,.3) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(180,80,255,.25) 0%, transparent 52%);}
body.theme-galaxy #splash-bg-anim::before{background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(140,100,255,.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(80,40,200,.8) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(180,140,255,.7) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(60,20,180,.6) 0%, transparent 50%);}
body.theme-galaxy #splash-bg-anim::after{background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(60,20,180,.3) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(80,40,200,.25) 0%, transparent 52%);}
body.theme-emerald #splash-bg-anim::before{background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(10,220,100,.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(0,160,80,.8) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(60,255,140,.7) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(0,180,100,.6) 0%, transparent 50%);}
body.theme-emerald #splash-bg-anim::after{background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(0,180,100,.3) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(0,160,80,.25) 0%, transparent 52%);}
body.theme-inferno #splash-bg-anim::before{background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(255,200,0,.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(255,100,0,.8) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(255,240,80,.7) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(220,140,0,.6) 0%, transparent 50%);}
body.theme-inferno #splash-bg-anim::after{background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(220,140,0,.3) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(255,100,0,.25) 0%, transparent 52%);}
body.theme-matrix #splash-bg-anim::before{background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(100,255,0,.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(0,200,20,.8) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(160,255,60,.7) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(0,180,0,.6) 0%, transparent 50%);}
body.theme-matrix #splash-bg-anim::after{background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(0,180,0,.3) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(0,200,20,.25) 0%, transparent 52%);}
body.theme-rose #splash-bg-anim::before{background:
    radial-gradient(ellipse 65% 55% at 38% 25%, rgba(255,140,200,.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 68% 65%, rgba(220,80,160,.8) 0%, transparent 55%),
    radial-gradient(ellipse 50% 42% at 22% 70%, rgba(255,180,220,.7) 0%, transparent 54%),
    radial-gradient(ellipse 45% 35% at 72% 18%, rgba(200,60,140,.6) 0%, transparent 50%);}
body.theme-rose #splash-bg-anim::after{background:
    radial-gradient(ellipse 40% 32% at 58% 42%, rgba(200,60,140,.3) 0%, transparent 50%),
    radial-gradient(ellipse 46% 37% at 28% 52%, rgba(220,80,160,.25) 0%, transparent 52%);}

/* -- TRANSITIONS QUESTIONS -- */
@keyframes slideInRight{from{opacity:0;transform:translateX(38px) scale(.97);}to{opacity:1;transform:translateX(0) scale(1);}}
@keyframes slideOutLeft{from{opacity:1;transform:translateX(0) scale(1);}to{opacity:0;transform:translateX(-38px) scale(.97);}}
@keyframes fadeScaleIn{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);}}
@keyframes vsCountPop{0%{opacity:0;transform:scale(1.6);}60%{opacity:1;transform:scale(.92);}100%{opacity:1;transform:scale(1);}}

@keyframes slideInUp{from{opacity:0;transform:translateY(22px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.qa.q-exit{animation:slideOutLeft .2s cubic-bezier(.4,0,1,.6) both;}
.qa.q-enter{animation:slideInRight .28s cubic-bezier(.22,.68,0,1.2) both;}
.agrid.q-exit{animation:slideOutLeft .2s cubic-bezier(.4,0,1,.6) both;}
.agrid.q-enter{animation:slideInUp .3s cubic-bezier(.34,1.4,.64,1) .04s both;}

/* -- COMBO VISUEL -- */
#combo-banner{
  position:absolute;
  top:calc(max(14px,env(safe-area-inset-top,14px)) + 8px);
  left:50%;
  transform:translateX(-50%) translateX(120%);
  z-index:200;pointer-events:none;
  opacity:0;
  will-change:transform,opacity;
  background:linear-gradient(135deg,rgba(245,200,66,.15),rgba(245,200,66,.06));
  border:1.5px solid rgba(245,200,66,.4);
  border-radius:14px;
  padding:5px 12px 5px 10px;
  backdrop-filter:blur(12px);
  box-shadow:0 2px 16px rgba(0,0,0,.4),0 0 12px rgba(245,200,66,.12);
  display:flex;align-items:center;gap:7px;
  white-space:nowrap;
}
#combo-banner.show{
  animation:comboSlideIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes comboSlideIn{
  0%{opacity:0;transform:translateX(calc(-50% + 120vw));}
  70%{opacity:1;transform:translateX(calc(-50% - 4px));}
  100%{opacity:1;transform:translateX(-50%);}
}
#combo-banner.hide{animation:comboSlideOut .3s ease both;}
@keyframes comboSlideOut{to{opacity:0;transform:translateX(calc(-50% + 120vw));}}
.combo-fire{font-size:14px;display:block;}
.combo-label{
  font-family:'Special Gothic Expanded One',sans-serif;
  font-size:15px;letter-spacing:1.5px;line-height:1;
  color:#f5c842;
}
/* Couleurs par niveau de combo */
.combo-label.lv3{color:#f5c842;}
.combo-label.lv4{color:#ff8c42;}
.combo-label.lv5{color:#ff4d6d;}
.combo-label.lv6{color:#da77f2;}
.combo-label.lv7{color:#22d3ee;}
.combo-label.lv8{color:#6ee7b7;}
.combo-sub{display:none;}

/* ─── RÉSULTATS ─── */
/* ── ÉCRAN RÉSULTAT ── */
#result{overflow:hidden;}
.r-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 55% at 50% 0%,var(--r-color,rgba(245,200,66,.22)) 0%,transparent 65%);
  opacity:.85;
}
.r-scroll{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:max(44px,calc(env(safe-area-inset-top) + 16px)) 18px max(40px,env(safe-area-inset-bottom));
  box-sizing:border-box;
}
.r-hero{text-align:center;margin-bottom:4px;}
.ricon{
  display:flex;align-items:center;justify-content:center;
  width:80px;height:80px;border-radius:22px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  margin:0 auto 10px;
  animation:rIconPop .65s cubic-bezier(.34,1.56,.64,1) .05s both;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.ricon svg{width:44px;height:44px;color:var(--gold);}
.rtit{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:40px;letter-spacing:4px;
  background:linear-gradient(135deg,#fff9e0,#f5c842,#e8a800);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:fadeScaleIn .4s ease .2s both;
}
.rsub{font-size:13px;color:rgba(255,255,255,.5);margin-top:4px;animation:fadeScaleIn .4s ease .3s both;}
.r-mode-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:5px 14px;font-size:11px;
  color:rgba(255,255,255,.6);letter-spacing:1px;
  margin-top:10px;animation:fadeScaleIn .4s ease .15s both;
}
/* Bloc score */
.r-score-block{
  text-align:center;margin:14px 0 18px;width:100%;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:20px;padding:16px 0 14px;
}
.rscore{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:88px;line-height:1;
  color:var(--gold);letter-spacing:2px;
  text-shadow:0 0 60px rgba(245,200,66,.5),0 4px 20px rgba(0,0,0,.4);
  will-change:transform,opacity;
}
@keyframes scoreReveal{
  0%{opacity:0;transform:translateY(20px) scale(.65);}
  60%{opacity:1;transform:translateY(-4px) scale(1.06);}
  80%{transform:translateY(2px) scale(.97);}
  100%{transform:translateY(0) scale(1);}
}
.rscl{font-size:10px;color:rgba(255,255,255,.3);letter-spacing:4px;text-transform:uppercase;margin-top:-4px;}
.r-new-best{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(245,200,66,.12);border:1px solid rgba(245,200,66,.4);
  border-radius:12px;padding:7px 16px;margin-top:10px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:15px;letter-spacing:1.5px;color:var(--gold);
  animation:fadeScaleIn .5s cubic-bezier(.34,1.56,.64,1) .2s both;
}
/* Stats */
.rstats{display:flex;gap:8px;width:100%;margin-bottom:12px;animation:fadeScaleIn .4s ease .45s both;}
.rst{
  flex:1;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:14px 6px;text-align:center;
  position:relative;overflow:hidden;
}
.rst::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.25;}
.rstv{font-family:'Special Gothic Expanded One',sans-serif;font-size:26px;color:var(--gold);line-height:1.1;}
.rstl{font-size:9px;color:rgba(255,255,255,.35);letter-spacing:1px;text-transform:uppercase;margin-top:4px;}
/* Chart */
.r-chart{
  width:100%;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;
  padding:14px 12px;margin-bottom:10px;
}
.r-chart-title{font-size:9px;color:rgba(255,255,255,.28);letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;}
.r-bars{display:flex;gap:4px;align-items:flex-end;height:56px;}
.r-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.r-bar{width:100%;border-radius:4px 4px 0 0;transition:height .7s cubic-bezier(.34,1.56,.64,1);}
.r-bar.ok{background:linear-gradient(to top,rgba(46,204,113,.3),rgba(46,204,113,.85));box-shadow:0 0 6px rgba(46,204,113,.2);}
.r-bar.no{background:linear-gradient(to top,rgba(232,52,74,.2),rgba(232,52,74,.7));}
.r-bar.empty{background:rgba(255,255,255,.05);}
.r-bar-n{font-size:7px;color:rgba(255,255,255,.22);}
/* Questions ratées */
.r-missed{
  width:100%;background:rgba(232,52,74,.05);
  border:1px solid rgba(232,52,74,.15);border-radius:16px;
  padding:14px;margin-bottom:10px;
  animation:fadeScaleIn .4s ease .55s both;
}
.r-missed-title{font-size:10px;color:rgba(232,52,74,.7);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;}
.r-missed-item{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:10px 12px;margin-bottom:6px;
}
.r-missed-item:last-child{margin-bottom:0;}
.r-missed-q{font-size:12px;color:rgba(255,255,255,.65);line-height:1.45;margin-bottom:4px;}
.r-missed-ans{font-size:11px;color:rgba(46,204,113,.75);font-weight:600;}
/* XP block amélioré */
.r-xp-block{
  width:100%;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);border-radius:16px;
  padding:14px 16px;margin-bottom:10px;
  animation:fadeScaleIn .4s ease .6s both;
}
.r-xp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.r-xp-label{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.5px;}
.r-xp-val{font-family:'Special Gothic Expanded One',sans-serif;font-size:24px;color:var(--gold);}
.r-xp-track{background:rgba(255,255,255,.07);border-radius:6px;height:8px;overflow:hidden;margin-bottom:6px;}
.r-xp-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold2),var(--gold),#ffe98a);width:0%;transition:width 1.4s cubic-bezier(.34,1.56,.64,1);}
.r-xp-foot{display:flex;justify-content:space-between;}
.r-lvl-up-badge{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  background:linear-gradient(135deg,rgba(245,200,66,.15),rgba(245,200,66,.06));
  border:1px solid rgba(245,200,66,.35);border-radius:10px;padding:8px 12px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:14px;letter-spacing:1.5px;color:var(--gold);
  animation:fadeScaleIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
/* Streak */
.r-streak-tip{
  font-size:11px;color:rgba(255,255,255,.35);text-align:center;
  letter-spacing:.3px;margin-bottom:12px;animation:fadeScaleIn .4s ease .9s both;
  width:100%;
}
/* Boutons */
.rbtns{display:flex;gap:8px;width:100%;margin-bottom:8px;animation:fadeScaleIn .4s ease .7s both;}
.rbp{
  flex:2;background:linear-gradient(100deg,#f5c842,#ffe566 50%,#e8a800);
  color:#000;border:none;border-radius:16px;padding:16px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;letter-spacing:3px;
  cursor:pointer;transition:transform .15s,box-shadow .15s;
  box-shadow:0 4px 20px rgba(245,200,66,.35);
  position:relative;overflow:hidden;
}
.rbp::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:btnglare 3s ease 1s infinite;}
.rbp:active{transform:scale(.97);}
.rbs{
  flex:1;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.65);border-radius:16px;padding:16px;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .18s;
}
.rbs:active{transform:scale(.97);}
.r-share-btn{
  width:100%;
  background:linear-gradient(135deg,rgba(245,200,66,.12),rgba(245,200,66,.06));
  border:1px solid rgba(245,200,66,.3);
  border-radius:16px;padding:14px;color:rgba(245,200,66,.9);
  font-family:'Special Gothic Expanded One',sans-serif;font-size:16px;letter-spacing:2px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:all .2s;animation:fadeScaleIn .4s ease .8s both;
  box-shadow:0 4px 20px rgba(245,200,66,.1);
}
.r-share-btn:active{background:rgba(245,200,66,.18);transform:scale(.98);}



/* -- STATS AVANC-ES PROFIL -- */
.mode-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px;}
.ms-card{
  background:rgba(255,255,255,.06);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.09);border-radius:13px;
  padding:10px 12px;
}
.ms-mode{font-size:9px;color:rgba(255,255,255,.35);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;}
.ms-val{font-family:'Special Gothic Expanded One',sans-serif;font-size:22px;color:var(--gold);line-height:1;}
.ms-label{font-size:9px;color:rgba(255,255,255,.4);margin-top:2px;}
.ms-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.08);margin-top:6px;overflow:hidden;}
.ms-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .8s ease;}

/* -- TH-MES VISUELS -- */
/* Dor- */
/* ═══════════════════════════════
   THÈMES VISUELS — v60 polish
═══════════════════════════════ */

/* ════════════════════════════════════════
   THÈMES — 8 univers visuels distincts
════════════════════════════════════════ */

/* ─── Cinéma (défaut) ─── */
body:not([class*="theme"]) .xpw,
body.theme- .xpw{border-color:rgba(245,200,66,.18);}

/* ─── Néon — Cyberpunk violet/cyan ─── */
body.theme-neon{
  --bg:#02000a;--sf:#0a0022;--sf2:#12003a;
  --gold:#c466ff;--gold2:#8b00ff;--green:#00ff88;--red:#ff3c6e;--blue:#00e5ff;
  --tx:#f0e8ff;--mt:#7b6a99;--bd:rgba(196,102,255,.18);
}
body.theme-neon .xpw{border-color:rgba(185,79,255,.4);background:linear-gradient(135deg,rgba(14,0,38,.96),rgba(6,0,20,.9));}
body.theme-neon .logo{background:linear-gradient(180deg,#ffaaee 0%,#ee00cc 25%,#c466ff 55%,#8800dd 80%,#00e5ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-neon .topbar,.theme-neon .scr>.topbar{}
body.theme-neon .mc{border-color:rgba(196,102,255,.14);}
body.theme-neon .mc.sel{box-shadow:0 0 28px rgba(196,102,255,.55),0 0 60px rgba(196,102,255,.12);border-color:rgba(196,102,255,.5);}
body.theme-neon .pbtn{background:linear-gradient(150deg,#df88ff,#c466ff 40%,#8b00ff 100%);box-shadow:0 8px 32px rgba(196,102,255,.55);}
body.theme-neon .xpbf{background:linear-gradient(90deg,#c466ff,#00e5ff);}
body.theme-neon #home-bg::before{background:
  radial-gradient(ellipse 60% 50% at 25% 25%,rgba(150,0,255,.50) 0%,transparent 55%),
  radial-gradient(ellipse 50% 42% at 78% 60%,rgba(0,200,255,.35) 0%,transparent 55%),
  radial-gradient(ellipse 40% 35% at 50% 85%,rgba(255,0,180,.28) 0%,transparent 52%);}
body.theme-neon .anecdote-card,.theme-neon .dmc-card{box-shadow:0 0 0 1px rgba(196,102,255,.12) inset;}

/* ── Adaptation Hero Card shimmer + fond + Anecdote par thème ── */

/* Néon */
body.theme-neon .xpw::before{background:conic-gradient(from var(--xpw-angle,0deg),rgba(196,102,255,0) 0%,rgba(196,102,255,.04) 10%,rgba(196,102,255,.14) 24%,rgba(220,160,255,.45) 36%,rgba(240,200,255,.85) 46%,rgba(245,220,255,1) 50%,rgba(240,200,255,.85) 54%,rgba(196,102,255,.14) 64%,rgba(196,102,255,.04) 76%,rgba(196,102,255,0) 84%,rgba(196,102,255,0) 100%);}
body.theme-neon .xpw::after{background:linear-gradient(135deg,#0a0020,#060012);}
body.theme-neon .anecdote-card{background:linear-gradient(150deg,rgba(14,0,38,.95),rgba(6,0,20,.9));border-color:rgba(196,102,255,.2);}
body.theme-neon .anecdote-card::before{background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(196,102,255,.07) 0%,transparent 65%);}
body.theme-neon .phero-bg{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(196,102,255,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 100% 100%,rgba(150,0,255,.05) 0%,transparent 55%);}
body.theme-neon .phero-av-ring{background:linear-gradient(135deg,rgba(196,102,255,.6),rgba(100,0,200,.3),rgba(196,102,255,.6));}
body.theme-neon .phero-level{background:rgba(196,102,255,.1);border-color:rgba(196,102,255,.2);}

/* Crimson */
body.theme-crimson .xpw::before{background:conic-gradient(from var(--xpw-angle,0deg),rgba(255,58,92,0) 0%,rgba(255,58,92,.04) 10%,rgba(255,58,92,.14) 24%,rgba(255,140,160,.45) 36%,rgba(255,200,210,.85) 46%,rgba(255,220,225,1) 50%,rgba(255,200,210,.85) 54%,rgba(255,58,92,.14) 64%,rgba(255,58,92,.04) 76%,rgba(255,58,92,0) 84%,rgba(255,58,92,0) 100%);}
body.theme-crimson .xpw::after{background:linear-gradient(135deg,#1a0008,#0e0004);}
body.theme-crimson .anecdote-card{background:linear-gradient(150deg,rgba(26,0,10,.95),rgba(14,0,5,.9));border-color:rgba(255,58,92,.2);}
body.theme-crimson .anecdote-card::before{background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(255,58,92,.07) 0%,transparent 65%);}
body.theme-crimson .phero-bg{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,58,92,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 100% 100%,rgba(200,0,40,.05) 0%,transparent 55%);}
body.theme-crimson .phero-av-ring{background:linear-gradient(135deg,rgba(255,58,92,.6),rgba(160,0,30,.3),rgba(255,58,92,.6));}
body.theme-crimson .phero-level{background:rgba(255,58,92,.1);border-color:rgba(255,58,92,.2);}

/* Océan */
body.theme-ocean .xpw::before{background:conic-gradient(from var(--xpw-angle,0deg),rgba(0,212,255,0) 0%,rgba(0,212,255,.04) 10%,rgba(0,212,255,.14) 24%,rgba(120,235,255,.45) 36%,rgba(200,248,255,.85) 46%,rgba(220,252,255,1) 50%,rgba(200,248,255,.85) 54%,rgba(0,212,255,.14) 64%,rgba(0,212,255,.04) 76%,rgba(0,212,255,0) 84%,rgba(0,212,255,0) 100%);}
body.theme-ocean .xpw::after{background:linear-gradient(135deg,#001828,#000e14);}
body.theme-ocean .anecdote-card{background:linear-gradient(150deg,rgba(0,20,36,.95),rgba(0,10,18,.9));border-color:rgba(0,212,255,.2);}
body.theme-ocean .anecdote-card::before{background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(0,212,255,.07) 0%,transparent 65%);}
body.theme-ocean .phero-bg{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(0,212,255,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 100% 100%,rgba(0,150,200,.05) 0%,transparent 55%);}
body.theme-ocean .phero-av-ring{background:linear-gradient(135deg,rgba(0,212,255,.6),rgba(0,100,180,.3),rgba(0,212,255,.6));}
body.theme-ocean .phero-level{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.2);}

/* Sunset */
body.theme-sunset .xpw::before{background:conic-gradient(from var(--xpw-angle,0deg),rgba(255,140,56,0) 0%,rgba(255,140,56,.04) 10%,rgba(255,140,56,.14) 24%,rgba(255,200,120,.45) 36%,rgba(255,230,180,.85) 46%,rgba(255,245,220,1) 50%,rgba(255,230,180,.85) 54%,rgba(255,140,56,.14) 64%,rgba(255,140,56,.04) 76%,rgba(255,140,56,0) 84%,rgba(255,140,56,0) 100%);}
body.theme-sunset .xpw::after{background:linear-gradient(135deg,#1e0800,#100400);}
body.theme-sunset .anecdote-card{background:linear-gradient(150deg,rgba(30,8,0,.95),rgba(16,4,0,.9));border-color:rgba(255,140,56,.2);}
body.theme-sunset .anecdote-card::before{background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(255,140,56,.07) 0%,transparent 65%);}
body.theme-sunset .phero-bg{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,140,56,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 100% 100%,rgba(220,80,0,.05) 0%,transparent 55%);}
body.theme-sunset .phero-av-ring{background:linear-gradient(135deg,rgba(255,140,56,.6),rgba(200,60,0,.3),rgba(255,140,56,.6));}
body.theme-sunset .phero-level{background:rgba(255,140,56,.1);border-color:rgba(255,140,56,.2);}

/* Glace */
body.theme-ice .xpw::before{background:conic-gradient(from var(--xpw-angle,0deg),rgba(142,216,248,0) 0%,rgba(142,216,248,.04) 10%,rgba(142,216,248,.14) 24%,rgba(200,240,255,.45) 36%,rgba(230,250,255,.85) 46%,rgba(245,253,255,1) 50%,rgba(230,250,255,.85) 54%,rgba(142,216,248,.14) 64%,rgba(142,216,248,.04) 76%,rgba(142,216,248,0) 84%,rgba(142,216,248,0) 100%);}
body.theme-ice .xpw::after{background:linear-gradient(135deg,#020e1e,#00060e);}
body.theme-ice .anecdote-card{background:linear-gradient(150deg,rgba(2,14,28,.95),rgba(0,6,14,.9));border-color:rgba(142,216,248,.2);}
body.theme-ice .anecdote-card::before{background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(142,216,248,.07) 0%,transparent 65%);}
body.theme-ice .phero-bg{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(142,216,248,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 100% 100%,rgba(60,160,220,.05) 0%,transparent 55%);}
body.theme-ice .phero-av-ring{background:linear-gradient(135deg,rgba(142,216,248,.6),rgba(50,130,200,.3),rgba(142,216,248,.6));}
body.theme-ice .phero-level{background:rgba(142,216,248,.1);border-color:rgba(142,216,248,.2);}

/* Aurora */
body.theme-aurora .xpw::before{background:conic-gradient(from var(--xpw-angle,0deg),rgba(192,132,252,0) 0%,rgba(192,132,252,.04) 10%,rgba(192,132,252,.14) 24%,rgba(224,180,255,.45) 36%,rgba(240,215,255,.85) 46%,rgba(248,235,255,1) 50%,rgba(240,215,255,.85) 54%,rgba(192,132,252,.14) 64%,rgba(192,132,252,.04) 76%,rgba(192,132,252,0) 84%,rgba(192,132,252,0) 100%);}
body.theme-aurora .xpw::after{background:linear-gradient(135deg,#0a0022,#04001a);}
body.theme-aurora .anecdote-card{background:linear-gradient(150deg,rgba(10,0,34,.95),rgba(4,0,18,.9));border-color:rgba(192,132,252,.2);}
body.theme-aurora .anecdote-card::before{background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(192,132,252,.07) 0%,transparent 65%);}
body.theme-aurora .phero-bg{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(192,132,252,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 100% 100%,rgba(140,0,220,.05) 0%,transparent 55%);}
body.theme-aurora .phero-av-ring{background:linear-gradient(135deg,rgba(192,132,252,.6),rgba(100,0,200,.3),rgba(192,132,252,.6));}
body.theme-aurora .phero-level{background:rgba(192,132,252,.1);border-color:rgba(192,132,252,.2);}

/* Galaxie */
body.theme-galaxy .xpw::before{background:conic-gradient(from var(--xpw-angle,0deg),rgba(167,139,250,0) 0%,rgba(167,139,250,.04) 10%,rgba(167,139,250,.14) 24%,rgba(200,185,255,.45) 36%,rgba(225,218,255,.85) 46%,rgba(238,232,255,1) 50%,rgba(225,218,255,.85) 54%,rgba(167,139,250,.14) 64%,rgba(167,139,250,.04) 76%,rgba(167,139,250,0) 84%,rgba(167,139,250,0) 100%);}
body.theme-galaxy .xpw::after{background:linear-gradient(135deg,#0c0028,#04001a);}
body.theme-galaxy .anecdote-card{background:linear-gradient(150deg,rgba(12,0,40,.95),rgba(4,0,18,.9));border-color:rgba(167,139,250,.2);}
body.theme-galaxy .anecdote-card::before{background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(167,139,250,.07) 0%,transparent 65%);}
body.theme-galaxy .phero-bg{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(167,139,250,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 100% 100%,rgba(100,60,200,.05) 0%,transparent 55%);}
body.theme-galaxy .phero-av-ring{background:linear-gradient(135deg,rgba(167,139,250,.6),rgba(90,40,180,.3),rgba(167,139,250,.6));}
body.theme-galaxy .phero-level{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.2);}

/* Émeraude */
body.theme-emerald .xpw::before{background:conic-gradient(from var(--xpw-angle,0deg),rgba(16,240,124,0) 0%,rgba(16,240,124,.04) 10%,rgba(16,240,124,.14) 24%,rgba(120,255,190,.45) 36%,rgba(180,255,220,.85) 46%,rgba(210,255,235,1) 50%,rgba(180,255,220,.85) 54%,rgba(16,240,124,.14) 64%,rgba(16,240,124,.04) 76%,rgba(16,240,124,0) 84%,rgba(16,240,124,0) 100%);}
body.theme-emerald .xpw::after{background:linear-gradient(135deg,#001608,#000a04);}
body.theme-emerald .anecdote-card{background:linear-gradient(150deg,rgba(0,22,10,.95),rgba(0,10,5,.9));border-color:rgba(16,240,124,.2);}
body.theme-emerald .anecdote-card::before{background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(16,240,124,.07) 0%,transparent 65%);}
body.theme-emerald .phero-bg{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(16,240,124,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 100% 100%,rgba(0,180,80,.05) 0%,transparent 55%);}
body.theme-emerald .phero-av-ring{background:linear-gradient(135deg,rgba(16,240,124,.6),rgba(0,140,60,.3),rgba(16,240,124,.6));}
body.theme-emerald .phero-level{background:rgba(16,240,124,.1);border-color:rgba(16,240,124,.2);}

/* Inferno */
body.theme-inferno .xpw::before{background:conic-gradient(from var(--xpw-angle,0deg),rgba(255,149,0,0) 0%,rgba(255,149,0,.04) 10%,rgba(255,149,0,.14) 24%,rgba(255,210,80,.45) 36%,rgba(255,235,160,.85) 46%,rgba(255,248,210,1) 50%,rgba(255,235,160,.85) 54%,rgba(255,149,0,.14) 64%,rgba(255,149,0,.04) 76%,rgba(255,149,0,0) 84%,rgba(255,149,0,0) 100%);}
body.theme-inferno .xpw::after{background:linear-gradient(135deg,#220600,#120300);}
body.theme-inferno .anecdote-card{background:linear-gradient(150deg,rgba(34,8,0,.95),rgba(18,4,0,.9));border-color:rgba(255,149,0,.2);}
body.theme-inferno .anecdote-card::before{background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(255,149,0,.07) 0%,transparent 65%);}
body.theme-inferno .phero-bg{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,149,0,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 100% 100%,rgba(200,80,0,.05) 0%,transparent 55%);}
body.theme-inferno .phero-av-ring{background:linear-gradient(135deg,rgba(255,149,0,.6),rgba(180,50,0,.3),rgba(255,149,0,.6));}
body.theme-inferno .phero-level{background:rgba(255,149,0,.1);border-color:rgba(255,149,0,.2);}

/* Matrix */
body.theme-matrix .xpw::before{background:conic-gradient(from var(--xpw-angle,0deg),rgba(0,255,65,0) 0%,rgba(0,255,65,.04) 10%,rgba(0,255,65,.14) 24%,rgba(120,255,140,.45) 36%,rgba(180,255,195,.85) 46%,rgba(210,255,220,1) 50%,rgba(180,255,195,.85) 54%,rgba(0,255,65,.14) 64%,rgba(0,255,65,.04) 76%,rgba(0,255,65,0) 84%,rgba(0,255,65,0) 100%);}
body.theme-matrix .xpw::after{background:linear-gradient(135deg,#001400,#000800);}
body.theme-matrix .anecdote-card{background:linear-gradient(150deg,rgba(0,20,0,.95),rgba(0,8,0,.9));border-color:rgba(0,255,65,.2);}
body.theme-matrix .anecdote-card::before{background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(0,255,65,.07) 0%,transparent 65%);}
body.theme-matrix .phero-bg{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(0,255,65,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 100% 100%,rgba(0,180,40,.05) 0%,transparent 55%);}
body.theme-matrix .phero-av-ring{background:linear-gradient(135deg,rgba(0,255,65,.6),rgba(0,140,30,.3),rgba(0,255,65,.6));}
body.theme-matrix .phero-level{background:rgba(0,255,65,.1);border-color:rgba(0,255,65,.2);}

/* Rose */
body.theme-rose .xpw::before{background:conic-gradient(from var(--xpw-angle,0deg),rgba(255,110,180,0) 0%,rgba(255,110,180,.04) 10%,rgba(255,110,180,.14) 24%,rgba(255,185,225,.45) 36%,rgba(255,220,240,.85) 46%,rgba(255,235,248,1) 50%,rgba(255,220,240,.85) 54%,rgba(255,110,180,.14) 64%,rgba(255,110,180,.04) 76%,rgba(255,110,180,0) 84%,rgba(255,110,180,0) 100%);}
body.theme-rose .xpw::after{background:linear-gradient(135deg,#1a0014,#0e0008);}
body.theme-rose .anecdote-card{background:linear-gradient(150deg,rgba(26,0,20,.95),rgba(14,0,10,.9));border-color:rgba(255,110,180,.2);}
body.theme-rose .anecdote-card::before{background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(255,110,180,.07) 0%,transparent 65%);}
body.theme-rose .phero-bg{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,110,180,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 100% 100%,rgba(200,0,120,.05) 0%,transparent 55%);}
body.theme-rose .phero-av-ring{background:linear-gradient(135deg,rgba(255,110,180,.6),rgba(180,0,100,.3),rgba(255,110,180,.6));}
body.theme-rose .phero-level{background:rgba(255,110,180,.1);border-color:rgba(255,110,180,.2);}


/* ─── Crimson — Sang & drame ─── */
body.theme-crimson{
  --bg:#080002;--sf:#180008;--sf2:#220012;
  --gold:#ff3a5c;--gold2:#c0002a;--green:#ff8fab;--red:#ff1a40;--blue:#ff6b9d;
  --tx:#ffe8ee;--mt:#8a4055;--bd:rgba(255,58,92,.18);
}
body.theme-crimson .xpw{border-color:rgba(255,58,92,.38);background:linear-gradient(135deg,rgba(26,0,10,.97),rgba(14,0,5,.9));}
body.theme-crimson .logo{background:linear-gradient(180deg,#ffccd8 0%,#ff6685 22%,#ff1a44 50%,#aa0022 78%,#ff5570 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-crimson .mc{border-color:rgba(255,58,92,.14);}
body.theme-crimson .mc.sel{box-shadow:0 0 28px rgba(255,58,92,.55),0 0 60px rgba(255,58,92,.12);border-color:rgba(255,58,92,.55);}
body.theme-crimson .pbtn{background:linear-gradient(150deg,#ff6b8a,#ff3a5c 40%,#c0002a 100%);box-shadow:0 8px 32px rgba(255,58,92,.5);}
body.theme-crimson .xpbf{background:linear-gradient(90deg,#ff6b8a,#ff3a5c);}
body.theme-crimson #home-bg::before{background:
  radial-gradient(ellipse 60% 50% at 30% 22%,rgba(220,0,45,.55) 0%,transparent 55%),
  radial-gradient(ellipse 50% 42% at 72% 65%,rgba(160,0,35,.35) 0%,transparent 55%),
  radial-gradient(ellipse 40% 35% at 15% 78%,rgba(100,0,20,.28) 0%,transparent 52%);}

/* ─── Océan — Abysses bioluminescents ─── */
body.theme-ocean{
  --bg:#000810;--sf:#001828;--sf2:#002438;
  --gold:#00d4ff;--gold2:#0098cc;--green:#00ffb8;--red:#ff4569;--blue:#7b9fff;
  --tx:#e0f4ff;--mt:#3a6880;--bd:rgba(0,212,255,.15);
}
body.theme-ocean .xpw{border-color:rgba(0,212,255,.32);background:linear-gradient(135deg,rgba(0,20,36,.97),rgba(0,10,18,.9));}
body.theme-ocean .logo{background:linear-gradient(180deg,#ccf8ff 0%,#55eeff 22%,#00c8f0 50%,#0070aa 78%,#44ddff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-ocean .mc{border-color:rgba(0,212,255,.13);}
body.theme-ocean .mc.sel{box-shadow:0 0 28px rgba(0,212,255,.45),0 0 60px rgba(0,212,255,.10);border-color:rgba(0,212,255,.50);}
body.theme-ocean .pbtn{background:linear-gradient(150deg,#40e4ff,#00d4ff 40%,#0098cc 100%);color:#001a28;box-shadow:0 8px 32px rgba(0,212,255,.45);}
body.theme-ocean .xpbf{background:linear-gradient(90deg,#00ffb8,#00d4ff);}
body.theme-ocean #home-bg::before{background:
  radial-gradient(ellipse 60% 50% at 28% 30%,rgba(0,100,200,.48) 0%,transparent 55%),
  radial-gradient(ellipse 50% 42% at 74% 58%,rgba(0,200,240,.32) 0%,transparent 55%),
  radial-gradient(ellipse 40% 35% at 50% 82%,rgba(0,60,140,.24) 0%,transparent 52%);}

/* ─── Sunset — Heure dorée ─── */
body.theme-sunset{
  --bg:#0e0400;--sf:#1e0a00;--sf2:#2c1200;
  --gold:#ff8c38;--gold2:#e55e00;--green:#ffd23f;--red:#ff3a5a;--blue:#ff6eb4;
  --tx:#fff0e8;--mt:#8a5030;--bd:rgba(255,140,56,.16);
}
body.theme-sunset .xpw{border-color:rgba(255,140,56,.35);background:linear-gradient(135deg,rgba(30,8,0,.97),rgba(16,4,0,.9));}
body.theme-sunset .logo{background:linear-gradient(180deg,#ffe8b0 0%,#ffb050 22%,#ff7020 50%,#ee2244 75%,#ff9944 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-sunset .mc{border-color:rgba(255,140,56,.13);}
body.theme-sunset .mc.sel{box-shadow:0 0 28px rgba(255,140,56,.50),0 0 60px rgba(255,140,56,.10);border-color:rgba(255,140,56,.52);}
body.theme-sunset .pbtn{background:linear-gradient(150deg,#ffb060,#ff8c38 40%,#e55e00 100%);box-shadow:0 8px 32px rgba(255,140,56,.50);}
body.theme-sunset .xpbf{background:linear-gradient(90deg,#ffd23f,#ff8c38,#ff4e6a);}
body.theme-sunset #home-bg::before{background:
  radial-gradient(ellipse 62% 50% at 35% 22%,rgba(255,110,20,.52) 0%,transparent 55%),
  radial-gradient(ellipse 50% 42% at 72% 58%,rgba(220,40,30,.35) 0%,transparent 55%),
  radial-gradient(ellipse 40% 35% at 18% 76%,rgba(160,50,0,.26) 0%,transparent 52%);}

/* ─── Glace — Cristal & froid ─── */
body.theme-ice{
  --bg:#01060f;--sf:#041628;--sf2:#06203c;
  --gold:#8ed8f8;--gold2:#45a8e0;--green:#80ffdb;--red:#ff6080;--blue:#c8eeff;
  --tx:#e8f6ff;--mt:#3a6070;--bd:rgba(142,216,248,.16);
}
body.theme-ice .xpw{border-color:rgba(142,216,248,.30);background:linear-gradient(135deg,rgba(2,14,28,.97),rgba(0,6,14,.9));}
body.theme-ice .logo{background:linear-gradient(180deg,#ffffff 0%,#c8eeff 25%,#7ecef8 50%,#2288cc 78%,#aaddff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-ice .mc{border-color:rgba(142,216,248,.12);}
body.theme-ice .mc.sel{box-shadow:0 0 28px rgba(142,216,248,.45),0 0 60px rgba(142,216,248,.10);border-color:rgba(142,216,248,.48);}
body.theme-ice .pbtn{background:linear-gradient(150deg,#c8eeff,#8ed8f8 40%,#45a8e0 100%);color:#011828;box-shadow:0 8px 32px rgba(142,216,248,.40);}
body.theme-ice .xpbf{background:linear-gradient(90deg,#80ffdb,#8ed8f8);}
body.theme-ice #home-bg::before{background:
  radial-gradient(ellipse 60% 50% at 30% 25%,rgba(60,160,240,.40) 0%,transparent 55%),
  radial-gradient(ellipse 50% 42% at 72% 60%,rgba(20,100,200,.28) 0%,transparent 55%),
  radial-gradient(ellipse 40% 35% at 52% 80%,rgba(0,180,230,.22) 0%,transparent 52%);}

/* ─── Aurora — Boréale iridescente ─── */
body.theme-aurora{
  --bg:#02000f;--sf:#080022;--sf2:#0e0032;
  --gold:#c084fc;--gold2:#8b2fc9;--green:#4ade80;--red:#f472b6;--blue:#38bdf8;
  --tx:#f0e8ff;--mt:#6a4a88;--bd:rgba(192,132,252,.16);
}
body.theme-aurora .xpw{border-color:rgba(192,132,252,.35);background:linear-gradient(135deg,rgba(10,0,34,.97),rgba(4,0,18,.9));}
body.theme-aurora .logo{background:linear-gradient(180deg,#a8ffcc 0%,#30ee80 22%,#cc88ff 50%,#aa44ee 70%,#ff88cc 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-aurora .mc{border-color:rgba(192,132,252,.13);}
body.theme-aurora .mc.sel{box-shadow:0 0 28px rgba(192,132,252,.50),0 0 60px rgba(192,132,252,.12);border-color:rgba(192,132,252,.50);}
body.theme-aurora .pbtn{background:linear-gradient(150deg,#e0aaff,#c084fc 40%,#8b2fc9 100%);box-shadow:0 8px 32px rgba(192,132,252,.48);}
body.theme-aurora .xpbf{background:linear-gradient(90deg,#4ade80,#c084fc,#f472b6);}
body.theme-aurora #home-bg::before{background:
  radial-gradient(ellipse 58% 48% at 22% 32%,rgba(100,0,220,.48) 0%,transparent 52%),
  radial-gradient(ellipse 50% 42% at 74% 48%,rgba(0,220,140,.32) 0%,transparent 52%),
  radial-gradient(ellipse 44% 38% at 48% 80%,rgba(220,0,130,.28) 0%,transparent 52%);}

/* ─── Galaxie — Espace profond ─── */
body.theme-galaxy{
  --bg:#03000e;--sf:#0a0025;--sf2:#12003a;
  --gold:#a78bfa;--gold2:#6d28d9;--green:#00e5ff;--red:#f472b6;--blue:#818cf8;
  --tx:#ede9ff;--mt:#5a4a7a;--bd:rgba(167,139,250,.16);
}
body.theme-galaxy .xpw{border-color:rgba(167,139,250,.35);background:linear-gradient(135deg,rgba(12,0,40,.97),rgba(4,0,18,.9));}
body.theme-galaxy .logo{background:linear-gradient(180deg,#ffffff 0%,#d8c8ff 20%,#9966ff 45%,#5500cc 72%,#00ddff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-galaxy .mc{border-color:rgba(167,139,250,.13);}
body.theme-galaxy .mc.sel{box-shadow:0 0 28px rgba(167,139,250,.52),0 0 60px rgba(167,139,250,.12);border-color:rgba(167,139,250,.52);}
body.theme-galaxy .pbtn{background:linear-gradient(150deg,#c4b5fd,#a78bfa 40%,#6d28d9 100%);box-shadow:0 8px 32px rgba(167,139,250,.48);}
body.theme-galaxy .xpbf{background:linear-gradient(90deg,#00e5ff,#a78bfa,#f472b6);}
body.theme-galaxy #home-bg::before{background:
  radial-gradient(ellipse 62% 52% at 28% 25%,rgba(80,0,200,.52) 0%,transparent 55%),
  radial-gradient(ellipse 50% 44% at 72% 62%,rgba(0,160,240,.32) 0%,transparent 55%),
  radial-gradient(ellipse 42% 36% at 52% 82%,rgba(180,0,100,.24) 0%,transparent 52%);}

/* ─── Émeraude — Joyau vert ─── */
body.theme-emerald{
  --bg:#000e06;--sf:#002210;--sf2:#00321a;
  --gold:#10f07c;--gold2:#00b85a;--green:#80ffc0;--red:#ff5577;--blue:#00e8c0;
  --tx:#e0fff0;--mt:#2a7050;--bd:rgba(16,240,124,.16);
}
body.theme-emerald .xpw{border-color:rgba(16,240,124,.35);background:linear-gradient(135deg,rgba(0,22,10,.97),rgba(0,10,5,.9));}
body.theme-emerald .logo{background:linear-gradient(180deg,#ccffe0 0%,#44ffaa 22%,#00e870 50%,#008844 78%,#55ffbb 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-emerald .mc{border-color:rgba(16,240,124,.13);}
body.theme-emerald .mc.sel{box-shadow:0 0 28px rgba(16,240,124,.52),0 0 60px rgba(16,240,124,.12);border-color:rgba(16,240,124,.52);}
body.theme-emerald .pbtn{background:linear-gradient(150deg,#60ffb0,#10f07c 40%,#00b85a 100%);color:#001a0a;box-shadow:0 8px 32px rgba(16,240,124,.48);}
body.theme-emerald .xpbf{background:linear-gradient(90deg,#00e8c0,#10f07c);}
body.theme-emerald #home-bg::before{background:
  radial-gradient(ellipse 62% 52% at 28% 28%,rgba(0,200,80,.52) 0%,transparent 55%),
  radial-gradient(ellipse 50% 44% at 74% 60%,rgba(0,160,90,.34) 0%,transparent 55%),
  radial-gradient(ellipse 42% 36% at 48% 84%,rgba(0,220,140,.26) 0%,transparent 52%);}

/* ─── Inferno — Lave & feu ─── */
body.theme-inferno{
  --bg:#0e0200;--sf:#220600;--sf2:#380a00;
  --gold:#ff9500;--gold2:#e06000;--green:#ffdd00;--red:#ff3000;--blue:#ff5e3a;
  --tx:#fff4e0;--mt:#8a4010;--bd:rgba(255,149,0,.18);
}
body.theme-inferno .xpw{border-color:rgba(255,149,0,.38);background:linear-gradient(135deg,rgba(34,8,0,.97),rgba(18,4,0,.9));}
body.theme-inferno .logo{background:linear-gradient(180deg,#ffff88 0%,#ffcc00 22%,#ff8800 50%,#ee2200 78%,#ffaa22 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-inferno .mc{border-color:rgba(255,149,0,.14);}
body.theme-inferno .mc.sel{box-shadow:0 0 28px rgba(255,149,0,.55),0 0 60px rgba(255,80,0,.12);border-color:rgba(255,149,0,.55);}
body.theme-inferno .pbtn{background:linear-gradient(150deg,#ffe060,#ff9500 35%,#ff3000 100%);color:#1a0500;box-shadow:0 8px 36px rgba(255,149,0,.55);}
body.theme-inferno .xpbf{background:linear-gradient(90deg,#ffdd00,#ff9500,#ff3000);}
body.theme-inferno #home-bg::before{background:
  radial-gradient(ellipse 65% 52% at 32% 20%,rgba(255,100,0,.58) 0%,transparent 55%),
  radial-gradient(ellipse 52% 44% at 72% 60%,rgba(200,40,0,.38) 0%,transparent 55%),
  radial-gradient(ellipse 44% 38% at 18% 78%,rgba(255,180,0,.28) 0%,transparent 52%);}

/* ─── Cyber Vert — Matrix ─── */
body.theme-matrix{
  --bg:#000a00;--sf:#001800;--sf2:#002400;
  --gold:#00ff41;--gold2:#00bb30;--green:#88ff00;--red:#ff4040;--blue:#00ffaa;
  --tx:#e0ffe0;--mt:#1a5520;--bd:rgba(0,255,65,.15);
}
body.theme-matrix .xpw{border-color:rgba(0,255,65,.32);background:linear-gradient(135deg,rgba(0,20,0,.97),rgba(0,8,0,.9));}
body.theme-matrix .logo{background:linear-gradient(180deg,#ccff88 0%,#88ff22 22%,#00ff55 50%,#009922 78%,#66ff33 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-matrix .mc{border-color:rgba(0,255,65,.12);}
body.theme-matrix .mc.sel{box-shadow:0 0 28px rgba(0,255,65,.50),0 0 60px rgba(0,255,65,.10);border-color:rgba(0,255,65,.50);}
body.theme-matrix .pbtn{background:linear-gradient(150deg,#88ff80,#00ff41 40%,#00bb30 100%);color:#001a00;box-shadow:0 8px 32px rgba(0,255,65,.45);}
body.theme-matrix .xpbf{background:linear-gradient(90deg,#88ff00,#00ff41,#00ffaa);}
body.theme-matrix #home-bg::before{background:
  radial-gradient(ellipse 60% 50% at 30% 25%,rgba(0,200,40,.48) 0%,transparent 55%),
  radial-gradient(ellipse 50% 42% at 72% 58%,rgba(0,160,30,.32) 0%,transparent 55%),
  radial-gradient(ellipse 40% 35% at 50% 82%,rgba(0,255,100,.22) 0%,transparent 52%);}

/* ─── Rose — Sakura & velours ─── */
body.theme-rose{
  --bg:#0a0006;--sf:#1e001a;--sf2:#2c0028;
  --gold:#ff6eb4;--gold2:#d4006c;--green:#ff9de2;--red:#ff2060;--blue:#bf80ff;
  --tx:#ffe8f8;--mt:#883060;--bd:rgba(255,110,180,.17);
}
body.theme-rose .xpw{border-color:rgba(255,110,180,.36);background:linear-gradient(135deg,rgba(26,0,20,.97),rgba(14,0,10,.9));}
body.theme-rose .logo{background:linear-gradient(180deg,#ffe0f0 0%,#ff99cc 22%,#ff44aa 50%,#bb0055 78%,#ff88bb 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
body.theme-rose .mc{border-color:rgba(255,110,180,.13);}
body.theme-rose .mc.sel{box-shadow:0 0 28px rgba(255,110,180,.52),0 0 60px rgba(255,110,180,.12);border-color:rgba(255,110,180,.52);}
body.theme-rose .pbtn{background:linear-gradient(150deg,#ffaadd,#ff6eb4 40%,#d4006c 100%);box-shadow:0 8px 32px rgba(255,110,180,.50);}
body.theme-rose .xpbf{background:linear-gradient(90deg,#ff9de2,#ff6eb4,#bf80ff);}
body.theme-rose #home-bg::before{background:
  radial-gradient(ellipse 62% 52% at 30% 24%,rgba(220,0,110,.50) 0%,transparent 55%),
  radial-gradient(ellipse 50% 44% at 72% 62%,rgba(180,0,140,.32) 0%,transparent 55%),
  radial-gradient(ellipse 42% 36% at 15% 78%,rgba(255,60,160,.24) 0%,transparent 52%);}

.theme-picker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
.theme-picker{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px;margin-bottom:16px;
}
.theme-opt{
  border-radius:16px;padding:0;
  border:1.5px solid rgba(255,255,255,.08);
  text-align:center;cursor:pointer;
  transition:transform .18s,border-color .2s,box-shadow .2s;
  position:relative;
  background:rgba(255,255,255,.03);
}
.theme-opt:active{transform:scale(.93);}
.theme-opt.active{
  border-color:var(--gold);
  box-shadow:0 0 16px rgba(245,200,66,.2),0 0 0 1px rgba(245,200,66,.1);
}
.theme-opt-swatch{
  width:100%;aspect-ratio:4/2.2;
  border-radius:12px 12px 0 0;
  position:relative;overflow:hidden;
}
.theme-opt-swatch-bg{
  position:absolute;inset:0;
  transition:transform .3s;
}
.theme-opt:active .theme-opt-swatch-bg{transform:scale(1.08);}
.theme-opt-check{
  position:absolute;bottom:5px;right:5px;
  width:18px;height:18px;border-radius:50%;
  background:rgba(245,200,66,.9);
  display:flex;align-items:center;justify-content:center;
}
.theme-opt-check svg{width:10px;height:10px;color:#000;}
.theme-opt-lock{
  position:absolute;top:5px;right:5px;
  width:18px;height:18px;border-radius:6px;
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.theme-opt-lock svg{width:10px;height:10px;color:rgba(255,255,255,.6);}
.theme-opt-info{padding:5px 5px 6px;}
.theme-opt-name{
  font-size:9px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.theme-opt.active .theme-opt-name{color:var(--gold);}
.theme-opt-prog{display:none;}
.theme-opt-prog-fill{display:none;}
.unlock-dot{
  position:absolute;top:-4px;right:-4px;
  width:12px;height:12px;border-radius:50%;
  background:#ff4d6d;border:2px solid var(--bg);
  z-index:10;
  animation:unlockDotPop .4s cubic-bezier(.34,1.56,.64,1) both;
}



/* -- MODE LE CASTING -- */
.casting-wrap{width:100%;display:flex;flex-direction:column;gap:10px;}
.casting-header{
  background:rgba(255,255,255,.07);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:14px 16px;text-align:center;
}
.casting-title{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;}
.casting-actors{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.casting-actor{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:6px 12px 6px 6px;
  animation:qs .3s ease both;
}
.casting-actor-photo{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:top;background:var(--sf2);}
.casting-actor-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.85);}
.casting-clue{
  background:rgba(245,200,66,.07);border:1px solid rgba(245,200,66,.2);
  border-radius:12px;padding:8px 14px;font-size:12px;color:rgba(255,255,255,.55);
  text-align:center;font-style:italic;
}


/* -- REALISATEUR -- */
#game-bg.mode-realisateur{background:radial-gradient(ellipse 65% 55% at 50% 40%,rgba(80,30,0,.9) 0%,#060200 65%);}



/* Bouton ouvrir YouTube */
.bt-yt-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;background:rgba(255,0,0,.85);backdrop-filter:blur(10px);
  border:none;border-radius:16px;padding:14px;
  color:#fff;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;
  cursor:pointer;text-decoration:none;
  box-shadow:0 4px 16px rgba(255,0,0,.3);
  transition:transform .15s;
}
.bt-yt-btn:active{transform:scale(.97);}
.bt-yt-btn svg{flex-shrink:0;}

/* Countdown avant affichage des r-ponses */
.bt-countdown{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;letter-spacing:2px;
  color:rgba(255,255,255,.4);text-align:center;
}
.bt-countdown span{color:var(--gold);}

/* R-ponses cach-es initialement */
#agrid.bt-hidden .ab{opacity:0;pointer-events:none;transform:translateY(8px);}
#agrid.bt-visible .ab{opacity:1;pointer-events:all;transform:translateY(0);transition:opacity .3s ease,transform .3s ease;}
#agrid.bt-visible .ab:nth-child(2){transition-delay:.06s;}
#agrid.bt-visible .ab:nth-child(3){transition-delay:.12s;}
#agrid.bt-visible .ab:nth-child(4){transition-delay:.18s;}

/* ── BLIND TEST player ── */
.bt-player{
  width:100%;background:rgba(167,139,250,.08);
  border:1.5px solid rgba(167,139,250,.25);
  border-radius:20px;padding:20px 18px 16px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  position:relative;overflow:hidden;
}
.bt-player::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(167,139,250,.1),transparent 70%);
  pointer-events:none;
}
.bt-note-row{display:flex;gap:6px;align-items:flex-end;height:32px;margin-bottom:2px;}
.bt-note-bar{
  width:5px;border-radius:3px;background:rgba(167,139,250,.5);
  animation:btBarPulse 0.8s ease-in-out infinite;
}
.bt-note-bar:nth-child(1){height:14px;animation-delay:0s;}
.bt-note-bar:nth-child(2){height:22px;animation-delay:.12s;}
.bt-note-bar:nth-child(3){height:30px;animation-delay:.24s;}
.bt-note-bar:nth-child(4){height:18px;animation-delay:.06s;}
.bt-note-bar:nth-child(5){height:26px;animation-delay:.18s;}
.bt-note-bar:nth-child(6){height:12px;animation-delay:.30s;}
.bt-note-bar:nth-child(7){height:20px;animation-delay:.09s;}
.bt-note-bar.playing{background:var(--gold);box-shadow:0 0 8px rgba(245,200,66,.4);}
.bt-note-bar.paused{animation-play-state:paused;}
@keyframes btBarPulse{
  0%,100%{transform:scaleY(1);}
  50%{transform:scaleY(1.6);}
}
.bt-progress-wrap{width:100%;background:rgba(255,255,255,.08);border-radius:6px;height:4px;overflow:hidden;}
.bt-progress-fill{height:100%;background:linear-gradient(90deg,#a78bfa,#c4b5fd);border-radius:6px;width:0%;transition:width .3s linear;}
.bt-time-row{display:flex;justify-content:space-between;width:100%;font-size:11px;color:rgba(255,255,255,.35);letter-spacing:.5px;}
.bt-play-btn{
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(124,58,237,.4);
  transition:transform .15s,box-shadow .15s;
  flex-shrink:0;
}
.bt-play-btn:active{transform:scale(.93);}
.bt-play-btn svg{color:#fff;width:22px;height:22px;}
.bt-status{font-size:11px;color:rgba(167,139,250,.7);letter-spacing:.5px;text-align:center;}
.bt-status.loading{animation:_sqPulse 1.2s ease-in-out infinite;}
.bt-status.error{color:rgba(239,68,68,.7);}
.bt-composer{font-size:10px;color:rgba(255,255,255,.2);letter-spacing:.5px;text-align:center;margin-top:-6px;}
.bt-reveal-poster{
  width:80px;height:115px;border-radius:10px;object-fit:cover;
  border:1.5px solid rgba(167,139,250,.3);
  animation:fadeScaleIn .4s cubic-bezier(.34,1.56,.64,1);
  flex-shrink:0;
}
/* Révélation plein écran blind test */
.bt-reveal-fullposter{
  position:relative;width:100%;border-radius:16px;overflow:hidden;
  animation:fadeScaleIn .45s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 8px 32px rgba(0,0,0,.65);
}
.bt-reveal-fullimg{
  display:block;width:100%;
  aspect-ratio:2/3;object-fit:cover;
  border-radius:16px;
}
.bt-reveal-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:28px 16px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 50%,transparent 100%);
  border-radius:0 0 16px 16px;
  text-align:center;
}
.bt-tap-hint{
  display:inline-block;
  margin-top:10px;
  padding:7px 20px;
  border-radius:20px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  font-size:13px;
  color:rgba(255,255,255,.75);
  letter-spacing:.5px;
}
.bt-reveal-title{
  font-family:'Special Gothic Expanded One',sans-serif;
  font-size:26px;letter-spacing:2px;
  color:#fff;line-height:1.1;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
  margin-bottom:4px;
}
.bt-reveal-year{
  font-size:13px;font-weight:500;
  color:rgba(255,255,255,.55);
  letter-spacing:1px;
}
/* -- LIEU DE TOURNAGE -- */
#game-bg.mode-location{background:radial-gradient(ellipse 65% 55% at 40% 60%,rgba(0,60,40,.9) 0%,#000503 65%);}

.loc-wrap{width:100%;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;}
.loc-img-box{
  flex:1;min-height:0;position:relative;
  border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,rgba(20,18,14,.95),rgba(14,12,8,.9));
  display:flex;align-items:center;justify-content:center;
}
.loc-emoji-display{
  font-size:96px;
  line-height:1;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.5));
  animation:locEmojiIn .4s cubic-bezier(.34,1.56,.64,1) both;
  user-select:none;
}
@keyframes locEmojiIn{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}
.loc-overlay{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 50%,transparent 100%);
  padding:16px 14px 12px;z-index:3;
}
.loc-country{font-size:10px;color:rgba(255,255,255,.55);letter-spacing:2.5px;text-transform:uppercase;}
.loc-place{font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;color:#fff;letter-spacing:1px;margin-top:3px;text-shadow:0 2px 8px rgba(0,0,0,.6);}
.loc-hint{
  flex-shrink:0;
  background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.18);
  border-radius:12px;padding:8px 14px;font-size:12px;color:rgba(255,255,255,.5);
  text-align:center;line-height:1.4;
}


#game-bg.mode-generique{background:radial-gradient(ellipse 65% 55% at 50% 40%,rgba(80,30,0,.9) 0%,#060200 65%);}
.gen-wrap{width:100%;display:flex;flex-direction:column;gap:10px;}
.gen-header{background:rgba(255,255,255,.07);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 16px;}
.gen-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.gen-label{font-size:10px;color:rgba(255,255,255,.38);letter-spacing:2px;text-transform:uppercase;}
.gen-counter{font-size:11px;color:var(--gold);font-weight:700;letter-spacing:1px;}
.gen-actors{display:flex;flex-direction:column;gap:7px;}
.gen-actor-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);animation:genSlideIn .35s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes genSlideIn{from{opacity:0;transform:translateX(-12px);}to{opacity:1;transform:translateX(0);}}
.gen-actor-num{width:22px;height:22px;border-radius:50%;flex-shrink:0;background:rgba(245,200,66,.15);border:1px solid rgba(245,200,66,.25);color:var(--gold);font-family:'Special Gothic Expanded One',sans-serif;font-size:13px;display:flex;align-items:center;justify-content:center;}
.gen-actor-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.85);}
.gen-actor-role{font-size:10px;color:rgba(255,255,255,.35);margin-left:auto;font-style:italic;}
.gen-hint{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:8px 14px;font-size:11px;color:rgba(255,255,255,.4);text-align:center;}
.gen-pip-bar{display:flex;gap:4px;margin-top:8px;}
.gen-pip{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.1);transition:background .4s;}
.gen-pip.on{background:var(--gold);}


/* -- MODE COMPOSITEUR -- */
.comp-wrap{width:100%;display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;}
.comp-poster-box{position:relative;border-radius:16px;overflow:hidden;background:#0a0a0a;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}
.comp-poster-box img{width:auto;height:100%;max-width:100%;object-fit:contain;display:block;filter:brightness(.95);background:#0a0a0a;}
.comp-poster-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.82) 100%);}
.comp-title{position:absolute;bottom:10px;left:12px;right:12px;font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;letter-spacing:1px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);}
.comp-year{font-size:12px;color:rgba(255,255,255,.55);letter-spacing:1px;font-family:'DM Sans',sans-serif;font-weight:normal;margin-left:6px;}
.comp-hint{background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.25);border-radius:12px;padding:8px 14px;font-size:12px;color:rgba(255,255,255,.6);text-align:center;font-style:italic;}


/* -- MODE FILMOGRAPHIE -- */
#game-bg.mode-filmographie{background:radial-gradient(ellipse 65% 55% at 45% 35%,rgba(50,0,100,.9) 0%,#030008 65%);}
.filmo-wrap{width:100%;display:flex;flex-direction:column;gap:9px;}
.filmo-intro{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:2px;}
.filmo-films{display:flex;flex-direction:column;gap:8px;}
.filmo-film-row{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  animation:filmoSlide .3s cubic-bezier(.34,1.56,.64,1) both;
}
.filmo-film-row:nth-child(1){animation-delay:.05s;}
.filmo-film-row:nth-child(2){animation-delay:.12s;}
.filmo-film-row:nth-child(3){animation-delay:.19s;}
.filmo-film-row:nth-child(4){animation-delay:.26s;}
@keyframes filmoSlide{from{opacity:0;transform:translateX(-14px);}to{opacity:1;transform:translateX(0);}}
.filmo-num{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:rgba(167,139,250,.2);border:1px solid rgba(167,139,250,.4);
  color:#a78bfa;font-family:'Special Gothic Expanded One',sans-serif;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.filmo-title{font-size:14px;font-weight:600;color:rgba(255,255,255,.88);line-height:1.3;}
.filmo-question{
  background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.25);
  border-radius:12px;padding:10px 14px;font-size:12px;
  color:rgba(255,255,255,.55);text-align:center;font-style:italic;
  margin-top:2px;
}

.real-wrap{width:100%;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;}
.real-poster-box{position:relative;border-radius:16px;overflow:hidden;background:#0a0a0a;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}
.real-poster-box img{width:auto;height:100%;max-width:100%;object-fit:contain;display:block;filter:brightness(.95);background:#0a0a0a;}
.real-poster-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.85) 100%);}
.real-film-info{position:absolute;bottom:10px;left:12px;right:12px;}
.real-film-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:22px;letter-spacing:1px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);}
.real-film-year{font-size:12px;color:rgba(255,255,255,.55);margin-left:6px;font-family:'DM Sans',sans-serif;}
.real-hint{background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.25);border-radius:12px;padding:8px 14px;font-size:12px;color:rgba(255,255,255,.6);text-align:center;font-style:italic;}

/* -- MODE ENTRAINEMENT -- */
.train-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(167,139,250,.15);border:1px solid rgba(167,139,250,.35);
  border-radius:8px;padding:3px 9px;font-size:10px;color:#a78bfa;
  letter-spacing:1px;text-transform:uppercase;font-weight:600;
}

/* -- PROFILE -- */
#profile{padding:0;}
/* Bouton retour générique (ex: page Help) */
.bkbtn {
  width: 42px; height: 42px;
  border-radius: 13px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  color: rgba(255,255,255,.7);
  transition: transform .18s, background .18s;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.bkbtn:active { transform: scale(.88); background: rgba(255,255,255,.13); }

/* Bouton retour badges — carré iconique cohérent avec ibtn */
.bsc-back-btn {
  width: 42px; height: 42px;
  border-radius: 13px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  color: rgba(255,255,255,.7);
  transition: transform .18s, background .18s, border-color .18s;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.bsc-back-btn:active { transform: scale(.88); background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.22); }

/* Titre avec icône inline */
.bsc-title-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.bsc-title-icon { color: var(--gold); flex-shrink: 0; opacity: .9; }




.phero{
  position:relative;
  border-radius:20px;padding:28px 20px 22px;
  margin-bottom:11px;text-align:center;
  background:linear-gradient(145deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.05) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:
    0 0 0 1px rgba(245,200,66,.08),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 8px 32px rgba(0,0,0,.35);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
}
.phero::before{ content:none; }
@keyframes phBorderSpin{from{--ph-angle:0deg;}to{--ph-angle:360deg;}}
.phero::after{
  content:'';position:absolute;inset:1px;border-radius:19px;
  background:transparent;
  z-index:1;pointer-events:none;
}
/* Grain pellicule profil */
.phero-grain{
  position:absolute;inset:0;border-radius:20px;z-index:3;
  pointer-events:none;
  display:none;
}
/* Contenu profil au-dessus du masque */
.phero>*:not(.phero-grain){position:relative;z-index:2;}
.phero-bg{
  position:absolute;inset:0;border-radius:19px;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 20% 25%, rgba(200,120,20,.12) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 80% 75%, rgba(20,60,155,.09) 0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 50% 0%,rgba(245,200,66,.06) 0%,transparent 60%),
    radial-gradient(ellipse 40% 40% at 100% 100%,rgba(232,168,0,.04) 0%,transparent 55%);
}
.phero-av-wrap{position:relative;display:inline-flex;margin-bottom:14px;z-index:1;}
.phero-av-ring{
  position:absolute;inset:-3px;border-radius:22px;
  background:linear-gradient(135deg,rgba(245,200,66,.6),rgba(200,140,0,.3),rgba(245,200,66,.6));
  z-index:0;
}
.pav{position:relative;z-index:1;font-size:48px;margin-bottom:0;}
.phero-edit-badge{
  position:absolute;bottom:-4px;right:-4px;z-index:2;
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer;
}
.phero-edit-badge svg{width:11px;height:11px;color:#000;}
.pnm{font-family:'Special Gothic Expanded One',sans-serif;font-size:26px;letter-spacing:2.5px;line-height:1;}
.pnm-wrap{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:8px;cursor:pointer;position:relative;z-index:1;}
.pnm-edit{font-size:13px;opacity:.3;}
.phero-level{position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.2);
  border-radius:20px;padding:5px 14px 5px 10px;
}
.phero-level svg{width:14px;height:14px;color:var(--gold);}
.phero-level-txt{font-size:11px;font-weight:600;color:var(--gold);letter-spacing:.8px;}
.ptt{display:none;}
.hitem{background:var(--sf);border:1px solid var(--bd);border-radius:13px;padding:11px 13px;display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.hitem-top{background:rgba(245,200,66,.06);border-color:rgba(245,200,66,.2);}
.hi{font-size:18px;}.hinfo{flex:1;}
.hs{font-family:'Special Gothic Expanded One',sans-serif;font-size:16px;color:var(--gold);}
.hd{font-size:11px;color:var(--mt);margin-top:1px;}
.hdate{font-size:11px;color:var(--mt);}
/* profile badge grid */
.pbgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:11px;}
.pbc{background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:6px 4px 5px;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .2s;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.pbc::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,255,255,.04) 0%,transparent 70%);pointer-events:none;}
.pbc.ok{background:linear-gradient(145deg,rgba(245,200,66,.10),rgba(245,200,66,.04));border-color:rgba(245,200,66,.28);box-shadow:0 0 14px rgba(245,200,66,.08),inset 0 1px 0 rgba(245,200,66,.15);}
.pbc.lk{opacity:1;filter:none;background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.01));border-color:rgba(255,255,255,.06);}
.pbc.lk .pbci{filter:grayscale(1);opacity:.22;}
.pbc.lk .pbcn{opacity:.25;}
.pbc:active{transform:scale(.91);}
.pbci{font-size:22px;margin-bottom:3px;line-height:1;display:block;}
.pbcn{font-size:9px;color:rgba(255,255,255,.38);letter-spacing:.3px;line-height:1.3;display:block;}
.pbc.ok .pbcn{color:rgba(245,200,66,.75);}

/* ── PASTILLES NOUVEAUTÉ ── */
.unlock-dot{
  position:absolute;top:-4px;right:-4px;
  width:9px;height:9px;border-radius:50%;
  background:var(--red);border:1.5px solid var(--bg);
  box-shadow:0 0 6px rgba(232,52,74,.7);
  pointer-events:none;
  animation:unlockDotPop .4s cubic-bezier(.34,1.56,.64,1) both;
  z-index:10;
}
@keyframes unlockDotPop{0%{transform:scale(0);opacity:0;}60%{transform:scale(1.3);}100%{transform:scale(1);opacity:1;}}
@keyframes unlockDotFade{from{transform:scale(1);opacity:1;}to{transform:scale(0);opacity:0;}}
.shd-new-pill{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;border-radius:8px;
  font-size:8px;font-weight:800;padding:1px 5px;margin-left:6px;
  letter-spacing:.3px;min-width:16px;vertical-align:middle;line-height:1.4;
  box-shadow:0 2px 6px rgba(232,52,74,.45);
  animation:unlockDotPop .4s cubic-bezier(.34,1.56,.64,1) both;
}

/* -- LOADING -- */
#loading{align-items:center;justify-content:center;gap:15px;}
.lfilm{font-size:54px;animation:fbob 1.4s ease infinite;}
@keyframes fbob{0%,100%{transform:rotate(-8deg) scale(1);}50%{transform:rotate(8deg) scale(1.08);}}
.ltxt{font-family:'Special Gothic Expanded One',sans-serif;font-size:19px;color:var(--mt);letter-spacing:3px;}
.ldots span{display:inline-block;width:6px;height:6px;background:var(--gold);border-radius:50%;margin:0 3px;animation:ldot 1.2s ease infinite;}
.ldots span:nth-child(2){animation-delay:.2s;}
.ldots span:nth-child(3){animation-delay:.4s;}
@keyframes ldot{0%,80%,100%{transform:translateY(0);opacity:.3;}40%{transform:translateY(-8px);opacity:1;}}
.lstep{display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:11px;background:var(--sf);border:1px solid var(--bd);font-size:12px;color:var(--mt);transition:all .3s;}
.lstep.act{border-color:rgba(245,200,66,.3);color:var(--tx);}
.lstep.don{border-color:rgba(46,204,113,.3);color:var(--green);}
.lsi{font-size:14px;width:18px;text-align:center;}

/* ─── GAME HEADER ─── */
#game{display:flex;flex-direction:column;height:100%;overflow:hidden;}
.ghd{
  padding:max(14px,env(safe-area-inset-top,14px)) 18px 4px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:10px;
  position:relative;
}
.quit-btn{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);
  color:rgba(255,255,255,.45);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;
}
.quit-btn:active{background:rgba(232,52,74,.15);border-color:rgba(232,52,74,.3);color:var(--red);transform:scale(.92);}
.qnl{font-family:'Special Gothic Expanded One',sans-serif;font-size:14px;color:rgba(255,255,255,.45);letter-spacing:1.5px;}
.qcl{font-size:9px;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-top:1px;opacity:.7;}
/* Multiplicateur badge */
.mb{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:15px;
  padding:5px 12px;border-radius:10px;letter-spacing:1px;
  border:1.5px solid transparent;transition:all .2s cubic-bezier(.34,1.56,.64,1);
}
.mb.bump{animation:mbBump .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes mbBump{0%{transform:scale(1);}30%{transform:scale(1.38);color:var(--gold);}65%{transform:scale(.92);}100%{transform:scale(1);}}
.mx3{background:rgba(46,204,113,.15);color:var(--green);border-color:rgba(46,204,113,.4);box-shadow:0 0 12px rgba(46,204,113,.2);}
.mx2{background:rgba(243,156,18,.15);color:#f39c12;border-color:rgba(243,156,18,.35);box-shadow:0 0 10px rgba(243,156,18,.15);}
.mx1{background:rgba(232,52,74,.1);color:var(--red);border-color:rgba(232,52,74,.25);}
.shd2{font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;color:var(--gold);letter-spacing:1px;transition:transform .2s;}
.shd2.bump{animation:mbBump .3s cubic-bezier(.34,1.56,.64,1);}
/* ─── SYSTÈME DE NOTIFICATION POINTS — version compacte ─── */

/* Keyframe glow générique (utilisée aussi par les badges) */
@keyframes toastGlowOk{
  0%,100%{box-shadow:0 6px 32px rgba(0,0,0,.55),0 0 0 1px rgba(46,204,113,.25);}
  50%{box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(46,204,113,.45),0 0 30px rgba(46,204,113,.15);}
}

/* ═══════════════════════════════════════════
   SYSTÈME DE NOTIFICATION UNIFIÉ — style iOS
   Glisse depuis le haut, swipe↑ pour dismiss
   ═══════════════════════════════════════════ */
@keyframes notifSlideDown{
  0%  {transform:translateX(-50%) translateY(-110%);opacity:0;}
  55% {transform:translateX(-50%) translateY(6px);opacity:1;}
  75% {transform:translateX(-50%) translateY(-3px);}
  100%{transform:translateX(-50%) translateY(0);opacity:1;}
}
@keyframes notifSlideUp{
  0%  {transform:translateX(-50%) translateY(0);opacity:1;}
  100%{transform:translateX(-50%) translateY(-115%);opacity:0;}
}
@keyframes notifProgress{
  from{transform:scaleX(1);}
  to{transform:scaleX(0);}
}

/* Notification wrapper commun */
.notif-wrap{
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 10px);
  left:50%;
  transform:translateX(-50%) translateY(-110%);
  width:calc(100% - 24px);
  max-width:612px;
  z-index:9500;
  pointer-events:none;
  opacity:0;
  will-change:transform,opacity;
  touch-action:none;
}
.notif-wrap.notif-in{
  pointer-events:all;
  animation:notifSlideDown .42s cubic-bezier(.22,1.2,.36,1) both;
  transform:translateX(-50%) translateY(0);
  opacity:1;
}
.notif-wrap.notif-out{
  animation:notifSlideUp .28s cubic-bezier(.55,0,.45,1) both;
  pointer-events:none;
}

/* Card intérieure */
.notif-card{
  position:relative;
  display:flex;align-items:center;gap:12px;
  background:rgba(18,18,26,.96);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:12px 16px 14px 12px;
  backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  box-shadow:0 12px 48px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.07) inset;
  overflow:hidden;
}
/* Barre de progression auto-dismiss */
.notif-progress{
  position:absolute;bottom:0;left:0;right:0;height:2px;
  transform-origin:left center;
  background:rgba(255,255,255,.18);
  border-radius:0 0 20px 20px;
}
/* Icône */
.notif-icon{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
/* Textes */
.notif-body{flex:1;min-width:0;}
.notif-title{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;line-height:1;
  letter-spacing:.8px;color:#fff;
}
.notif-sub{
  font-size:11px;color:rgba(255,255,255,.48);
  line-height:1.4;white-space:normal;margin-top:3px;
}
/* Pill swipe hint */
.notif-pill{
  position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:32px;height:3px;background:rgba(255,255,255,.2);border-radius:2px;
}

/* Variante score (verte) */
.notif-card.notif-score{
  border-color:rgba(46,204,113,.2);
  box-shadow:0 12px 48px rgba(0,0,0,.65),0 0 24px rgba(46,204,113,.1),0 1px 0 rgba(255,255,255,.07) inset;
}
.notif-card.notif-score .notif-progress{background:rgba(46,204,113,.5);}

/* Variante badge (dorée) */
.notif-card.notif-badge{
  border-color:rgba(245,200,66,.25);
  box-shadow:0 12px 48px rgba(0,0,0,.65),0 0 28px rgba(245,200,66,.12),0 1px 0 rgba(255,255,255,.07) inset;
}
.notif-card.notif-badge .notif-progress{background:rgba(245,200,66,.55);}

/* Variante info (bleue) */
.notif-card.notif-info{
  border-color:rgba(74,158,255,.2);
}
.notif-card.notif-info .notif-progress{background:rgba(74,158,255,.5);}

/* ── ANCIEN .tst — conservé pour compatibilité mais caché ── */
.tst{display:none!important;}

/* Badge icon spin (conservé car utilisé ailleurs) */
@keyframes badgeIconSpin{
  0%{transform:scale(0) rotate(-20deg);opacity:0;}
  55%{transform:scale(1.25) rotate(6deg);opacity:1;}
  75%{transform:scale(.92) rotate(-2deg);}
  100%{transform:scale(1) rotate(0deg);}
}
@keyframes badgeUnlockIcon{0%{transform:scale(0) rotate(-15deg);opacity:0;}60%{transform:scale(1.18) rotate(4deg);}80%{transform:scale(.94);}100%{transform:scale(1);opacity:1;}}
.badge-unlock-flash{animation:badgeUnlockIcon .55s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes badgeShimmer{0%{background-position:200% center;}100%{background-position:-200% center;}}
@keyframes badgeSlideUp{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}

.tst{
  position:absolute;
  top:calc(max(14px,env(safe-area-inset-top,14px)) + 110px);
  right:auto;left:50%;
  width:calc(100% - 32px);
  max-width:320px;
  transform:translateX(-50%) translateY(-10px) scale(.86);
  background:rgba(10,12,22,.94);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:11px 14px 11px 10px;
  display:flex;align-items:flex-start;gap:9px;
  opacity:0;pointer-events:none;
  z-index:100;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 6px 28px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.06) inset;
  will-change:transform,opacity;
  cursor:pointer;
}
.tst.on{
  opacity:1;pointer-events:all;
  animation:pillIn .24s cubic-bezier(.34,1.56,.64,1) both;
}
.tst.leaving{
  animation:pillOut .18s ease both;
  pointer-events:none;
}
.tst.ok{
  border-color:rgba(46,204,113,.22);
  box-shadow:0 6px 28px rgba(0,0,0,.55),0 0 20px rgba(46,204,113,.08),0 1px 0 rgba(255,255,255,.06) inset;
}
.tst.ok.on{
  animation:pillIn .24s cubic-bezier(.34,1.56,.64,1) both;
}
.tst.ok.leaving{
  animation:pillOut .18s ease both;
}

/* Mode vrai/faux — légèrement plus bas car header plus petit */
.game-vraifaux .tst{top:calc(max(14px,env(safe-area-inset-top,14px)) + 100px);}

/* Icône check/croix */
.tst-icon{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  background:rgba(46,204,113,.12);
  transition:background .15s;
}

/* Score + label empilés */
.tst-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.tpts{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:22px;line-height:1;
  letter-spacing:1px;flex-shrink:0;
}
@keyframes ptsPopIn{0%{transform:scale(.5) translateY(8px);opacity:0;}100%{transform:scale(1) translateY(0);opacity:1;}}
.tmsg{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.3px;white-space:normal;line-height:1.35;margin-top:1px;}
.tans{font-size:11px;color:rgba(255,255,255,.6);font-style:italic;line-height:1.35;white-space:normal;}

/* ─── FLOATING POINTS — +pts qui monte et disparaît depuis le score ─── */
@keyframes floatUp{
  0%  {opacity:0;transform:translateY(0) scale(.7);}
  20% {opacity:1;transform:translateY(-6px) scale(1.05);}
  70% {opacity:1;transform:translateY(-22px) scale(1);}
  100%{opacity:0;transform:translateY(-36px) scale(.9);}
}
.float-pts{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
  font-family:'Special Gothic Expanded One',sans-serif;
  font-size:16px;letter-spacing:1px;
  z-index:150;
  animation:floatUp .9s ease both;
  will-change:transform,opacity;
}
.float-pts.bonus{font-size:18px;color:var(--gold);}
.float-pts.normal{color:rgba(46,204,113,.9);}

/* ─── JUKEBOX TABS ─── */
.jk-tabs{display:flex;gap:6px;margin-bottom:10px;flex-shrink:0;}
.jk-tab{
  flex:1;padding:8px 4px;border-radius:12px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:13px;letter-spacing:1.5px;
  text-align:center;cursor:pointer;transition:all .18s;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.38);
}
.jk-tab.active{background:rgba(245,200,66,.12);border-color:rgba(245,200,66,.35);color:var(--gold);}
.jk-tab:active{transform:scale(.96);}

/* ─── ZONE VIDÉO TV ZAPPING ─── */
.jk-vid-section{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:max(20px,env(safe-area-inset-bottom,20px));}
.jk-vid-player-wrap{
  width:100%;background:#000;border-radius:16px;overflow:hidden;
  position:relative;margin-bottom:0;flex-shrink:0;
  border:1px solid rgba(255,255,255,.08);
  aspect-ratio:16/9;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
}
.jk-vid-player-wrap video{width:100%;height:100%;display:block;object-fit:contain;background:#000;}
.jk-vid-tap-overlay{position:absolute;inset:0;z-index:2;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.jk-vid-pp-icon{width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;pointer-events:none;}
.jk-vid-pp-icon.show{opacity:1;}
.jk-vid-pp-icon svg{color:#fff;width:22px;height:22px;}
.jk-vid-fs-btn{position:absolute;bottom:8px;right:8px;z-index:3;width:34px;height:34px;border-radius:9px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .1s;}
.jk-vid-fs-btn:active{background:rgba(245,200,66,.2);transform:scale(.9);}
.jk-vid-fs-btn svg{color:rgba(255,255,255,.7);width:15px;height:15px;}
/* Indicateurs swipe gauche/droite */
.jk-swipe-hint{position:absolute;top:50%;transform:translateY(-50%);z-index:4;pointer-events:none;opacity:0;transition:opacity .2s;}
.jk-swipe-hint.left{left:10px;}
.jk-swipe-hint.right{right:10px;}
.jk-swipe-hint svg{color:rgba(255,255,255,.5);width:20px;height:20px;}
/* Bandeau titre style sous-titre TV */
/* Bandeau de lancement CINÉTEK */
.jk-launch-banner{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,.78);border-radius:16px;
  opacity:0;pointer-events:none;
  transition:opacity .4s;
}
.jk-launch-banner.show{opacity:1;}
.jk-launch-station{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:11px;letter-spacing:4px;
  color:rgba(245,200,66,.5);margin-bottom:6px;
}
.jk-launch-title{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:28px;letter-spacing:4px;
  color:#fff;line-height:1;margin-bottom:4px;
  text-shadow:0 0 20px rgba(245,200,66,.3);
}
.jk-launch-ch{
  font-size:10px;color:rgba(255,255,255,.35);letter-spacing:2px;
}
.jk-launch-bar{
  width:48px;height:2px;border-radius:2px;
  background:rgba(245,200,66,.4);margin-top:10px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 2.2s linear;
}
.jk-launch-banner.show .jk-launch-bar{transform:scaleX(1);}

.jk-tv-banner{
  position:absolute;bottom:0;left:0;right:0;z-index:5;
  padding:20px 14px 10px;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.jk-tv-banner.show{opacity:1;}
.jk-tv-banner-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:16px;letter-spacing:2px;color:#fff;line-height:1;}
.jk-tv-banner-ch{font-size:10px;color:rgba(255,255,255,.45);letter-spacing:1.5px;margin-top:2px;}
/* Numéro de chaîne overlay (style OSD TV) */
.jk-ch-osd{
  position:absolute;top:12px;right:12px;z-index:6;
  background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.18);
  border-radius:8px;padding:5px 10px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;letter-spacing:2px;
  color:#fff;opacity:0;transition:opacity .3s;pointer-events:none;
}
.jk-ch-osd.show{opacity:1;}
/* Overlay glitch TV */
.jk-glitch-overlay{
  position:absolute;inset:0;z-index:10;pointer-events:none;
  opacity:0;overflow:hidden;border-radius:16px;
}
.jk-glitch-overlay.active{opacity:1;}
.jk-glitch-bar{position:absolute;left:0;right:0;height:3px;mix-blend-mode:screen;}
.jk-glitch-noise{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);}
@keyframes jkGlitchSlide{0%{transform:translateX(0) scaleY(1);}20%{transform:translateX(-8px) scaleY(1.5);}40%{transform:translateX(12px) scaleY(.5);}60%{transform:translateX(-5px) scaleY(2);}80%{transform:translateX(6px) scaleY(.8);}100%{transform:translateX(0) scaleY(1);}}
@keyframes jkGlitchBlink{0%,100%{opacity:0;}10%,30%,50%,70%,90%{opacity:1;}20%,40%,60%,80%{opacity:0;}}
/* Boutons zap + aléatoire */
.jk-zap-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0 4px;flex-shrink:0;gap:8px;}

/* ── Cinétek en mode paysage : player full-width + contrôles dessous ── */
@media screen and (orientation:landscape) and (max-height:500px){
  /* Wrap plein écran — sortir de la contrainte 390px */
  body.allow-landscape .wrap{
    max-width:100vw !important;
    width:100vw !important;
    height:100dvh !important;
    border-radius:0 !important;
    border:none !important;
    box-shadow:none !important;
  }
  /* Masquer la navbar en paysage */
  #cq-global-nav{
    display:none !important;
  }
  body.nav-visible #home,
  body.nav-visible .scr,
  body.nav-visible .scr2{
    padding-bottom:0 !important;
  }
  body.allow-landscape #jukebox{
    padding:0 env(safe-area-inset-right,8px) 0 env(safe-area-inset-left,8px);
  }
  /* Masquer la topbar Jukebox et les onglets en paysage */
  body.allow-landscape #jukebox > .jk-topbar,
  body.allow-landscape #jukebox > .jk-tabs{
    display:none !important;
  }
  body.allow-landscape #jk-video-section{
    flex-direction:column !important;
    align-items:stretch;
    gap:0;
    overflow:hidden;
  }
  body.allow-landscape .jk-vid-col-main{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0;
    overflow:hidden;
    min-height:0;
  }
  body.allow-landscape .jk-vid-header{
    display:none;
  }
  body.allow-landscape .jk-vid-player-wrap{
    border-radius:8px;
    flex:1 1 auto;
    min-height:0;
    aspect-ratio:unset;
    width:100%;
  }
  body.allow-landscape .jk-zap-row{
    padding:5px 0 2px;
    flex-shrink:0;
  }
  body.allow-landscape .jk-zap-btn{
    width:38px;height:38px;border-radius:10px;
  }
  body.allow-landscape .jk-random-btn{
    height:38px;border-radius:10px;
  }
  body.allow-landscape .jk-vid-counter{
    padding:2px 0 0;
    font-size:9px;
  }
  /* Cacher la liste en paysage — on veut juste le player plein écran */
  body.allow-landscape .jk-vid-section{
    display:none;
  }
}
.jk-zap-btn{
  width:46px;height:46px;border-radius:14px;flex-shrink:0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s,transform .1s,border-color .15s;
}
.jk-zap-btn:active{background:rgba(245,200,66,.12);border-color:rgba(245,200,66,.3);transform:scale(.93);}
.jk-zap-btn svg{color:rgba(255,255,255,.6);width:20px;height:20px;}
.jk-random-btn{
  flex:1;height:46px;border-radius:14px;
  background:rgba(245,200,66,.08);border:1px solid rgba(245,200,66,.2);
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:background .15s,transform .1s,border-color .15s;
}
.jk-random-btn:active{background:rgba(245,200,66,.18);border-color:rgba(245,200,66,.45);transform:scale(.97);}
.jk-random-btn-label{font-family:'Special Gothic Expanded One',sans-serif;font-size:15px;letter-spacing:2px;color:var(--gold);}
.jk-random-btn svg{color:var(--gold);width:16px;height:16px;}
/* Compteur sous les boutons */
.jk-vid-counter{text-align:center;font-size:10px;color:rgba(255,255,255,.2);letter-spacing:1px;padding:6px 0 0;flex-shrink:0;}
/* Ancien style supprimé */
.jk-vid-list{display:flex;flex-direction:column;gap:1px;}
.jk-vid-row{display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:12px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(255,255,255,.04);}
.jk-vid-row:active{background:rgba(255,255,255,.06);}
.jk-vid-row.active{background:rgba(245,200,66,.06);}
.jk-vid-row.active .jk-vid-row-name{color:var(--gold);}
.jk-vid-thumb{width:54px;height:36px;border-radius:8px;flex-shrink:0;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;position:relative;}
.jk-vid-row.active .jk-vid-thumb{border-color:rgba(245,200,66,.35);}
.jk-vid-thumb-icon{font-size:18px;pointer-events:none;}
.jk-vid-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);opacity:0;transition:opacity .18s;}
.jk-vid-row:active .jk-vid-play-overlay{opacity:1;}
.jk-vid-row.active .jk-vid-play-overlay{opacity:1;background:rgba(245,200,66,.2);}
.jk-vid-eq{display:flex;align-items:flex-end;gap:2px;height:12px;}
.jk-vid-eq span{width:3px;border-radius:1px;background:var(--gold);animation:jkEq .7s ease-in-out infinite alternate;}
.jk-vid-eq span:nth-child(2){animation-delay:.18s;animation-duration:.9s;}
.jk-vid-eq span:nth-child(3){animation-delay:.35s;animation-duration:.6s;}
.jk-vid-row-info{flex:1;min-width:0;}
.jk-vid-row-name{font-size:13px;font-weight:500;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s;}
.jk-vid-row-num{font-size:10px;color:rgba(255,255,255,.26);margin-top:1px;letter-spacing:.3px;}
/* fond vidéo */
#game-bg.mode-jukebox-vid{background:radial-gradient(ellipse 70% 55% at 50% 38%,rgba(60,10,100,.8) 0%,#07050a 65%);}
#game-bg.mode-jukebox-vid::before{background:radial-gradient(ellipse 52% 42% at 36% 26%,rgba(130,40,200,.38) 0%,transparent 58%),radial-gradient(ellipse 44% 38% at 68% 66%,rgba(80,10,150,.24) 0%,transparent 56%);}
#game-bg.mode-jukebox-vid::after{background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 26%,rgba(0,0,0,.9) 100%);}
.pdots{display:flex;gap:3px;padding:4px 18px 6px;flex-shrink:0;}
.dot{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1);transition:background .3s,transform .2s;}
.dot.dc{background:rgba(245,200,66,.25);}
.dot.dv{background:var(--green);box-shadow:0 0 6px rgba(46,204,113,.5);animation:dotPop .35s cubic-bezier(.34,1.56,.64,1) both;}
.dot.dx{background:var(--red);box-shadow:0 0 5px rgba(232,52,74,.4);}
@keyframes dotPop{0%{transform:scaleY(0);}60%{transform:scaleY(1.5);}100%{transform:scaleY(1);}}

/* ─── TIMER ─── */
.twrap{padding:0 18px 10px;flex-shrink:0;}
.tbg{background:rgba(255,255,255,.07);border-radius:8px;height:7px;overflow:hidden;}
.tfil{
  height:100%;border-radius:8px;
  background:linear-gradient(90deg,var(--green),#a8e063,var(--gold));
  transition:width .15s linear;will-change:width;transform:translateZ(0);
}
.tfil.warn{
  background:linear-gradient(90deg,#ff4e6a,#ff8c42);
  animation:timerPulse .4s ease-in-out infinite;
}
@keyframes timerPulse{0%,100%{opacity:1;box-shadow:0 0 8px rgba(232,52,74,.5);}50%{opacity:.7;box-shadow:0 0 16px rgba(232,52,74,.8);}}
.tnums{display:flex;justify-content:space-between;margin-top:5px;}
.tv{font-family:'Special Gothic Expanded One',sans-serif;font-size:12px;color:rgba(255,255,255,.35);letter-spacing:1px;}
.dbd{font-size:9px;padding:2px 8px;border-radius:8px;font-weight:600;letter-spacing:.5px;}
.de{background:rgba(46,204,113,.12);color:rgba(46,204,113,.85);}
.dm{background:rgba(243,156,18,.12);color:rgba(243,156,18,.85);}
.dh{background:rgba(232,52,74,.12);color:rgba(232,52,74,.85);}

/* ─── QUESTION AREA ─── */
.qa{flex:1;min-height:0;padding:0 18px 4px;display:flex;flex-direction:column;overflow:hidden;gap:8px;}
.qtl{
  font-size:9px;color:rgba(255,255,255,.28);
  text-transform:uppercase;letter-spacing:3.5px;
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.qtl::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06);}
.qtxt{
  font-size:15px;font-weight:500;line-height:1.6;color:var(--tx);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;padding:14px 16px;
  animation:qs .3s ease both;flex-shrink:0;
}
@keyframes qs{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ─── ANSWER BUTTONS ─── */
.agrid{
  padding:4px 18px max(20px,env(safe-area-inset-bottom,20px));
  display:grid;grid-template-columns:1fr 1fr;gap:9px;flex-shrink:0;
}
.ab{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;padding:16px 10px;
  color:rgba(255,255,255,.85);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  text-align:center;cursor:pointer;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .15s,border-color .15s;
  min-height:64px;display:flex;align-items:center;justify-content:center;
  line-height:1.35;animation:qs .35s ease both;
  box-shadow:0 2px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.07);
  position:relative;overflow:hidden;will-change:transform;
}
.ab:nth-child(2){animation-delay:.05s;}
.ab:nth-child(3){animation-delay:.1s;}
.ab:nth-child(4){animation-delay:.15s;}
.ab:not(:disabled):active{
  transform:scale(.93);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
}
.ab.ok{
  background:rgba(46,204,113,.2);
  border-color:rgba(46,204,113,.6);
  color:#6ee7b7;font-weight:700;
  box-shadow:0 0 24px rgba(46,204,113,.25),0 0 0 2px rgba(46,204,113,.15);
  animation:btnOk .45s cubic-bezier(.34,1.56,.64,1) both;
}
.ab.no{
  background:rgba(232,52,74,.15);
  border-color:rgba(232,52,74,.5);
  color:#f87171;
  box-shadow:0 0 16px rgba(232,52,74,.2);
  animation:btnNo .4s ease both;
}
/* Flash écran bonne/mauvaise réponse */
#game-flash{
  position:absolute;inset:0;z-index:50;pointer-events:none;
  opacity:0;border-radius:inherit;
}
#game-flash.flash-ok{animation:flashOk .4s ease both;}
#game-flash.flash-no{animation:flashNo .4s ease both;}
@keyframes flashOk{0%{opacity:0;}15%{opacity:.18;background:radial-gradient(ellipse at 50% 100%,rgba(46,204,113,.5),transparent 70%);}100%{opacity:0;}}
@keyframes flashNo{0%{opacity:0;}15%{opacity:.22;background:radial-gradient(ellipse at 50% 100%,rgba(232,52,74,.5),transparent 70%);}100%{opacity:0;}}
@keyframes btnOk{
  0%{transform:scale(1);}
  30%{transform:scale(1.05);}
  55%{transform:scale(.98);}
  80%{transform:scale(1.02);}
  100%{transform:scale(1);}
}
@keyframes btnNo{
  0%,100%{transform:translateX(0);}
  18%{transform:translateX(-7px);}
  36%{transform:translateX(6px);}
  54%{transform:translateX(-5px);}
  72%{transform:translateX(3px);}
}
/* Ripple effect */
.ab-ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.18);
  transform:scale(0);animation:ripple .55s ease-out both;
  pointer-events:none;
}
@keyframes ripple{to{transform:scale(3.5);opacity:0;}}
.ab:disabled{cursor:default;}
.pmw{flex:1;min-height:0;position:relative;border-radius:15px;overflow:hidden;background:#000;}
.pmw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.pmo{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,rgba(10,10,15,.55) 100%);pointer-events:none;}
.prbar{position:absolute;bottom:8px;left:10px;right:10px;display:flex;gap:4px;}
.prp{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.18);transition:background .4s;}
.prp.on{background:var(--gold);}
.prhint{position:absolute;top:8px;right:9px;background:rgba(10,10,15,.78);border:1px solid rgba(255,255,255,.09);border-radius:7px;padding:3px 8px;font-size:10px;color:var(--mt);letter-spacing:1px;backdrop-filter:blur(8px);}
.photo-meta-overlay{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(10,10,15,.72);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:4px 12px;font-size:11px;color:rgba(255,255,255,.65);letter-spacing:.5px;font-style:italic;backdrop-filter:blur(8px);white-space:nowrap;}
.htxt{font-size:11px;color:var(--mt);text-align:center;margin-top:6px;font-style:italic;flex-shrink:0;}

/* Duo/Solo mode */
.duo-wrap{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.actor-card{flex:1;background:var(--sf);border:1px solid var(--bd);border-radius:14px;overflow:hidden;text-align:center;}
.actor-card img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top;}
.actor-card .aname{font-size:12px;font-weight:600;padding:7px 6px 8px;line-height:1.2;}
.duo-vs{font-family:'Special Gothic Expanded One',sans-serif;font-size:26px;color:var(--mt);letter-spacing:1px;flex-shrink:0;}

/* Box-office ranking */
.bo-list{display:flex;flex-direction:column;gap:10px;width:100%;position:relative;}
.bo-item{
  background:var(--sf);border:1.5px solid var(--bd);border-radius:14px;
  padding:13px 14px;display:flex;align-items:center;gap:12px;
  user-select:none;touch-action:none;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),
             box-shadow .22s ease,
             border-color .2s ease,
             background .2s ease;
  position:relative;
}
.bo-item.is-dragging{
  transform:scale(1.03) rotate(0.8deg);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  border-color:var(--gold);
  background:var(--sf2);
  z-index:10;
  opacity:.92;
}
.bo-item.slot-above{transform:translateY(-6px);}
.bo-item.slot-below{transform:translateY(6px);}
.bo-item.correct-bo{border-color:var(--green);background:rgba(46,204,113,.1);transform:none;}
.bo-item.wrong-bo{border-color:var(--red);background:rgba(232,52,74,.1);transform:none;}
.bo-rank{font-family:'Special Gothic Expanded One',sans-serif;font-size:26px;color:var(--mt);width:26px;flex-shrink:0;line-height:1;}
.bo-poster{width:42px;height:60px;border-radius:8px;object-fit:cover;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.4);filter:none;}
.bo-info{flex:1;min-width:0;}
.bo-title{font-size:14px;font-weight:600;line-height:1.3;white-space:normal;word-break:break-word;}
.bo-year{font-size:11px;color:var(--mt);margin-top:3px;}
.bo-handle{font-size:22px;color:rgba(255,255,255,.3);flex-shrink:0;padding:10px 8px;cursor:grab;line-height:1;min-width:36px;text-align:center;}
.bo-handle:active{cursor:grabbing;}
.bo-confirm{width:100%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#000;border:none;border-radius:14px;padding:15px;font-family:'Special Gothic Expanded One',sans-serif;font-size:19px;letter-spacing:2px;cursor:pointer;margin-top:10px;flex-shrink:0;transition:transform .15s;}
.bo-confirm:active{transform:scale(.97);}

/* Wrong sheet - bigger, scrollable for long film lists */
.ws-scrim{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:8000;pointer-events:none;transition:background .3s;}
.ws-scrim.on{background:rgba(0,0,0,.65);pointer-events:all;}
.wrong-sheet{
  position:fixed;left:0;right:0;bottom:-100%;
  background:var(--sf);
  border-top:2px solid rgba(232,52,74,.5);
  border-radius:26px 26px 0 0;
  padding:20px 22px max(32px,env(safe-area-inset-bottom,32px));
  z-index:8001;
  transition:bottom .32s cubic-bezier(.25,.46,.45,.94);
  max-height:85vh;
  overflow-y:auto;
  will-change:bottom;
}
.wrong-sheet.on{bottom:0;}
.ws-hdl{width:38px;height:4px;background:rgba(255,255,255,.14);border-radius:2px;margin:0 auto 20px;}
.ws-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.ws-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:26px;color:var(--red);letter-spacing:1px;}
.ws-x{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--tx);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ws-x:active{transform:scale(.88);}
.ws-sublbl{font-size:11px;color:var(--mt);text-transform:uppercase;letter-spacing:2px;margin-bottom:11px;}
.ws-ans{background:rgba(46,204,113,.1);border:1.5px solid var(--green);border-radius:15px;padding:16px 18px;font-size:16px;font-weight:600;color:var(--green);line-height:1.55;margin-bottom:18px;word-break:break-word;}
/* BO correct order list inside wrong sheet */
.ws-bo-list{display:flex;flex-direction:column;gap:9px;margin-bottom:18px;}
.ws-bo-item{display:flex;align-items:center;gap:12px;background:rgba(46,204,113,.07);border:1.5px solid rgba(46,204,113,.25);border-radius:13px;padding:11px 14px;}
.ws-bo-num{font-family:'Special Gothic Expanded One',sans-serif;font-size:24px;color:var(--green);width:24px;flex-shrink:0;}
.ws-bo-img{width:36px;height:52px;border-radius:7px;object-fit:cover;flex-shrink:0;}
.ws-bo-name{font-size:14px;font-weight:600;line-height:1.3;flex:1;}
.ws-bo-rev{font-size:11px;color:var(--mt);margin-top:2px;}
.ws-btn{width:100%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#000;border:none;border-radius:15px;padding:17px;font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;letter-spacing:2px;cursor:pointer;transition:transform .15s;}
.ws-btn:active{transform:scale(.97);}

/* -- R-PLIQUE CULTE -- */
.rq-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0 4px;width:100%;}
.rq-quote-box{background:var(--sf);border:1.5px solid rgba(245,200,66,.25);border-radius:18px;padding:20px 22px;width:100%;position:relative;}
.rq-guillemets{font-family:'Special Gothic Expanded One',sans-serif;font-size:54px;color:rgba(245,200,66,.18);line-height:1;position:absolute;top:6px;left:14px;pointer-events:none;}
.rq-text{font-size:16px;font-weight:500;line-height:1.7;color:var(--tx);text-align:center;padding:10px 8px 0;min-height:60px;font-style:italic;}
.rq-cursor{display:inline-block;width:2px;height:18px;background:var(--gold);margin-left:2px;vertical-align:middle;animation:blink .9s step-end infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
.rq-hint{display:flex;align-items:center;gap:8px;background:rgba(74,158,255,.08);border:1px solid rgba(74,158,255,.2);border-radius:12px;padding:9px 14px;width:100%;font-size:12px;color:var(--blue);opacity:0;transition:opacity .6s ease;}
.rq-hint.on{opacity:1;}
.rq-hint-icon{font-size:16px;flex-shrink:0;}
.rq-film-poster{width:100%;border-radius:14px;overflow:hidden;background:var(--sf2);flex-shrink:1;min-height:0;max-height:200px;position:relative;}
.rq-film-poster img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:blur(18px) brightness(.6);transition:filter 1.2s ease;}
.rq-film-poster img.reveal{filter:blur(0) brightness(1);}
.rq-poster-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(10,10,15,.7) 100%);}

/* -- QUI EST-CE ? -- */
.actor-mystery-wrap{width:100%;position:relative;border-radius:16px;overflow:hidden;background:var(--sf2);flex-shrink:1;min-height:0;}
.actor-mystery-wrap img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;display:block;transition:filter 1.8s ease;}
.actor-pips{position:absolute;bottom:8px;left:10px;right:10px;display:flex;gap:4px;}
.actor-pip{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.2);transition:background .4s;}
.actor-pip.on{background:var(--gold);}
.actor-hint{position:absolute;top:8px;right:9px;background:rgba(10,10,15,.8);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:3px 8px;font-size:10px;color:var(--mt);letter-spacing:1px;}

/* -- BANDE-ANNONCE -- */
.ba-film-card{background:var(--sf);border:1px solid var(--bd);border-radius:16px;overflow:hidden;margin-bottom:10px;flex-shrink:0;}

/* Year slider */
.yslider-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 2px;width:100%;}
.ydisp{font-family:'Special Gothic Expanded One',sans-serif;font-size:64px;color:var(--gold);letter-spacing:5px;line-height:1;text-shadow:0 0 30px rgba(245,200,66,.35);}
.yfilm{font-size:12px;color:var(--mt);text-align:center;}
input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:99px;outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f5c842,#e8a800);cursor:grab;box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 4px rgba(245,200,66,.25);transition:transform .1s;}
input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.15);box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 6px rgba(245,200,66,.3);}
input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f5c842,#e8a800);cursor:grab;border:none;box-shadow:0 2px 8px rgba(0,0,0,.4),0 0 0 4px rgba(245,200,66,.25);}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:rgba(255,255,255,.1);}

/* answers grid */
/* agrid/ab — see definitions above */
/* -- MODE DEVINE LA BO (indices texte) -- */
.bo-clues-wrap{
  width:100%;display:flex;flex-direction:column;gap:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;padding:16px;
  backdrop-filter:blur(12px);
}
.bo-clues-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.bo-clues-title{font-size:13px;font-weight:600;color:rgba(255,255,255,.7);}
.bo-clues-sub{font-size:11px;color:var(--gold);font-weight:600;}
.bo-clues-list{display:flex;flex-direction:column;gap:8px;min-height:100px;}
.bo-clue-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  animation:qs .35s ease both;
}
.bo-clue-item.bo-clue-new{
  border-color:rgba(245,200,66,.3);
  background:rgba(245,200,66,.07);
  animation:clueappear .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes clueappear{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}
.bo-clue-num{
  width:22px;height:22px;border-radius:50%;
  background:rgba(245,200,66,.15);border:1px solid rgba(245,200,66,.3);
  color:var(--gold);font-family:'Special Gothic Expanded One',sans-serif;font-size:13px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.bo-clue-txt{font-size:13px;color:rgba(255,255,255,.85);line-height:1.4;}
.bo-clues-bar{display:flex;gap:4px;margin-top:4px;}
.bo-bar-pip{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.12);transition:background .4s;}
.bo-bar-pip.on{background:var(--gold);}

/* -- Mode Qui est-ce ? -- */
.acteur-wrap{width:100%;position:relative;border-radius:15px;overflow:hidden;background:var(--sf2);flex:1;min-height:0;}
.acteur-wrap img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;position:absolute;inset:0;}
.acteur-reveal-bar{position:absolute;bottom:8px;left:10px;right:10px;display:flex;gap:4px;}

/* -- Mode Bande-annonce -- */
.ba-film-card{background:var(--sf);border:1px solid var(--bd);border-radius:16px;overflow:hidden;margin-bottom:10px;flex-shrink:0;}
.ba-poster-row{display:flex;gap:12px;align-items:center;padding:12px;}
.ba-poster{width:60px;height:88px;border-radius:8px;object-fit:cover;flex-shrink:0;}
.ba-film-info{flex:1;}
.ba-film-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;letter-spacing:1px;color:var(--gold);line-height:1.2;margin-bottom:4px;}
.ba-film-sub{font-size:12px;color:var(--mt);}
.ba-subq-bar{display:flex;gap:6px;padding:0 12px 12px;}
.ba-pip{flex:1;height:4px;border-radius:2px;background:var(--sf2);transition:background .3s;}
.ba-pip.done-ok{background:var(--green);}
.ba-pip.done-no{background:var(--red);}
.ba-pip.active{background:var(--gold);animation:bapulse 1s ease infinite;}
@keyframes bapulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.ba-subq-label{font-size:11px;color:var(--mt);text-align:center;margin-bottom:8px;letter-spacing:1px;text-transform:uppercase;flex-shrink:0;}
.ba-bonus{font-family:'Special Gothic Expanded One',sans-serif;font-size:28px;color:var(--gold);text-align:center;margin:8px 0 4px;animation:popin .4s cubic-bezier(.36,.07,.19,.97) both;}
#lvlup{align-items:center;justify-content:center;overflow:hidden;
  background:#000;}
/* Rayons lumineux */
.lu-rays{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0;}
.lu-rays::before{content:'';position:absolute;width:600px;height:600px;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(245,200,66,.06) 8deg,transparent 16deg,rgba(245,200,66,.04) 24deg,transparent 32deg,rgba(245,200,66,.07) 40deg,transparent 48deg,rgba(245,200,66,.03) 56deg,transparent 64deg,rgba(245,200,66,.06) 72deg,transparent 80deg,rgba(245,200,66,.04) 88deg,transparent 96deg,rgba(245,200,66,.07) 104deg,transparent 112deg,rgba(245,200,66,.03) 120deg,transparent 128deg,rgba(245,200,66,.06) 136deg,transparent 144deg,rgba(245,200,66,.04) 152deg,transparent 160deg,rgba(245,200,66,.07) 168deg,transparent 176deg,rgba(245,200,66,.03) 184deg,transparent 192deg,rgba(245,200,66,.06) 200deg,transparent 208deg,rgba(245,200,66,.04) 216deg,transparent 224deg,rgba(245,200,66,.07) 232deg,transparent 240deg,rgba(245,200,66,.03) 248deg,transparent 256deg,rgba(245,200,66,.06) 264deg,transparent 272deg,rgba(245,200,66,.04) 280deg,transparent 288deg,rgba(245,200,66,.07) 296deg,transparent 304deg,rgba(245,200,66,.03) 312deg,transparent 320deg,rgba(245,200,66,.06) 328deg,transparent 336deg,rgba(245,200,66,.04) 344deg,transparent 352deg,rgba(245,200,66,.06) 612deg);
  animation:luRaysSpin 12s linear infinite;border-radius:50%;}
@keyframes luRaysSpin{to{transform:rotate(612deg);}}
/* Halo doré central */
.lu-glow{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 50% at 50% 45%,rgba(245,200,66,.22) 0%,rgba(245,200,66,.08) 35%,transparent 70%);}
/* Avatar */
.lu-avatar-wrap{position:relative;z-index:2;margin-bottom:16px;animation:luAvatarIn .7s cubic-bezier(.34,1.56,.64,1) .1s both;}
@keyframes luAvatarIn{from{transform:scale(0) rotate(-20deg);opacity:0;}80%{transform:scale(1.1) rotate(3deg);}to{transform:scale(1) rotate(0deg);opacity:1;}}
.lu-avatar{width:90px;height:90px;border-radius:24px;border:3px solid rgba(245,200,66,.6);overflow:hidden;background:rgba(245,200,66,.1);display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(245,200,66,.4),0 0 80px rgba(245,200,66,.15);}
/* Badge NIVEAU SUP */
.lu-badge{position:relative;z-index:2;background:linear-gradient(100deg,#f5c842,#ffe066,#e8a800);color:#000;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:11px;letter-spacing:3px;
  padding:4px 14px;border-radius:20px;margin-bottom:10px;
  animation:luBadgeIn .5s cubic-bezier(.34,1.56,.64,1) .4s both;
  box-shadow:0 4px 20px rgba(245,200,66,.5);}
@keyframes luBadgeIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
.lut{font-family:'Special Gothic Expanded One',sans-serif;font-size:52px;letter-spacing:4px;
  background:linear-gradient(135deg,#fff9e6,#f5c842,#e8a800,#fff9e6);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:luTitleIn .6s ease .5s both,luShimmer 3s linear 1s infinite;
  text-align:center;position:relative;z-index:2;line-height:1;}
@keyframes luTitleIn{from{opacity:0;transform:translateY(16px) scale(.9);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes luShimmer{to{background-position:200% center;}}
.lusb{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:20px;animation:fs .5s ease .65s both;text-align:center;position:relative;z-index:2;}
.lubig{position:relative;z-index:2;
  background:linear-gradient(135deg,rgba(245,200,66,.12),rgba(232,168,0,.06));
  border:1.5px solid rgba(245,200,66,.35);border-radius:24px;padding:20px 32px;
  text-align:center;margin-bottom:22px;animation:luCardIn .6s cubic-bezier(.34,1.56,.64,1) .7s both;
  box-shadow:0 0 40px rgba(245,200,66,.1),inset 0 1px 0 rgba(255,255,255,.08);}
@keyframes luCardIn{from{transform:translateY(30px) scale(.92);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
.lubig-i{display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.lubig-n{font-family:'Special Gothic Expanded One',sans-serif;font-size:28px;letter-spacing:3px;color:var(--gold);}
.lubig-d{font-size:12px;color:rgba(255,255,255,.4);margin-top:5px;line-height:1.5;}
.lucnt{background:linear-gradient(100deg,#f5c842,#ffdc6b 45%,#e8a800);color:#000;
  border:none;border-radius:18px;padding:16px 48px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:22px;letter-spacing:3px;cursor:pointer;
  animation:luBtnIn .5s cubic-bezier(.34,1.56,.64,1) .95s both;
  box-shadow:0 8px 32px rgba(245,200,66,.5);position:relative;z-index:2;overflow:hidden;}
@keyframes luBtnIn{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.lucnt::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:btnglare 2.5s ease 1.2s infinite;}
.lucnt:active{transform:scale(.97);}
.cfwrap{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:200;}
.cfp{position:absolute;border-radius:2px;animation:cff linear forwards;}
@keyframes cff{0%{transform:translateY(-20px) rotate(0deg);opacity:1;}100%{transform:translateY(950px) rotate(540deg);opacity:0;}}
@keyframes fs{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* HELP MODAL */
.help-over{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:600;display:none;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;}
body.nav-visible .help-over{padding-bottom:var(--nav-h);}
.help-over.on{display:flex;opacity:1;pointer-events:all;}
.help-sh{background:var(--sf);border-radius:24px 24px 0 0;padding:20px 20px max(calc(var(--nav-h) + 18px),calc(env(safe-area-inset-bottom,0px) + var(--nav-h) + 12px));width:100%;max-width:500px;max-height:calc(88vh - var(--nav-h));overflow-y:auto;transform:translateY(50px);transition:transform .3s cubic-bezier(.25,.46,.45,.94);will-change:transform;}
.help-over.on .help-sh{transform:translateY(0);}
.help-hdl{width:36px;height:4px;border-radius:2px;background:var(--sf2);margin:0 auto 16px;}
.help-head{margin-bottom:16px;}
.help-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:24px;letter-spacing:2px;color:var(--gold);}
.help-x{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:var(--tx);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.help-x:active{transform:scale(.88);}
.help-intro{font-size:13px;color:var(--mt);line-height:1.6;margin-bottom:18px;}
.help-sep{font-size:10px;color:var(--mt);text-transform:uppercase;letter-spacing:3px;margin:14px 0 10px;}
.help-mode{display:flex;gap:12px;background:var(--sf2);border-radius:14px;padding:13px 14px;margin-bottom:8px;}
.help-mode-icon{font-size:24px;flex-shrink:0;margin-top:1px;}
.help-mode-name{font-family:'Special Gothic Expanded One',sans-serif;font-size:16px;letter-spacing:1px;color:var(--gold);margin-bottom:3px;}
.help-mode-desc{font-size:12px;color:rgba(255,255,255,.75);line-height:1.5;}
.help-tip{display:flex;gap:10px;background:rgba(245,200,66,.06);border:1px solid rgba(245,200,66,.18);border-radius:12px;padding:12px 14px;margin-bottom:8px;}
.help-tip-icon{font-size:17px;flex-shrink:0;}
.help-tip-text{font-size:12px;color:var(--tx);line-height:1.5;}
.help-close{width:100%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#000;border:none;border-radius:14px;padding:15px;font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;letter-spacing:2px;cursor:pointer;margin-top:6px;}
.help-close:active{transform:scale(.97);}

/* AVATAR PICKER */
.av-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px;}
.av-opt{aspect-ratio:1;border-radius:14px;border:2px solid transparent;display:flex;align-items:center;justify-content:center;font-size:26px;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);background:var(--sf2);}
.av-opt:active{transform:scale(.88);}
.av-opt.av-sel{border-color:var(--gold);transform:scale(1.12);}
.av-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-bottom:10px;}
.av-cats::-webkit-scrollbar{display:none;}
.av-cat{flex-shrink:0;padding:5px 12px;border-radius:16px;font-size:11px;font-weight:600;color:rgba(255,255,255,.45);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:all .18s;white-space:nowrap;}
.av-cat.on{background:rgba(245,200,66,.15);border-color:rgba(245,200,66,.4);color:var(--gold);}
.av-colors{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.av-color{width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .2s;flex-shrink:0;}
.av-color.on{border-color:#fff;transform:scale(1.18);}

/* BADGE MODAL */
.mover{position:fixed;inset:0;bottom:0;background:rgba(0,0,0,.75);z-index:500;display:none;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;}
/* When nav is visible, modals must not render content behind it */
body.nav-visible .mover{padding-bottom:var(--nav-h);}
.mover.on{display:flex;opacity:1;pointer-events:all;}
.msh{
  background:var(--sf);
  border-radius:22px 22px 0 0;
  padding:22px 22px max(16px, env(safe-area-inset-bottom,8px));
  width:100%;max-width:500px;
  transform:translateY(40px);
  transition:transform .3s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
  position:relative;isolation:isolate;overflow:hidden;
}
.msh::before{
  content:'';
  position:absolute;inset:0;
  border-radius:22px 22px 0 0;
  background:
    radial-gradient(ellipse 120% 55% at 10% 0%,  color-mix(in srgb,var(--msh-color,transparent) 42%,transparent) 0%,transparent 60%),
    radial-gradient(ellipse 90% 40% at 90% 10%,  color-mix(in srgb,var(--msh-color,transparent) 28%,transparent) 0%,transparent 55%),
    radial-gradient(ellipse 80% 30% at 50% 20%,  color-mix(in srgb,var(--msh-color,transparent) 16%,transparent) 0%,transparent 60%);
  pointer-events:none;
  z-index:0;
  transition:background .3s;
}

.msh>*{position:relative;z-index:1;}

.mover.on .msh{transform:translateY(0);}
.mhdl{width:34px;height:4px;border-radius:2px;background:var(--sf2);margin:0 auto 16px;}
.mbi{font-size:50px;text-align:center;margin-bottom:8px;}
.mbn{font-family:'Special Gothic Expanded One',sans-serif;font-size:24px;letter-spacing:2px;color:var(--gold);text-align:center;margin-bottom:3px;}
.mbd{font-size:14px;color:var(--mt);text-align:center;line-height:1.5;margin-bottom:5px;}
.mbs{font-size:12px;text-align:center;margin-bottom:16px;}
.mbcl{width:100%;background:var(--sf2);border:1px solid var(--bd);border-radius:13px;padding:12px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--tx);cursor:pointer;margin-top:20px;}

/* ══ HM BONUS VIDÉO ══ */
#hm-bonus-modal{
  position:fixed;inset:0;z-index:800;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.92);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
  padding:max(env(safe-area-inset-top),20px) 20px max(env(safe-area-inset-bottom),20px);
}
#hm-bonus-modal.on{display:flex;opacity:1;pointer-events:all;}
.hm-bonus-inner{
  width:100%;max-width:460px;
  background:#0a0815;
  border:1px solid rgba(168,85,247,.3);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 0 80px rgba(168,85,247,.2),0 32px 80px rgba(0,0,0,.8);
  animation:hmBonusPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes hmBonusPop{
  0%{opacity:0;transform:scale(.85) translateY(30px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
.hm-bonus-header{
  padding:20px 20px 14px;
  text-align:center;
  background:linear-gradient(180deg,rgba(168,85,247,.12) 0%,transparent 100%);
  border-bottom:1px solid rgba(168,85,247,.12);
}
.hm-bonus-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.3);
  border-radius:20px;padding:4px 14px;
  font-size:9px;letter-spacing:3px;color:#c084fc;
  font-family:'Special Gothic Expanded One',sans-serif;margin-bottom:10px;
}
.hm-bonus-title{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:26px;
  letter-spacing:2px;color:#fff;line-height:1;margin-bottom:6px;
}
.hm-bonus-sub{
  font-size:12px;color:rgba(255,255,255,.4);line-height:1.5;
}
.hm-bonus-video-wrap{
  position:relative;width:100%;
  background:#000;
}
.hm-bonus-video-wrap video{
  width:100%;display:block;max-height:50vh;object-fit:cover;
}
.hm-bonus-footer{
  padding:16px 20px;
  display:flex;flex-direction:column;gap:10px;
}
.hm-bonus-close{
  width:100%;background:linear-gradient(135deg,rgba(130,60,220,.8),rgba(168,85,247,.9));
  color:#fff;border:none;border-radius:14px;padding:14px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:17px;letter-spacing:2px;
  cursor:pointer;transition:transform .15s;
}
.hm-bonus-close:active{transform:scale(.97);}
/* ══ HM BONUS VIDÉO (fin) ══ */

/* ══════════════════════════════════════════
   SALLE DE PROJECTION SECRÈTE
══════════════════════════════════════════ */
#hm-secret-room{
  position:fixed;inset:0;z-index:9000;
  background:#000;
  display:none;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .6s ease;
  overflow:hidden;
  max-width:none !important;
}
#hm-secret-room.on{display:flex;opacity:1;pointer-events:all;}

#hm-secret-room::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size:180px 180px;
  animation:secretGrain .08s steps(1) infinite;
  opacity:.55;mix-blend-mode:overlay;
}
@keyframes secretGrain{
  0%{background-position:0 0;}10%{background-position:-5% -10%;}20%{background-position:-15% 5%;}
  30%{background-position:7% -25%;}40%{background-position:-5% 25%;}50%{background-position:-15% 10%;}
  60%{background-position:15% 0%;}70%{background-position:0 15%;}80%{background-position:3% 35%;}
  90%{background-position:-10% 10%;}100%{background-position:0 0;}
}
.hm-secret-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    /* Or projecteur — haut centre */
    radial-gradient(ellipse 60% 35% at 50% 0%,  rgba(220,160,20,.12) 0%, transparent 58%),
    /* Rouge sombre — haut gauche */
    radial-gradient(ellipse 45% 40% at 10% 20%, rgba(150,15,25,.25) 0%, transparent 58%),
    /* Bordeaux — haut droit */
    radial-gradient(ellipse 38% 36% at 88% 15%, rgba(130,20,20,.20) 0%, transparent 56%),
    /* Violet secret — bas gauche */
    radial-gradient(ellipse 40% 38% at 12% 75%, rgba(80,10,100,.18) 0%, transparent 56%),
    /* Fond gradient sombre */
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(30,10,60,.9) 0%, transparent 70%),
    linear-gradient(180deg, #04010a 0%, #06020e 40%, #080416 100%);
}
.hm-secret-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 90% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.7) 100%);
}
.hm-secret-projector-beam{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60px;height:65%;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,240,180,.12) 0%,transparent 100%);
  filter:blur(12px);
  animation:beamFlicker 3s ease-in-out infinite;
}
@keyframes beamFlicker{
  0%,100%{opacity:.5;width:50px;}25%{opacity:.8;width:70px;}50%{opacity:.4;width:40px;}75%{opacity:.7;width:65px;}
}
.hm-secret-curtain-left,.hm-secret-curtain-right{
  position:absolute;top:0;bottom:0;z-index:20;width:58%;
  pointer-events:none;
  transition:transform 1.5s cubic-bezier(.4,0,.1,1);
  /* Texture velours profond */
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,.15) 3px,
    rgba(0,0,0,.15) 4px
  );
}
.hm-secret-curtain-left{
  left:0;
  background-color:#2a0806;
  background-image:
    repeating-linear-gradient(90deg,transparent 0,transparent 3px,rgba(0,0,0,.2) 3px,rgba(0,0,0,.2) 4px),
    linear-gradient(to right,#4a1410 0%,#2a0806 60%,#1a0404 100%);
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
  box-shadow:inset -8px 0 20px rgba(0,0,0,.6);
}
.hm-secret-curtain-right{
  right:0;
  background-color:#2a0806;
  background-image:
    repeating-linear-gradient(90deg,transparent 0,transparent 3px,rgba(0,0,0,.2) 3px,rgba(0,0,0,.2) 4px),
    linear-gradient(to left,#4a1410 0%,#2a0806 60%,#1a0404 100%);
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);
  box-shadow:inset 8px 0 20px rgba(0,0,0,.6);
}
.hm-secret-curtain-left.open{transform:translateX(-110%);}
.hm-secret-curtain-right.open{transform:translateX(110%);}



.hm-secret-topbar{
  position:relative;z-index:10;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:max(env(safe-area-inset-top),18px) 18px 12px;
  background:linear-gradient(to bottom,rgba(0,0,0,.85),transparent);
}
.hm-secret-close{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.6);cursor:pointer;transition:all .18s;flex-shrink:0;
}
.hm-secret-close:active{background:rgba(255,255,255,.15);transform:scale(.9);}
.hm-secret-wordmark{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:12px;letter-spacing:3.5px;
  color:rgba(255,200,80,.45);
  display:flex;align-items:center;gap:7px;
}
.hm-secret-wordmark-dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,200,80,.6);box-shadow:0 0 8px rgba(255,200,80,.5);
  animation:secretPulse 2s ease-in-out infinite;
}
@keyframes secretPulse{
  0%,100%{opacity:.5;box-shadow:0 0 6px rgba(255,200,80,.3);}
  50%{opacity:1;box-shadow:0 0 14px rgba(255,200,80,.7);}
}
/* Tabs navigation */
.hm-secret-tabs{
  position:relative;z-index:10;flex-shrink:0;
  display:flex;padding:0 18px 0;gap:4px;
  border-bottom:1px solid rgba(255,200,80,.06);
  background:rgba(0,0,0,.3);backdrop-filter:blur(10px);
}
.hm-secret-tab{
  flex:1;padding:9px 4px;text-align:center;
  font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.25);
  font-family:'Special Gothic Expanded One',sans-serif;
  border-bottom:2px solid transparent;cursor:pointer;transition:all .2s;
  background:none;border-left:none;border-right:none;border-top:none;
}
.hm-secret-tab.active{color:rgba(255,200,80,.8);border-bottom-color:rgba(255,200,80,.6);}

.hm-secret-scroll{
  position:relative;z-index:5;
  flex:1;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:20px 0 max(60px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
/* Panel vidéo : gère son propre scroll — désactive le parent */
.hm-secret-scroll.vid-active{overflow:hidden;padding:0;}
.hm-secret-panel{display:none;flex:1;min-height:0;}
.hm-secret-panel.active{display:flex;flex-direction:column;flex:1;min-height:0;}
/* Panels non-vidéo gardent leur padding */
#hm-secret-panel-1.active,#hm-secret-panel-2.active,#hm-secret-panel-3.active{display:block;}

/* Titres sections */
.hm-secret-stitle{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:10px;letter-spacing:4px;
  color:rgba(255,200,80,.3);text-align:center;
  margin:0 20px 18px;
  display:flex;align-items:center;gap:10px;
}
.hm-secret-stitle::before,.hm-secret-stitle::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,200,80,.15),transparent);
}

/* ─── PANEL 1 : VIDÉO ─── */
.hm-secret-screen-frame{
  position:relative;margin:0 20px 10px;border-radius:12px;overflow:hidden;
  border:1.5px solid rgba(255,200,80,.12);
  box-shadow:0 0 50px rgba(255,200,80,.05),inset 0 0 20px rgba(0,0,0,.4);
}
.hm-secret-screen-frame::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse 100% 100% at 50% 50%,transparent 60%,rgba(0,0,0,.35) 100%);
}
.hm-secret-video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000;}
/* play overlay supprimé */
.hm-secret-video-label{display:none;}

/* ── PANEL 0 : LECTEUR BANDES-ANNONCES style Jukebox ── */
.hm-vid-player-wrap{
  position:relative;width:100%;background:#000;
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,200,80,.15);
  aspect-ratio:16/9;
  box-shadow:0 8px 32px rgba(0,0,0,.7),0 0 40px rgba(255,200,80,.04);
  margin:0 0 10px;flex-shrink:0;
}
.hm-vid-player-wrap::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse 100% 100% at 50% 50%,transparent 65%,rgba(0,0,0,.3) 100%);
}
/* Contrôles custom */
.hm-vid-controls{
  position:absolute;bottom:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;
  background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 100%);
  opacity:0;transition:opacity .22s;
}
.hm-vid-player-wrap:hover .hm-vid-controls,
.hm-vid-player-wrap.show-controls .hm-vid-controls{opacity:1;}
.hm-vid-ctrl-btn{
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;flex-shrink:0;
  transition:background .15s,transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.hm-vid-ctrl-btn:active{background:rgba(255,200,80,.25);transform:scale(.9);}
.hm-vid-progress{
  flex:1;margin:0 10px;height:4px;border-radius:4px;
  background:rgba(255,255,255,.18);cursor:pointer;position:relative;
}
.hm-vid-progress-fill{
  height:100%;border-radius:4px;
  background:linear-gradient(90deg,#f5c842,#ffb800);
  width:0%;pointer-events:none;transition:width .1s linear;
}
.hm-vid-time{
  font-size:9px;color:rgba(255,255,255,.6);letter-spacing:.5px;
  font-family:'Special Gothic Expanded One',sans-serif;min-width:32px;text-align:right;
}
.hm-vid-player-wrap video{width:100%;height:100%;display:block;object-fit:contain;background:#000;}
/* Placeholder quand aucune vidéo n'est sélectionnée */
.hm-vid-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  color:rgba(255,200,80,.25);pointer-events:none;z-index:1;
}
.hm-vid-placeholder-icon{font-size:36px;opacity:.5;}
.hm-vid-placeholder-text{font-family:'Special Gothic Expanded One',sans-serif;font-size:11px;letter-spacing:2px;}
/* Now playing info */
.hm-vid-now{margin-bottom:10px;padding:0 2px;flex-shrink:0;}
.hm-vid-now-title{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:17px;letter-spacing:1.5px;
  color:rgba(255,200,80,.9);line-height:1.1;margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hm-vid-now-count{font-size:10px;color:rgba(255,255,255,.25);letter-spacing:.5px;}
.hm-cesoir-card{
  background:linear-gradient(150deg,rgba(18,8,32,.97),rgba(10,4,20,.95));
  border:1px solid rgba(168,85,247,.22);border-radius:22px;
  padding:22px;position:relative;overflow:hidden;
  box-shadow:0 2px 20px rgba(0,0,0,.3);
}
.hm-cesoir-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.45),transparent);}
.hm-cesoir-card::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 50% at 50% 0%,rgba(168,85,247,.06) 0%,transparent 65%);
  pointer-events:none;}
.hm-cesoir-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;position:relative;z-index:1;}
.hm-cesoir-icon{width:48px;height:48px;border-radius:14px;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.25);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.hm-cesoir-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:21px;letter-spacing:2px;color:#c084fc;line-height:1;}
.hm-cesoir-sub{font-size:12px;color:rgba(255,255,255,.3);letter-spacing:.5px;margin-top:3px;}
.hm-cesoir-state{font-size:13px;color:rgba(255,255,255,.35);line-height:1.6;margin-bottom:14px;position:relative;z-index:1;}
.hm-cesoir-result{display:none;margin-bottom:14px;position:relative;z-index:1;}
.hm-cesoir-result.on{display:block;}
.hm-cesoir-label{font-size:10px;letter-spacing:3px;color:rgba(192,132,252,.5);margin-bottom:12px;font-family:'Special Gothic Expanded One',sans-serif;}
.hm-cesoir-film-wrap{
  display:flex;align-items:flex-start;gap:16px;
  background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.15);
  border-radius:16px;padding:16px;transition:background .2s,border-color .2s;
  cursor:pointer;
}
.hm-cesoir-film-wrap:active{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.3);}
.hm-cesoir-poster-wrap{width:100px;height:150px;border-radius:12px;overflow:hidden;flex-shrink:0;background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2);}
.hm-cesoir-poster-wrap img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;}
.hm-cesoir-film-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px;}
.hm-cesoir-film-name{font-family:'Special Gothic Expanded One',sans-serif;font-size:25px;letter-spacing:1px;color:#e9d5ff;line-height:1.1;}
.hm-cesoir-film-meta{font-size:13px;color:rgba(192,132,252,.55);letter-spacing:.5px;}
.hm-cesoir-cta{font-size:13px;color:rgba(192,132,252,.7);letter-spacing:1px;font-weight:600;margin-top:4px;}
.hm-cesoir-why-block{
  background:rgba(168,85,247,.07);border:1px solid rgba(168,85,247,.15);
  border-radius:14px;padding:16px 18px;margin-top:14px;
}
.hm-cesoir-why-label{font-size:9px;letter-spacing:2.5px;color:rgba(192,132,252,.5);font-family:'Special Gothic Expanded One',sans-serif;margin-bottom:10px;}
.hm-cesoir-film-why{font-size:15px;color:rgba(255,255,255,.7);line-height:1.7;}
.hm-cesoir-vibe{font-size:13px;color:rgba(192,132,252,.55);letter-spacing:.3px;margin-top:12px;font-style:italic;text-align:center;padding:0 8px;}
.hm-cesoir-mood-label{
  font-size:10px;letter-spacing:2.5px;color:rgba(192,132,252,.5);
  font-family:'Special Gothic Expanded One',sans-serif;margin-bottom:14px;text-align:center;
}
.hm-cesoir-moods{
  display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px;justify-content:center;
}
.hm-cesoir-mood-btn{
  background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);
  border-radius:20px;padding:10px 16px;color:rgba(192,132,252,.6);
  font-size:13px;cursor:pointer;transition:all .18s;
  font-family:'DM Sans',sans-serif;letter-spacing:.3px;
}
.hm-cesoir-mood-btn:active{transform:scale(.95);}
.hm-cesoir-mood-btn.selected{
  background:rgba(168,85,247,.22);border-color:rgba(192,132,252,.6);
  color:#e9d5ff;font-weight:600;
  box-shadow:0 0 12px rgba(168,85,247,.25);
}
.hm-cesoir-btn{
  width:100%;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.3);
  border-radius:14px;padding:14px;color:#c084fc;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:15px;letter-spacing:2px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,transform .1s;position:relative;z-index:1;
}
.hm-cesoir-btn:active{background:rgba(168,85,247,.22);transform:scale(.97);}

/* Swipe hints HM */
.hm-swipe-hint{position:absolute;top:50%;transform:translateY(-50%);z-index:4;pointer-events:none;opacity:0;transition:opacity .2s;}
.hm-swipe-hint.left{left:10px;}
.hm-swipe-hint.right{right:10px;}
.hm-swipe-hint svg{color:rgba(255,255,255,.5);width:20px;height:20px;}
/* Liste des bandes-annonces */
.hm-vid-list-wrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.hm-trailer-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 6px;border-radius:12px;cursor:pointer;
  transition:background .15s;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.hm-trailer-row:active{background:rgba(255,200,80,.06);}
.hm-trailer-row.active{background:rgba(255,200,80,.07);}
.hm-trailer-row.active .hm-trailer-title{color:rgba(255,200,80,.95);}
/* Miniature style jukebox */
.hm-trailer-thumb{
  width:54px;height:36px;border-radius:8px;flex-shrink:0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,200,80,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;position:relative;overflow:hidden;
  transition:border-color .15s;
}
.hm-trailer-row.active .hm-trailer-thumb{border-color:rgba(255,200,80,.4);}
.hm-trailer-play-ov{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.4);opacity:0;transition:opacity .15s;
}
.hm-trailer-row:active .hm-trailer-play-ov,.hm-trailer-row.active .hm-trailer-play-ov{opacity:1;}
.hm-trailer-row.active .hm-trailer-play-ov{background:rgba(255,200,80,.18);}
/* Equalizer animé */
.hm-vid-eq{display:flex;align-items:flex-end;gap:2px;height:13px;flex-shrink:0;}
.hm-vid-eq span{width:3px;border-radius:1px;background:rgba(255,200,80,.8);animation:jkEq .7s ease-in-out infinite alternate;}
.hm-vid-eq span:nth-child(2){animation-delay:.18s;animation-duration:.9s;}
.hm-vid-eq span:nth-child(3){animation-delay:.35s;animation-duration:.6s;}
/* Info texte */
.hm-trailer-info{flex:1;min-width:0;}
.hm-trailer-title{font-size:13px;font-weight:500;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s;}
.hm-trailer-num{font-size:10px;color:rgba(255,255,255,.24);margin-top:1px;letter-spacing:.3px;}
/* Ligne exclusive hiddenmovies.mp4 */
.hm-trailer-special{
  border-bottom:1px solid rgba(255,200,80,.12) !important;
  margin-bottom:2px;
}
.hm-trailer-special .hm-trailer-title{color:rgba(255,200,80,.85) !important;}
.hm-secret-filmstrip{
  height:16px;margin:0 20px;
  background:repeating-linear-gradient(90deg,rgba(255,200,80,.07) 0px,rgba(255,200,80,.07) 3px,transparent 3px,transparent 16px),
    linear-gradient(180deg,rgba(255,200,80,.03) 0%,transparent 100%);
  border-radius:0 0 6px 6px;
  border:1px solid rgba(255,200,80,.06);border-top:none;
}

/* ─── PANEL 2 : COULISSES ─── */
.hm-secret-coulisses{padding:0 20px;}
.hm-secret-manifesto{
  font-size:15px;color:rgba(255,255,255,.62);line-height:1.85;
  border-left:2px solid rgba(255,200,80,.2);padding-left:14px;
  margin-bottom:20px;font-style:italic;
}
.hm-secret-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px;}
.hm-secret-stat{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,200,80,.07);
  border-radius:14px;padding:14px;text-align:center;
}
.hm-secret-stat-val{font-family:'Special Gothic Expanded One',sans-serif;font-size:30px;color:rgba(255,200,80,.8);letter-spacing:1px;line-height:1;margin-bottom:3px;}
.hm-secret-stat-lbl{font-size:10px;color:rgba(255,255,255,.28);letter-spacing:2px;text-transform:uppercase;}
.hm-secret-timeline{display:flex;flex-direction:column;gap:0;}
.hm-secret-tl-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.hm-secret-tl-item:last-child{border-bottom:none;}
.hm-secret-tl-dot{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:rgba(255,200,80,.07);border:1px solid rgba(255,200,80,.18);
  display:flex;align-items:center;justify-content:center;font-size:14px;margin-top:2px;
}
.hm-secret-tl-year{font-family:'Special Gothic Expanded One',sans-serif;font-size:14px;letter-spacing:1px;color:rgba(255,200,80,.55);margin-bottom:3px;}
.hm-secret-tl-text{font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.65;}

/* ─── PANEL 3 : FILM SECRET ─── */
.hm-secret-film-wrap{padding:0 20px;}
.hm-secret-film-card{
  position:relative;background:rgba(255,255,255,.03);border:1px solid rgba(255,200,80,.1);
  border-radius:18px;overflow:hidden;padding:18px;
  display:flex;gap:16px;align-items:flex-start;
}
.hm-secret-film-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,200,80,.25),transparent);
}
.hm-secret-film-poster-wrap{
  flex-shrink:0;width:68px;height:102px;border-radius:10px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.6);border:1px solid rgba(255,200,80,.12);
  background:linear-gradient(180deg,#1a0a28,#08031a);
  display:flex;align-items:center;justify-content:center;font-size:26px;
}
.hm-secret-film-poster-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.hm-secret-film-body{flex:1;min-width:0;}
.hm-secret-film-badge{font-size:8px;letter-spacing:3px;color:rgba(255,200,80,.45);font-family:'Special Gothic Expanded One',sans-serif;margin-bottom:6px;}
.hm-secret-film-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:26px;letter-spacing:1.5px;color:#fff;line-height:1;margin-bottom:6px;}
.hm-secret-film-meta{font-size:11px;color:rgba(255,255,255,.35);margin-bottom:10px;letter-spacing:.5px;}
.hm-secret-film-why{font-size:14px;color:rgba(255,255,255,.55);line-height:1.65;border-left:2px solid rgba(255,200,80,.18);padding-left:10px;font-style:italic;}

/* ─── PANEL 4 : ORACLE ─── */
.hm-secret-oracle-wrap{padding:0 20px;}
.hm-secret-oracle-card{
  position:relative;background:linear-gradient(180deg,rgba(30,10,60,.5),rgba(10,4,30,.7));
  border:1px solid rgba(130,60,200,.18);border-radius:18px;overflow:hidden;padding:18px;
}
.hm-secret-oracle-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.4),transparent);
}
.hm-oracle-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.hm-oracle-icon{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.22);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.hm-oracle-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:20px;letter-spacing:2px;color:#c084fc;}
.hm-oracle-sub{font-size:12px;color:rgba(192,132,252,.45);margin-top:2px;}
.hm-oracle-question{
  font-size:16px;color:rgba(255,255,255,.72);line-height:1.7;
  margin-bottom:14px;text-align:center;min-height:40px;
  font-style:italic;
}
.hm-oracle-btn{
  width:100%;background:linear-gradient(135deg,rgba(100,40,180,.8),rgba(168,85,247,.9));
  border:none;border-radius:13px;padding:13px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:15px;letter-spacing:2px;
  color:#fff;cursor:pointer;transition:transform .15s,opacity .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.hm-oracle-btn:active{transform:scale(.97);}
.hm-oracle-btn:disabled{opacity:.45;pointer-events:none;}
.hm-oracle-result{
  margin-top:14px;background:rgba(255,255,255,.04);border:1px solid rgba(168,85,247,.12);
  border-radius:13px;padding:14px;display:none;
}
.hm-oracle-result.on{display:block;animation:oracleReveal .5s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes oracleReveal{from{opacity:0;transform:translateY(10px) scale(.96);}to{opacity:1;transform:none;}}
.hm-oracle-film-name{font-family:'Special Gothic Expanded One',sans-serif;font-size:24px;letter-spacing:2px;color:#c084fc;margin-bottom:8px;}
.hm-oracle-film-why{font-size:14px;color:rgba(255,255,255,.55);line-height:1.7;}
.hm-oracle-loading{
  display:none;align-items:center;justify-content:center;gap:8px;
  font-size:12px;color:rgba(192,132,252,.5);letter-spacing:1px;padding:14px;
}
.hm-oracle-loading.on{display:flex;}
.hm-oracle-spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(168,85,247,.2);border-top-color:#a855f7;animation:recoSpin 1s linear infinite;}

/* Feedback triple tap */
@keyframes secretFlash{
  0%  {opacity:0;}
  8%  {opacity:.9;}
  25% {opacity:.15;}
  45% {opacity:.6;}
  65% {opacity:.05;}
  80% {opacity:.25;}
  100%{opacity:0;}
}
@keyframes tapRing{from{transform:scale(.5);opacity:.9;}to{transform:scale(2);opacity:0;}}
/* ─── AMBIANCE SALLE DE CINÉMA ─── */
@keyframes hmScreenFlicker{
  0%,100%{opacity:.6;}30%{opacity:1;}60%{opacity:.4;}80%{opacity:.8;}
}



#hm-viewer{
  position:fixed;inset:0;z-index:300;
  background:#07060c;
  display:none;
  flex-direction:column;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  overflow:hidden;
}
#hm-viewer::before{
  content:'';position:absolute;inset:0;
  background:
    /* Rideau rouge bordeaux — haut gauche */
    radial-gradient(ellipse 55% 45% at 10% 18%, rgba(160,20,40,.32) 0%, transparent 62%),
    /* Or pellicule — haut droit */
    radial-gradient(ellipse 42% 36% at 85% 12%, rgba(200,150,20,.18) 0%, transparent 60%),
    /* Violet profond — centre gauche */
    radial-gradient(ellipse 38% 48% at 15% 58%, rgba(100,20,140,.22) 0%, transparent 58%),
    /* Bordeaux chaud — bas droit */
    radial-gradient(ellipse 48% 38% at 88% 72%, rgba(140,15,45,.20) 0%, transparent 60%),
    /* Indigo sombre — bas centre */
    radial-gradient(ellipse 52% 32% at 48% 92%, rgba(60,10,100,.18) 0%, transparent 58%);
  pointer-events:none;z-index:0;
}
#hm-viewer::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:180px 180px;
  box-shadow: inset 0 0 140px rgba(0,0,0,.70);
  opacity:.8;
  pointer-events:none;z-index:0;
}

#hm-viewer.on{display:flex;opacity:1;pointer-events:all;}
/* Geler toutes les animations en arrière-plan quand le viewer est ouvert */
body.viewer-open *:not(#hm-viewer):not(#hm-viewer *){
  animation-play-state:paused !important;
}

/* Fond flou coloré — désactivé, fond fixe utilisé à la place */
.hmv-bg{ display:none; }
.hmv-bg2{ display:none; }
@keyframes hmvBgPulse{
  0%,100%{transform:scale(1) translate(0,0);}
  33%{transform:scale(1.1) translate(4%,-5%);}
  66%{transform:scale(.92) translate(-4%,4%);}
}
/* Grain de film */
#hm-viewer .hmv-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:overlay;
}

/* Container de l'affiche — prend toute la hauteur */
.hmv-poster-wrap{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:max(env(safe-area-inset-top),44px) 16px max(env(safe-area-inset-bottom),32px);
  box-sizing:border-box;
  z-index:1;
}

/* ── VIEWER CARD — simeydotme style ──
   Architecture :
   .hmv-poster          → porte les CSS vars & la perspective
   .hmv-poster-inner    → gère uniquement le flip (rotateY 180deg)
   .hmv-face            → faces recto/verso (backface-visibility)
   .hmv-rainbow         → foil arc-en-ciel (color-dodge)
   .hmv-sparkle         → éclats (color-dodge)
*/
.hmv-poster{
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  --posx: 50%;
  --posy: 50%;
  --hyp: 0;
  --o: 0;
  --s: 1;

  position:relative;
  width:min(calc(62vh * 2/3), calc(100vw - 32px));
  height:min(62vh, calc((100vw - 32px) * 3/2));
  border-radius:20px;
  flex-shrink:0;
  will-change:transform;
  transform-style:preserve-3d;
  /* Perspective portée ICI pour que rotateX/Y aient du relief */
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transition: transform .3s cubic-bezier(.2,1,.3,1), box-shadow .25s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
.hmv-poster.interacting{
  transition: none;
}
/* Container 3D interne — gère flip uniquement */
.hmv-poster-inner{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  border-radius:20px;
  will-change:transform;
}
/* Squeeze très léger au milieu du flip pour masquer la tranche */
@keyframes hmvFlipSqueeze{
  0%   { transform:scaleX(1); }
  45%  { transform:scaleX(0.96); }
  55%  { transform:scaleX(0.96); }
  100% { transform:scaleX(1); }
}
.hmv-poster.flipping{
  animation: hmvFlipSqueeze .55s cubic-bezier(.4,0,.2,1) both;
}
.hmv-poster.flipped .hmv-poster-inner{
  transform:rotateY(calc(180deg * var(--flip-dir, 1)));
}
/* Fondu de la carte au milieu du flip pour masquer la démarcation */
/* Flip : pas d'animation d'opacité sur l'inner, juste masquer le holo */
.hmv-poster.flipping .hmv-holo-clip{
  opacity:0;
  transition:opacity .08s ease;
}
.hmv-poster.interacting .hmv-poster-inner{
  transition:none !important;
}
/* Faces recto et verso */
.hmv-face{
  position:absolute;inset:0;
  border-radius:20px;
  overflow:hidden;
  background:#000;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  /* Légère ombre interne pour effacer la jointure de profil */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8);
}
.hmv-face-back{
  transform:rotateY(calc(180deg * var(--flip-dir, 1)));
  background:linear-gradient(145deg,#14082e,#0a0416,#0d0520);
  display:flex;flex-direction:column;
  padding:18px 16px 16px;
  box-sizing:border-box;
  overflow-y:auto;
}
/* Bouton texte flip — sous l'affiche, en dehors du poster */
.hmv-flip-text-btn{
  position:relative;
  z-index:10;
  cursor:pointer;
  padding:7px 18px;
  border-radius:20px;
  background:rgba(168,85,247,.1);
  border:1px solid rgba(168,85,247,.2);
  white-space:nowrap;
  flex-shrink:0;
}
.hmv-flip-text-btn span{
  font-size:10px;color:rgba(192,132,252,.6);
  letter-spacing:2px;text-transform:uppercase;
  pointer-events:none;
}
.hmv-flip-text-btn:active{background:rgba(168,85,247,.2);}

/* Zone de tap flip — bas de l'affiche */
.hmv-flip-tap-zone{
  position:absolute;bottom:0;left:0;right:0;
  height:22%;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:12px;
  cursor:pointer;
  background:transparent;
  z-index:4;
}
.hmv-flip-tap-zone span{
  font-size:9px;color:rgba(255,255,255,.35);
  letter-spacing:2px;text-transform:uppercase;
  pointer-events:none;
}
/* Bouton retourner sous l'affiche */
.hmv-flip-btn{
  display:flex;align-items:center;gap:7px;
  margin-top:12px;
  padding:9px 20px;
  border-radius:20px;
  background:rgba(168,85,247,.12);
  border:1px solid rgba(168,85,247,.28);
  color:rgba(192,132,252,.8);
  font-family:'Special Gothic Expanded One',sans-serif;
  font-size:13px;letter-spacing:2px;
  cursor:pointer;
  transition:all .18s;
}
.hmv-flip-btn:active{background:rgba(168,85,247,.25);}
/* Contenu verso — polices */
.hmvb-genre{font-size:11px;color:rgba(192,132,252,.55);letter-spacing:3px;text-transform:uppercase;margin-bottom:5px;flex-shrink:0;}
.hmvb-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:32px;letter-spacing:2px;color:#fff;line-height:1;margin-bottom:5px;flex-shrink:0;}
.hmvb-year{font-size:13px;color:rgba(255,255,255,.35);margin-bottom:10px;flex-shrink:0;}
.hmvb-synopsis{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55;overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;margin-bottom:8px;flex-shrink:0;}
.hmvb-divider{height:1px;background:rgba(255,255,255,.08);margin:6px 0;flex-shrink:0;margin-top:auto;}
.hmvb-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:8px;}
.hmvb-lbl{font-size:9px;color:rgba(192,132,252,.5);letter-spacing:1.5px;text-transform:uppercase;}
.hmvb-val{font-size:13px;color:rgba(255,255,255,.85);max-width:68%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hmvb-moods{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;flex-shrink:0;}
.hmvb-mood{font-size:12px;color:#c084fc;background:rgba(168,85,247,.18);border:1px solid rgba(168,85,247,.35);border-radius:12px;padding:6px 14px;font-weight:600;}
.hmvb-hint{text-align:center;font-size:10px;color:rgba(255,255,255,.2);letter-spacing:1px;margin-top:10px;flex-shrink:0;}
/* Indicateur double-tap */
.hmv-dbtap-hint{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  font-size:8px;color:rgba(255,255,255,.2);letter-spacing:1.5px;text-transform:uppercase;
  white-space:nowrap;pointer-events:none;z-index:2;
  transition:opacity .3s;
}
.hmv-poster.flipped .hmv-dbtap-hint{opacity:0;}
.hmv-poster-back-genre{
  font-size:8px;color:rgba(192,132,252,.55);
  letter-spacing:3px;text-transform:uppercase;margin-bottom:5px;flex-shrink:0;
}
.hmv-poster-back-title{
  font-family:'Special Gothic Expanded One',sans-serif;
  font-size:24px;letter-spacing:2px;color:#fff;
  line-height:1;margin-bottom:4px;flex-shrink:0;
}
.hmv-poster-back-year{
  font-size:10px;color:rgba(255,255,255,.35);margin-bottom:10px;flex-shrink:0;
}
.hmv-poster-back-synopsis{
  font-size:10px;color:rgba(255,255,255,.55);
  line-height:1.6;flex:1;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
}
.hmv-poster-back-divider{
  height:1px;background:rgba(255,255,255,.08);margin:10px 0;flex-shrink:0;
}
#hmvb-rows{flex-shrink:0;}
.hmvb-row{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;
}
.hmvb-lbl{font-size:9px;color:rgba(192,132,252,.45);letter-spacing:1.5px;text-transform:uppercase;}
.hmvb-val{font-size:11px;color:rgba(255,255,255,.82);max-width:65%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hmvb-tagline{font-size:12px;color:rgba(255,255,255,.32);font-style:italic;margin-bottom:6px;flex-shrink:0;line-height:1.4;}
.hmv-poster-back-moods{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;flex-shrink:0;
}
.hmvb-mood{
  font-size:11px;font-weight:600;color:#c084fc;
  background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.3);
  border-radius:10px;padding:5px 12px;
}
.hmv-poster-back-flip-back{
  margin-top:10px;flex-shrink:0;
  text-align:center;font-size:9px;
  color:rgba(255,255,255,.2);letter-spacing:1px;
}
.hmv-poster img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:20px;
}
.hmv-poster-placeholder{
  width:100%;height:100%;
  background:linear-gradient(180deg,#1a0832,#08031a);
  display:flex;align-items:center;justify-content:center;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:32px;
  color:rgba(168,85,247,.2);letter-spacing:3px;
}

/* ── EFFET VITRE — glass reflection layers ── */

/* Clip commun */
.hmv-holo-clip{
  position:absolute;inset:0;
  border-radius:20px;
  overflow:hidden;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  pointer-events:none;
  z-index:3;
}

/* SHIMMER AUTO — éclat de lumière qui traverse la carte périodiquement */
.hmv-shimmer{
  position:absolute;inset:0;
  border-radius:20px;
  pointer-events:none;
  z-index:5;
  overflow:hidden;
}
.hmv-shimmer::after{
  content:'';
  position:absolute;
  top:-10%;left:-60%;
  width:40%;height:120%;
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.13) 48%,
    rgba(255,255,255,.06) 54%,
    transparent 70%
  );
  transform:skewX(-12deg);
  animation:hmvShimmer 5s ease-in-out infinite;
  animation-delay:inherit;
}

/* Animations icônes mood */

/* Game Over Bobine animations */
@keyframes bobOverIcon{from{opacity:0;transform:scale(0) rotate(-20deg);}to{opacity:1;transform:scale(1) rotate(0deg);}}
@keyframes bobOverTitle{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes bobOverLine{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes bobOverScore{from{opacity:0;transform:scale(.5);}to{opacity:1;transform:scale(1);}}
@keyframes bobOverBtns{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes hmvMoodRain{0%,100%{transform:translateY(0);}50%{transform:translateY(3px);}}
@keyframes hmvMoodSun{0%,100%{transform:rotate(0deg);}50%{transform:rotate(20deg);}}
@keyframes hmvMoodZap{0%,100%{transform:scale(1);}45%{transform:scale(1.3);}55%{transform:scale(.85);}}
@keyframes hmvMoodSpin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@keyframes hmvMoodBounce{0%,100%{transform:translateY(0);}40%{transform:translateY(-4px);}60%{transform:translateY(-2px);}}
@keyframes hmvMoodFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-3px) scale(1.1);}}

/* Skeleton loader affiches viewer */
.hmv-skeleton{
  position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(90deg,#1a1128 25%,#2a1a3e 50%,#1a1128 75%);
  background-size:200% 100%;
  animation:hmvSkeleton 1.4s ease-in-out infinite;
  z-index:1;
}
@keyframes hmvSkeleton{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

@keyframes hmvEggIn{from{opacity:0;transform:translateX(-50%) translateY(16px) scale(.92);}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}}
@keyframes hmvEggOut{from{opacity:1;}to{opacity:0;transform:translateX(-50%) translateY(8px);}}
@keyframes hmvShimmer{
  0%   { left:-60%; opacity:0; }
  8%   { opacity:1; }
  30%  { left:130%; opacity:0; }
  100% { left:130%; opacity:0; }
}
.hmv-silver-base{
  position:absolute;inset:0;
  border-radius:20px;
  background: linear-gradient(
    135deg,
    rgba(120, 60, 180, .05) 0%,
    rgba(40, 140, 180, .04) 40%,
    rgba(180, 140, 40, .04) 75%,
    rgba(80, 60, 160, .03) 100%
  );
  mix-blend-mode: screen;
  opacity: 1;
}

/* 2. AURORA SWEEP — nappe colorée qui glisse avec le tilt */
.hmv-silver-sweep{
  position:absolute;inset:0;
  border-radius:20px;
  background: linear-gradient(
    calc(115deg + var(--ry, 0deg) * -1.5),
    rgba(100, 40, 200, 0)                  0%,
    rgba(100, 40, 200, 0)                  calc(var(--posx, 50%) - 38%),
    rgba(80,  180, 200, .12)               calc(var(--posx, 50%) - 18%),
    rgba(160, 80,  220, .18)               calc(var(--posx, 50%) - 5%),
    rgba(200, 170, 60,  .15)               var(--posx, 50%),
    rgba(60,  160, 180, .12)               calc(var(--posx, 50%) + 5%),
    rgba(100, 40,  200, .07)               calc(var(--posx, 50%) + 18%),
    rgba(100, 40,  200, 0)                 calc(var(--posx, 50%) + 38%),
    rgba(100, 40,  200, 0)                 100%
  );
  mix-blend-mode: screen;
  opacity: calc(var(--o, 0) * 1.8);
  will-change: opacity, background;
}

/* 3. AURORA VERTICALE — nappe perpendiculaire, couleur complémentaire */
.hmv-edge-light{
  position:absolute;inset:0;
  border-radius:20px;
  background:
    linear-gradient(
      180deg,
      rgba(200, 160, 60, calc(var(--edge-t, 0) * 0.70)) 0%,
      rgba(200, 160, 60, calc(var(--edge-t, 0) * 0.20)) 8%,
      transparent 22%,
      transparent 78%,
      rgba(80, 140, 200, calc(var(--edge-b, 0) * 0.20)) 92%,
      rgba(80, 140, 200, calc(var(--edge-b, 0) * 0.70)) 100%
    );
  mix-blend-mode: screen;
  opacity: var(--o, 0);
  will-change: opacity, background;
}

/* BORDURE AURORA — fine irisée */
.hmv-border{
  position:absolute;inset:0;border-radius:20px;
  pointer-events:none;
  box-shadow:
    inset 0 1.5px 0 rgba(180, 140, 255, calc(0.15 + var(--o,0) * 0.45)),
    inset 0 -1px  0 rgba(60, 180, 200, calc(0.05 + var(--o,0) * 0.15));
  border: 1px solid rgba(160, 120, 220, calc(0.08 + var(--o,0) * 0.12));
  z-index:4;
  opacity: 1;
}

/* L'opacité des couches est gérée directement via var(--o) en CSS */

/* Barre du haut */
.hmv-topbar{
  position:absolute;top:0;left:0;right:0;
  padding:max(env(safe-area-inset-top),44px) 18px 12px;
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;
  z-index:10;pointer-events:all;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);
}
.hmv-close{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .18s;color:#fff;
}
.hmv-close:active{transform:scale(.88);}
.hmv-counter{
  font-size:11px;color:rgba(255,255,255,.4);letter-spacing:1px;
  white-space:nowrap;
}
.hmv-title-top{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:16px;
  letter-spacing:2.5px;color:rgba(255,255,255,.85);
  text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Hint swipe bas */
.hmv-hint{
  position:absolute;
  bottom:0;
  left:0;right:0;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding-bottom:max(env(safe-area-inset-bottom),6px);
  pointer-events:none;
  z-index:20;
  transition:opacity .3s;
  animation:hmvHintBounce 2.4s ease-in-out infinite;
}
.hmv-hint-text{
  font-size:9px;color:rgba(255,255,255,.32);
  letter-spacing:2px;text-transform:uppercase;
  text-align:center;line-height:1.6;
}
.hmv-hint svg{color:rgba(255,255,255,.22);width:16px;height:16px;}
@keyframes hmvHintBounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}

/* Panneau infos (slide-up) */
.hmv-info{
  position:absolute;left:0;right:0;bottom:0;top:15%;
  background:#05040a;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:0 0 max(env(safe-area-inset-bottom),24px);
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.32,.72,0,1), visibility 0s linear .4s;
  pointer-events:none;
  visibility:hidden;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  z-index:10;
  border-radius:20px 20px 0 0;
}
.hmv-info.open{transform:translateY(0);pointer-events:all;visibility:visible;transition:transform .4s cubic-bezier(.32,.72,0,1), visibility 0s linear 0s;}
.hmv-info-content{padding:24px 22px 80px;}
.hmv-info-source{font-size:8px;letter-spacing:3px;color:rgba(192,132,252,.5);font-weight:700;margin-bottom:10px;}
.hmv-info-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:34px;letter-spacing:2px;color:#fff;line-height:1;margin-bottom:10px;}
.hmv-info-meta{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px;}
.hmv-info-pill{font-size:13px;color:rgba(255,255,255,.5);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:4px 10px;}
.hmv-info-pill.genre{color:rgba(192,132,252,.7);border-color:rgba(168,85,247,.2);background:rgba(168,85,247,.08);}
.hmv-info-synopsis{font-size:16px;color:rgba(255,255,255,.7);line-height:1.75;margin-bottom:10px;}
#hmv-info-tagline{font-size:13px;color:rgba(255,255,255,.38);font-style:italic;letter-spacing:.3px;margin-bottom:14px;padding-left:2px;}
.hmv-info-moods{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.hmv-info-mood{font-size:15px;color:rgba(192,132,252,.65);background:rgba(168,85,247,.07);border:1px solid rgba(168,85,247,.15);border-radius:20px;padding:6px 16px;}
.hmv-info-details{display:flex;flex-direction:column;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;margin-bottom:8px;}
.hmv-info-row{display:flex;align-items:baseline;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.05);}
.hmv-info-row:last-child{border-bottom:none;}
.hmv-info-label{font-size:12px;color:rgba(255,255,255,.3);letter-spacing:1.5px;text-transform:uppercase;flex-shrink:0;width:90px;}
.hmv-info-val{font-size:15px;color:rgba(255,255,255,.8);line-height:1.4;flex:1;}
.hmv-info-swipe-hint{
  text-align:center;font-size:11px;color:rgba(255,255,255,.3);
  letter-spacing:1.5px;padding:18px 0 8px;
  flex-shrink:0;
  animation:hmvHintBounce 2.5s ease-in-out infinite;
}

/* hmv-nav supprimé */

/* ══ HM VIEWER PLEIN ÉCRAN ══ (fin) */

/* ── WISHLIST BUTTON IN VIEWER ── */
.hmv-wishlist-btn{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);
  color:rgba(255,255,255,.5);
}
.hmv-wishlist-btn:active{transform:scale(.88);}
.hmv-wishlist-btn.active{background:rgba(232,52,74,.15);border-color:rgba(232,52,74,.4);color:#f87171;}
.hmv-wishlist-btn.active svg{fill:#f87171;stroke:#f87171;}
.hmv-wishlist-btn.pop{animation:wishPop .4s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes wishPop{0%{transform:scale(1);}40%{transform:scale(1.35);}70%{transform:scale(.92);}100%{transform:scale(1);}}

/* ── HM STATS COLLECTION ── */
.hm-stats-section{margin-bottom:22px;}
.hm-stats-title{font-size:9px;color:rgba(192,132,252,.5);letter-spacing:3px;text-transform:uppercase;margin-bottom:12px;font-family:'Special Gothic Expanded One',sans-serif;}
.hm-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.hm-stat-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:14px;text-align:center;}
.hm-stat-card-val{font-family:'Special Gothic Expanded One',sans-serif;font-size:28px;color:#c084fc;line-height:1;margin-bottom:4px;}
.hm-stat-card-lbl{font-size:9px;color:rgba(255,255,255,.3);letter-spacing:1.5px;text-transform:uppercase;}
.hm-genre-bar{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.hm-genre-bar-name{font-size:12px;color:rgba(255,255,255,.7);width:100px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-genre-bar-track{flex:1;height:6px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;}
.hm-genre-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,rgba(130,60,220,.8),rgba(168,85,247,1));transition:width .8s cubic-bezier(.34,1.56,.64,1);}
.hm-genre-bar-count{font-size:11px;color:rgba(192,132,252,.6);font-family:'Special Gothic Expanded One',sans-serif;flex-shrink:0;width:20px;text-align:right;}
.hm-mood-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px;}
.hm-mood-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.18);border-radius:20px;padding:5px 12px;}
.hm-mood-chip-name{font-size:11px;color:rgba(192,132,252,.8);}
.hm-mood-chip-count{font-family:'Special Gothic Expanded One',sans-serif;font-size:13px;color:#c084fc;}
.hm-lvl-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.hm-lvl-name{font-size:11px;color:rgba(255,255,255,.5);width:90px;flex-shrink:0;}
.hm-lvl-track{flex:1;height:6px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;}
.hm-lvl-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,rgba(168,85,247,.5),rgba(168,85,247,.9));transition:width .8s cubic-bezier(.34,1.56,.64,1);}
.hm-lvl-pct{font-size:10px;color:rgba(192,132,252,.5);font-family:'Special Gothic Expanded One',sans-serif;flex-shrink:0;width:32px;text-align:right;}
.hm-mood-pill{
  flex-shrink:0;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:600;
  letter-spacing:.3px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.4);cursor:pointer;transition:all .18s;white-space:nowrap;
}
.hm-mood-pill.active{
  background:rgba(168,85,247,.18);border-color:rgba(168,85,247,.45);color:#c084fc;
}
.hm-sort-btn{flex-shrink:0;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.3px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:rgba(255,255,255,.4);cursor:pointer;transition:all .18s;white-space:nowrap;}
.hm-sort-btn.active{background:rgba(192,132,252,.15);border-color:rgba(192,132,252,.4);color:#c084fc;}
.hm-wishlist-empty{grid-column:1/-1;text-align:center;padding:50px 20px;color:rgba(255,255,255,.2);font-size:13px;line-height:1.8;}
.hm-wishlist-empty svg{margin:0 auto 12px;display:block;opacity:.15;}
.hm-help-over { position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:700;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s; }
body.nav-visible .hm-help-over{padding-bottom:var(--nav-h);}
.hm-help-over.on{display:flex;opacity:1;pointer-events:all;}
.hm-help-sh { background:#0e0c18;
  border-radius:20px;
  border:1px solid rgba(168,85,247,.2);
  padding:28px 20px;
  width:min(92vw,420px);
  max-height:88vh;
  overflow-y:auto;
  position:relative; }
.hm-help-over.on .hm-help-sh{transform:translateY(0);}
.hm-help-hdl{width:36px;height:4px;border-radius:2px;background:rgba(168,85,247,.25);margin:0 auto 18px;}
.hm-help-intro{
  font-size:14px;color:rgba(255,255,255,.6);line-height:1.7;
  background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.14);
  border-radius:14px;padding:14px;margin-bottom:16px;
}
.hm-help-step{
  display:flex;align-items:flex-start;gap:14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:13px 14px;margin-bottom:8px;
}
.hm-help-step-num{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,rgba(130,60,220,.7),rgba(168,85,247,.9));
  display:flex;align-items:center;justify-content:center;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:14px;color:#fff;letter-spacing:0;
}
.hm-help-step-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:17px;letter-spacing:1px;color:#c084fc;margin-bottom:4px;}
.hm-help-step-desc{font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.6;}
.hm-help-tip{
  display:flex;gap:10px;align-items:flex-start;
  background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.14);
  border-radius:12px;padding:12px 14px;margin-bottom:8px;
}
.hm-help-tip-icon{font-size:18px;flex-shrink:0;line-height:1.3;}
.hm-help-tip-text{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.55;}
.hm-help-tip-text strong{color:#c084fc;font-weight:600;}
.hm-help-close{
  width:100%;margin-top:8px;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff;border:none;border-radius:14px;padding:15px;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;letter-spacing:2px;
  cursor:pointer;transition:transform .15s;
}
.hm-help-close:active{transform:scale(.97);}

/* ══ HIDDEN MOVIES COLLECTION ══ */
#hm{position:absolute;inset:0;z-index:1;overflow:hidden;display:flex;flex-direction:column;background:#07060c;}
#hm .hm-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  overflow:hidden;background:#07060c;
}
#hm .hm-bg::before{
  content:'';position:absolute;inset:0;
  background:
    /* Rideau rouge bordeaux — haut gauche */
    radial-gradient(ellipse 55% 45% at 10% 18%, rgba(160,20,40,.32) 0%, transparent 62%),
    /* Or pellicule — haut droit */
    radial-gradient(ellipse 42% 36% at 85% 12%, rgba(200,150,20,.18) 0%, transparent 60%),
    /* Violet profond — centre gauche */
    radial-gradient(ellipse 38% 48% at 15% 58%, rgba(100,20,140,.22) 0%, transparent 58%),
    /* Bordeaux chaud — bas droit */
    radial-gradient(ellipse 48% 38% at 88% 72%, rgba(140,15,45,.20) 0%, transparent 60%),
    /* Indigo sombre — bas centre */
    radial-gradient(ellipse 52% 32% at 48% 92%, rgba(60,10,100,.18) 0%, transparent 58%);
}
#hm .hm-bg::after{
  content:'';position:absolute;inset:0;
  /* Grain cinématographique + vignette */
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:180px 180px;
  background-repeat:repeat;
  /* Vignette sombre pour la lisibilité */
  box-shadow: inset 0 0 120px rgba(0,0,0,.65);
  opacity:.8;
}
#hm>*:not(.hm-bg){position:relative;z-index:1;}
.hm-header{padding:max(env(safe-area-inset-top),44px) 16px 10px;display:flex;align-items:center;gap:12px;flex-shrink:0;}
/* ── Ondes concentriques logo secret ── */
.hm-ripple{
  position:absolute;
  border-radius:50%;
  border:1.5px solid rgba(192,132,252,0);
  transform:scale(0);
  pointer-events:none;
  z-index:0;
  animation:hmRippleOut .7s cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes hmRippleOut{
  0%  {transform:scale(0);   border-color:rgba(192,132,252,.9); width:20px;height:20px;margin:-10px 0 0 -10px;}
  60% {border-color:rgba(168,85,247,.4);}
  100%{transform:scale(1);   border-color:rgba(168,85,247,0);   width:160px;height:160px;margin:-80px 0 0 -80px;}
}
.hm-ripple.frozen{
  animation:none;
  border-color:rgba(192,132,252,.25);
  animation:hmRippleSpin 1.8s linear infinite;
}
@keyframes hmRippleSpin{
  0%  {box-shadow:0 0 0 0 rgba(192,132,252,.3);}
  50% {box-shadow:0 0 12px 4px rgba(168,85,247,.15);}
  100%{box-shadow:0 0 0 0 rgba(192,132,252,.3);}
}
.hm-back{width:34px;height:34px;border-radius:50%;background:rgba(168,85,247,.15);border:1px solid rgba(192,132,252,.35);color:#c084fc;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .18s;}
.hm-back:active{transform:scale(.92);}
.hm-title-wrap{flex:1;}
.hm-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:22px;letter-spacing:3px;color:#c084fc;line-height:1;}
.hm-subtitle{font-size:10px;color:rgba(255,255,255,.3);letter-spacing:1px;margin-top:2px;}
.hm-progress-wrap{padding:16px 18px 8px;}
.hm-prog-label{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.35);letter-spacing:.5px;margin-bottom:6px;}
.hm-prog-track{background:rgba(255,255,255,.07);border-radius:4px;height:5px;overflow:hidden;}
.hm-prog-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,rgba(130,60,220,.8),rgba(168,85,247,1));transition:width .8s cubic-bezier(.34,1.56,.64,1);}
.hm-level-section{padding:14px 18px 6px;}
.hm-level-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:13px;letter-spacing:2px;color:rgba(192,132,252,.7);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.hm-level-title::after{content:'';flex:1;height:1px;background:rgba(168,85,247,.15);}
.hm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 8px;}
.hm-card-wrap{
  aspect-ratio:2/3;position:relative;cursor:pointer;
  perspective:800px;
  transform-style:preserve-3d;
}
.hm-card.locked{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:default;}
.hm-lock-icon{width:28px;height:28px;opacity:.25;}
.hm-lock-lvl{font-size:9px;color:rgba(255,255,255,.2);letter-spacing:1px;text-align:center;}
.hm-card.unlocked{border:1px solid rgba(168,85,247,.2);}
.hm-card-poster{width:100%;height:100%;object-fit:cover;display:block;}
.hm-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 50%,transparent 100%);}
.hm-card-info{position:absolute;bottom:0;left:0;right:0;padding:8px;}
.hm-card-title{font-size:9px;font-weight:600;color:#fff;line-height:1.2;margin-bottom:2px;}
.hm-card-genre{font-size:8px;color:rgba(192,132,252,.8);}
.hm-new-badge{position:absolute;top:6px;right:6px;background:rgba(168,85,247,.9);border-radius:4px;font-size:7px;letter-spacing:.5px;color:#fff;padding:2px 5px;font-weight:600;}
/* Carte sans poster → affiche générée */
.hm-card-poster-fake{width:100%;height:100%;background:linear-gradient(135deg,rgba(80,20,160,.4),rgba(40,10,80,.8));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;}
.hm-card-poster-fake-year{font-size:22px;font-family:'Special Gothic Expanded One',sans-serif;color:rgba(192,132,252,.4);letter-spacing:2px;}
/* Modal détail */
.hm-modal-scrim{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s;}
.hm-modal-scrim.on{opacity:1;pointer-events:all;}
.hm-modal{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:500px;background:#110f1c;border-radius:24px 24px 0 0;z-index:201;padding:0 0 max(28px,env(safe-area-inset-bottom));transition:transform .35s cubic-bezier(.25,.46,.45,.94);}
.hm-modal.on{transform:translateX(-50%) translateY(0);}
.hm-modal-hdl{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);margin:14px auto 0;}
.hm-modal-poster{width:100%;height:220px;object-fit:cover;object-position:top;}
.hm-modal-poster-fake{width:100%;height:180px;background:linear-gradient(135deg,rgba(80,20,160,.5),rgba(20,5,50,.9));display:flex;align-items:center;justify-content:center;}
.hm-modal-body{padding:20px 20px 0;}
.hm-modal-genre{font-size:10px;color:rgba(192,132,252,.7);letter-spacing:2px;margin-bottom:6px;}
.hm-modal-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:28px;letter-spacing:2px;color:#fff;line-height:1;margin-bottom:8px;}
.hm-modal-year{font-size:12px;color:rgba(255,255,255,.35);margin-bottom:14px;}
.hm-modal-synopsis{font-size:13px;color:rgba(255,255,255,.6);line-height:1.65;margin-bottom:18px;}
.hm-modal-btn{display:block;width:100%;background:linear-gradient(135deg,rgba(130,60,220,.8),rgba(168,85,247,.9));border:none;border-radius:16px;padding:15px;font-family:'Special Gothic Expanded One',sans-serif;font-size:18px;letter-spacing:2px;color:#fff;text-align:center;cursor:pointer;text-decoration:none;transition:transform .15s;}
.hm-modal-btn:active{transform:scale(.97);}
.hm-bottom-pad{height:max(32px,env(safe-area-inset-bottom));flex-shrink:0;}


/* ── HIDDEN MOVIES — Audio player ── */
.hm-audio-bar{
  height:3px;border-radius:2px;
  background:rgba(255,255,255,.06);overflow:hidden;
  margin-top:4px;
}
.hm-audio-bar-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,rgba(168,85,247,.7),rgba(192,132,252,.9));
  transition:width .5s linear;
}
.hm-eq{
  display:none;align-items:flex-end;gap:3px;height:20px;
  margin-top:2px;
}
.hm-eq.playing{display:flex;}
.hm-eq-bar{
  width:3px;border-radius:2px;
  background:rgba(192,132,252,.8);
  transform-origin:bottom;
}
.hm-eq-bar:nth-child(1){animation:hmEq1 .6s ease-in-out infinite alternate;}
.hm-eq-bar:nth-child(2){animation:hmEq2 .5s ease-in-out .1s infinite alternate;}
.hm-eq-bar:nth-child(3){animation:hmEq1 .7s ease-in-out .2s infinite alternate;}
.hm-eq-bar:nth-child(4){animation:hmEq2 .4s ease-in-out .05s infinite alternate;}
@keyframes hmEq1{from{height:4px}to{height:18px}}
@keyframes hmEq2{from{height:8px}to{height:14px}}
/* ── HIDDEN MOVIES HOME CARD ── */
/* Card HM accueil — shimmer de bordure */


.hm-home-border-card{
  position:relative;border-radius:18px;cursor:pointer;
  border:1px solid rgba(168,85,247,.14);
  transition:transform .16s;margin-bottom:0;
}
.hm-home-border-card::before{
  content:'';position:absolute;inset:-1.5px;border-radius:19.5px;z-index:0;
  background:conic-gradient(
    from var(--hm-angle,0deg),
    rgba(168,85,247,0)     0%,
    rgba(168,85,247,.04)  10%,
    rgba(168,85,247,.14)  24%,
    rgba(210,160,255,.45)  36%,
    rgba(230,200,255,.80)  46%,
    rgba(245,225,255,.95)  50%,
    rgba(230,200,255,.80)  54%,
    rgba(168,85,247,.14)   64%,
    rgba(168,85,247,.04)   76%,
    rgba(168,85,247,0)     84%,
    rgba(168,85,247,0)    100%
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  padding:1.5px;
  animation:hmBorderSpin 9s linear infinite;
  animation-delay:-3.5s;
  will-change:--hm-angle;
  pointer-events:none;
}
@keyframes hmBorderSpin{from{--hm-angle:0deg;}to{--hm-angle:360deg;}}
/* Grain pellicule sur HM */
.hm-grain{
  position:absolute;inset:0;border-radius:18px;z-index:3;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:overlay;
  animation:grainShift 0.09s steps(1) infinite;
  animation-delay:-0.04s;
}
.hm-home-border-card::after{
  content:'';position:absolute;inset:1px;border-radius:17px;
  background:
    radial-gradient(ellipse 70% 55% at 5% 0%,rgba(168,85,247,.18) 0%,transparent 65%),
    radial-gradient(ellipse 45% 40% at 95% 100%,rgba(139,60,200,.10) 0%,transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%,transparent 40%,rgba(0,0,0,.4) 100%),
    linear-gradient(135deg,#1e0d2e,#140920);
  z-index:1;pointer-events:none;
}
@keyframes vignettePulseHM{
  0%,100%{opacity:.65;}
  50%    {opacity:1;}
}
.hm-home-border-card:active{transform:scale(.97);}
.hm-home-border-inner{
  position:relative;z-index:2;
  padding:16px 16px 16px 18px;
  display:flex;align-items:center;gap:14px;
  border-radius:17px;
}

.hm-home-card{
  position:relative;border-radius:20px;overflow:hidden;cursor:pointer;
  height:100px;display:flex;align-items:center;gap:0;
  transition:transform .16s;margin-bottom:0;
  background:linear-gradient(135deg,#120a28 0%,#1a0d35 40%,#0d0620 100%);
  border:1px solid rgba(168,85,247,.3);
  box-shadow:0 4px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
}
.hm-home-card:active{transform:scale(.97);}
.hm-home-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 15% 50%,rgba(168,85,247,.18) 0%,transparent 60%),
             radial-gradient(ellipse 40% 60% at 80% 30%,rgba(99,51,180,.12) 0%,transparent 50%);
  pointer-events:none;
}
.hm-home-card::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.07),transparent);
  animation:btnglare 4s ease 1.5s infinite;pointer-events:none;
}
.hm-home-film-dots,.hm-home-reel,.hm-home-reel-hole{display:none;}
.hm-home-content{position:relative;z-index:2;padding:0 44px 0 16px;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px;}
.hm-home-logo{height:22px;width:auto;max-width:180px;filter:brightness(1.1) drop-shadow(0 1px 8px rgba(168,85,247,.5));display:block;}
.hm-home-badge{display:none;align-items:center;gap:5px;font-family:'Special Gothic Expanded One',sans-serif;font-size:17px;letter-spacing:2.5px;color:#c084fc;line-height:1;}
.hm-home-badge-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#c084fc,#7c3aed);box-shadow:0 0 8px rgba(192,132,252,.6);}
.hm-home-desc{font-size:10px;color:rgba(192,132,252,.45);letter-spacing:.3px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-home-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:2;opacity:.45;color:rgba(192,132,252,.7);}

/* ── HIDDEN MOVIES ÉCRAN ── */
#hm>*:not(.hm-bg){position:relative;z-index:1;}

/* Header */
.hm-header{
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  background:rgba(7,6,12,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:14px 16px 14px;
  padding-top:max(18px,env(safe-area-inset-top));
}
.hm-back{width:38px;height:38px;border-radius:50%;background:rgba(168,85,247,.15);border:1px solid rgba(192,132,252,.35);color:#c084fc;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .18s;}
.hm-back:active{transform:scale(.92);}
.hm-title-wrap{flex:1;}
.hm-subtitle{font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.5px;margin-top:2px;}
.hm-random-btn{
  width:34px;height:34px;border-radius:10px;
  background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.3);
  color:rgba(192,132,252,.8);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;flex-shrink:0;
}
.hm-random-btn:active{background:rgba(168,85,247,.28);transform:scale(.9);}
.hm-random-btn.spinning{animation:hmRandomSpin .5s cubic-bezier(.34,1.56,.64,1);}
.hm-reset-btn{
  width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.35);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;flex-shrink:0;
}
.hm-reset-btn:active{background:rgba(255,255,255,.1);transform:scale(.9);}
.hm-prog-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(168,85,247,.1);}
.hm-prog-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,rgba(130,60,220,.8),rgba(168,85,247,1));transition:width .8s cubic-bezier(.34,1.56,.64,1);}

/* ── SCRATCH CARD ZONE ── */
.hm-scratch-wrap{
  flex:1;min-height:0;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  perspective:1200px;
  width:100%;
}
.hm-scratch-card{
  flex:1;min-height:0;width:100%;
}
.hm-scratch-card{
  flex:1;min-height:0;
  position:relative;
  touch-action:none;
  background:#07060c;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.hm-scratch-card.flipped{
  transform:rotateY(180deg);
}
/* Recto (grattage) */
.hm-scratch-front{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
}
/* Verso (révélation) */
.hm-scratch-back{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:rotateY(180deg);
  background:#07060c;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.hm-scratch-back-poster{
  flex:1;min-height:0;
  position:relative;overflow:hidden;
}
.hm-scratch-back-poster img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.hm-scratch-back-poster-blur{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:blur(40px) brightness(.4) saturate(1.2);
  transform:scale(1.1);
}
.hm-scratch-back-poster-img{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.hm-scratch-back-poster-img img{
  position:relative;
  max-height:100%;max-width:100%;
  object-fit:contain;border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.8);
}
.hm-scratch-back-info{
  flex-shrink:0;
  background:linear-gradient(to top,rgba(5,4,15,.98) 70%,transparent);
  padding:16px 20px max(env(safe-area-inset-bottom),16px);
}
.hm-scratch-back-genre{
  font-size:9px;color:rgba(192,132,252,.55);
  letter-spacing:3px;text-transform:uppercase;margin-bottom:4px;
}
.hm-scratch-back-title{
  font-family:'Special Gothic Expanded One',sans-serif;
  font-size:32px;letter-spacing:2px;color:#fff;
  line-height:1;margin-bottom:4px;
}
.hm-scratch-back-meta{
  font-size:11px;color:rgba(255,255,255,.4);margin-bottom:14px;
}
.hm-scratch-back-synopsis{
  font-size:12px;color:rgba(255,255,255,.55);
  line-height:1.55;margin-bottom:16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hm-scratch-back-btn{
  width:100%;padding:14px;
  background:linear-gradient(100deg,#c084fc,#a855f7);
  border:none;border-radius:16px;
  color:#fff;font-family:'Special Gothic Expanded One',sans-serif;
  font-size:18px;letter-spacing:2px;cursor:pointer;
  box-shadow:0 8px 24px rgba(168,85,247,.4);
}
.hm-scratch-canvas{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  z-index:4;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13' fill='none' stroke='%23f5c842' stroke-width='2' opacity='0.8'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%23f5c842'/%3E%3C/svg%3E") 16 16, crosshair;
  touch-action:none;
  display:block;
}
.hm-scratch-under{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  background:#07060c;
}
/* Indice avant grattage */
.hm-scratch-hint{
  position:absolute;inset:0;z-index:8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(7,6,12,.0);
  pointer-events:none;transition:opacity .4s;
}
.hm-scratch-hint.hidden{opacity:0;pointer-events:none;}
.hm-scratch-hint-icon{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(100,50,180,.15);
  border:1px solid rgba(120,70,200,.3);
  border-radius:18px;
  color:rgba(100,60,180,.85);
  
}
.hm-scratch-hint-icon svg{width:28px;height:28px;}
.hm-scratch-hint-genre{
  font-size:11px;letter-spacing:3px;color:rgba(100,70,180,.6);
  font-weight:700;text-transform:uppercase;
}
.hm-scratch-hint-year{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:64px;letter-spacing:4px;
  color:rgba(80,60,160,.12);line-height:1;
}
/* Phrase énigmatique */
.hm-scratch-hint-clue{
  font-size:12px;color:rgba(70,50,140,.55);
  font-style:italic;text-align:center;line-height:1.55;
  letter-spacing:.2px;padding:0 32px;
}
/* Label gratter */
.hm-scratch-hint-label{
  font-size:10px;color:rgba(80,60,160,.35);letter-spacing:1.5px;
  text-align:center;
}

/* Navigation */
.hm-nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.6);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;backdrop-filter:blur(8px);
}
.hm-nav-btn:active{background:rgba(0,0,0,.7);transform:translateY(-50%) scale(.9);}
.hm-nav-prev{left:12px;}
.hm-nav-next{right:12px;}

/* ── CARTE TUTO HIDDEN MOVIES ── */
#hm-tuto-overlay{
  position:fixed;inset:0;z-index:400;
  background:rgba(4,3,12,.92);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px;
  opacity:0;pointer-events:none;
  transition:opacity .4s;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
#hm-tuto-overlay.on{opacity:1;pointer-events:all;}
.hm-tuto-card{
  width:min(340px,100%);
  max-height:calc(100dvh - 32px);
  background:linear-gradient(180deg,#0f0a22,#0a061a);
  border:1px solid rgba(168,85,247,.25);
  border-radius:28px;
  padding:24px 22px 22px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  box-shadow:0 40px 80px rgba(0,0,0,.8),0 0 60px rgba(168,85,247,.08);
  position:relative;overflow:hidden;
  flex-shrink:0;
}
.hm-tuto-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(168,85,247,.12) 0%,transparent 70%);
  pointer-events:none;
}
.hm-tuto-logo{
  width:min(200px,80%);color:rgba(192,132,252,.9);
  
  flex-shrink:0;overflow:visible;
}
.hm-tuto-logo svg{
  width:100%;height:auto;display:block;
}
.hm-tuto-divider{
  width:40px;height:1px;background:rgba(168,85,247,.3);
}
.hm-tuto-rules{
  display:flex;flex-direction:column;gap:10px;width:100%;
}
.hm-tuto-rule{
  display:flex;align-items:flex-start;gap:12px;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s,transform .4s;
}
.hm-tuto-rule.visible{opacity:1;transform:translateY(0);}
.hm-tuto-rule-icon{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;
  background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.hm-tuto-rule-body{flex:1;min-width:0;}
.hm-tuto-rule-title{
  font-family:'Special Gothic Expanded One',sans-serif;font-size:14px;letter-spacing:1.5px;
  color:rgba(255,255,255,.9);margin-bottom:2px;
}
.hm-tuto-rule-desc{font-size:11px;color:rgba(255,255,255,.4);line-height:1.5;}
.hm-tuto-btn{
  width:100%;padding:14px;margin-top:4px;
  background:linear-gradient(135deg,rgba(168,85,247,.2),rgba(140,60,220,.15));
  border:1px solid rgba(168,85,247,.35);
  border-radius:16px;cursor:pointer;
  font-family:'Special Gothic Expanded One',sans-serif;font-size:17px;letter-spacing:2px;
  color:rgba(192,132,252,.9);
  transition:transform .15s,border-color .2s;
  opacity:0;transition:opacity .5s,transform .15s;
}
.hm-tuto-btn.visible{opacity:1;}
.hm-tuto-btn:active{transform:scale(.97);}
/* Carte tuto dans la collection */
.hm-card-tuto{
  position:relative;border-radius:14px;overflow:hidden;cursor:pointer;
  background:linear-gradient(180deg,#180a2e 0%,#0d0820 40%,#1a0635 100%);
  box-shadow:0 4px 20px rgba(0,0,0,.6);
  aspect-ratio:2/3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:14px;
  transition:transform .12s cubic-bezier(.2,1,.3,1), box-shadow .12s ease;
  will-change:transform;
  border:none;
}
.hm-card-tuto::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(168,85,247,.18) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}
.hm-card-tuto:active{transform:scale(.96);}
.hm-card-tuto > *{position:relative;z-index:1;}
.hm-card-tuto-logo{
  width:78%;
  
}
.hm-card-tuto-title{
  font-family:'Special Gothic Expanded One',sans-serif;
  font-size:15px;letter-spacing:3px;
  color:rgba(220,170,255,.9);
  text-align:center;
  text-shadow:0 0 12px rgba(168,85,247,.6);
  line-height:1.1;
}
.hm-card-tuto-label{
  font-size:7.5px;letter-spacing:2.5px;color:rgba(192,132,252,.45);
  font-family:'DM Sans',sans-serif;font-weight:500;text-align:center;
  background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2);
  border-radius:20px;padding:3px 10px;
}

.hm-scratch-counter{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:6;
  font-size:9px;color:rgba(255,255,255,.6);letter-spacing:2px;
  background:rgba(0,0,0,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);border-radius:20px;
  padding:4px 12px;white-space:nowrap;
}

/* ── FICHE FILM (slide-up) ── */
.hm-film-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  max-width:500px;margin:0 auto;
  background:#0e0c18;
  border-top:1px solid rgba(168,85,247,.2);
  border-radius:22px 22px 0 0;
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.32,.72,0,1);
  max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:max(24px,env(safe-area-inset-bottom));
  visibility:hidden;
}
.hm-film-sheet.open{transform:translateY(0);visibility:visible;}
.hm-film-sheet-handle{
  width:36px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.15);
  margin:12px auto 16px;
}
.hm-film-sheet-content{padding:0 20px 8px;}

/* Contenu fiche */
.hm-fiche-source{font-size:7px;letter-spacing:3px;color:rgba(192,132,252,.5);font-weight:700;margin-bottom:8px;}
.hm-fiche-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:32px;letter-spacing:2px;color:#fff;line-height:1;margin-bottom:8px;}
.hm-fiche-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.hm-fiche-pill{font-size:11px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:4px 9px;}
.hm-fiche-pill.genre{color:rgba(192,132,252,.7);border-color:rgba(168,85,247,.2);background:rgba(168,85,247,.08);}
.hm-fiche-synopsis{font-size:14px;color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:14px;}
.hm-fiche-moods{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.hm-fiche-mood{font-size:12px;color:rgba(192,132,252,.75);background:rgba(168,85,247,.09);border:1px solid rgba(168,85,247,.22);border-radius:20px;padding:6px 14px;letter-spacing:.3px;}
.hm-fiche-details{display:flex;flex-direction:column;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;overflow:hidden;}
.hm-fiche-row{display:flex;align-items:baseline;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05);}
.hm-fiche-row:last-child{border-bottom:none;}
.hm-fiche-label{font-size:13px;color:rgba(255,255,255,.35);letter-spacing:1.5px;text-transform:uppercase;flex-shrink:0;width:105px;}
.hm-fiche-val{font-size:16px;color:rgba(255,255,255,.88);line-height:1.45;flex:1;}
.hm-fiche-rating{display:inline-flex;align-items:center;gap:5px;}
.hm-fiche-stars{color:#f5c842;font-size:15px;}
.hm-fiche-score{font-size:16px;font-weight:700;color:#f5c842;}
.hm-fiche-votes{font-size:11px;color:rgba(255,255,255,.25);margin-left:3px;}
.hm-fiche-loading{font-size:10px;color:rgba(255,255,255,.2);letter-spacing:1px;padding:14px;text-align:center;}

/* Lock card */
.hm-scratch-locked{
  position:absolute;inset:0;z-index:5;
  background:rgba(4,2,12,.9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.hm-lock-icon{opacity:.2;}
.hm-lock-name{font-family:'Special Gothic Expanded One',sans-serif;font-size:15px;letter-spacing:2px;color:rgba(255,255,255,.2);}
.hm-lock-xp{font-size:11px;color:rgba(255,255,255,.15);letter-spacing:1px;}

@keyframes hmRandomSpin{0%{transform:rotate(0deg) scale(1);}40%{transform:rotate(180deg) scale(.8);}100%{transform:rotate(612deg) scale(1);}}
@keyframes hmParticle{
  0%  {transform:translate(-50%,-50%) scale(1);opacity:1;}
  60% {opacity:.8;}
  100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(0);opacity:0;}
}
/* Shimmer de révélation léger - CSS only, pas de DOM extra */
@keyframes hmRevealShimmer{
  0%  {background-position:-150% 0;opacity:0;}
  15% {opacity:1;}
  85% {opacity:1;}
  100%{background-position:250% 0;opacity:0;}
}
.hm-scratch-poster.revealing::after{
  content:'';
  position:absolute;inset:0;
  border-radius:16px;
  pointer-events:none;
  background:linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,0) 35%,
    rgba(200,180,255,0.35) 50%,
    rgba(255,255,255,0) 65%,
    transparent 100%);
  background-size:300% 100%;
  animation:hmRevealShimmer .75s cubic-bezier(.25,.46,.45,.94) forwards;
}
#hm-random-flash{position:absolute;inset:0;z-index:20;pointer-events:none;background:radial-gradient(ellipse 60% 40% at 50% 50%,rgba(168,85,247,.18) 0%,transparent 70%);opacity:0;transition:opacity .3s;}
#hm-random-flash.on{opacity:1;}

/* Image de fond floue sous le canvas */
.hm-scratch-bg{
  position:absolute;inset:-10%;
  width:120%;height:120%;
  background-size:cover;background-position:center top;
  filter:blur(24px) brightness(.5) saturate(.6);
}
.hm-scratch-poster{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  overflow:hidden;
}
.hm-scratch-poster img{
  width:100%;max-width:240px;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.8);
  filter:blur(18px) brightness(.7);
  transform:scale(1.06);
  transition:filter .0s,transform .0s;
  will-change:filter,transform;
}
.hm-scratch-poster img.revealed{
  filter:blur(0) brightness(1);
  transform:scale(1);
  transition:filter .7s cubic-bezier(.25,.46,.45,.94), transform .65s cubic-bezier(.34,1.3,.64,1);
}

.hm-tabs{
  display:flex;gap:0;flex-shrink:0;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.hm-tab{
  flex:1;padding:10px 8px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;font-weight:600;letter-spacing:.5px;
  color:rgba(255,255,255,.3);
  background:none;border:none;cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .2s, border-bottom-color .2s, transform .15s;
}
.hm-tab:active{transform:scale(.93);}
.hm-tab.active{
  color:#c084fc;
  border-bottom-color:#c084fc;
}

.hm-tab-count{
  background:rgba(168,85,247,.25);
  color:#c084fc;font-size:10px;
  border-radius:10px;padding:1px 6px;
  min-width:18px;text-align:center;
}

/* ── HM COLLECTION GRILLE ── */
.hm-collection-wrap{
  flex:1;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.hm-collection-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:12px 14px 20px;
}

/* ── CARTE HOLOGRAPHIQUE ── */
.hm-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:2/3;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.6);
  transition:transform .15s ease;
}
.hm-card:active{transform:scale(.96);}

/* RECTO */
.hm-card-front{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.hm-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease;}
.hm-card-img.loaded{opacity:1;}
/* Apparition en cascade */
@keyframes hmCardIn{from{opacity:0;transform:scale(.93);}to{opacity:1;transform:scale(1);}}
.hm-card{animation:hmCardIn .3s ease both;}
.hm-card-img-placeholder{position:absolute;inset:0;background:linear-gradient(180deg,#120820,#060310);display:flex;align-items:center;justify-content:center;font-family:'Special Gothic Expanded One',sans-serif;font-size:28px;color:rgba(168,85,247,.15);letter-spacing:3px;}
.hm-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,2,12,.92) 0%,rgba(4,2,12,.3) 45%,transparent 70%);}
.hm-card-info{position:absolute;bottom:0;left:0;right:0;padding:8px;}
.hm-card-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:16px;letter-spacing:1px;color:#fff;line-height:1.1;margin-bottom:3px;}
.hm-card-meta{font-size:10px;color:rgba(255,255,255,.45);letter-spacing:.5px;}
.hm-card-rating{display:inline-flex;align-items:center;gap:3px;font-size:9px;color:rgba(245,200,66,.7);font-family:'Special Gothic Expanded One',sans-serif;letter-spacing:.5px;margin-top:2px;}
.hm-card-rating svg{opacity:.8;}
.hm-flip-hint{position:absolute;top:6px;right:6px;font-size:12px;opacity:.4;pointer-events:none;line-height:1;}

/* VERSO */
.hm-card-back{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:rotateY(180deg);
  background:linear-gradient(180deg,#14082e,#09041a,#0d0520);
  display:flex;flex-direction:column;padding:10px;box-sizing:border-box;
  gap:0;
}
.hm-back-top{flex-shrink:0;}
.hm-back-genre{font-size:7px;color:rgba(192,132,252,.55);letter-spacing:2px;text-transform:uppercase;margin-bottom:3px;}
.hm-back-title{font-family:'Special Gothic Expanded One',sans-serif;font-size:15px;letter-spacing:1px;color:#fff;line-height:1.1;margin-bottom:6px;}
.hm-back-synopsis{font-size:8px;color:rgba(255,255,255,.45);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin-bottom:auto;}
.hm-back-divider{height:1px;background:rgba(255,255,255,.07);margin:7px 0;flex-shrink:0;}
.hm-back-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;}
.hm-back-lbl{font-size:6.5px;color:rgba(192,132,252,.4);letter-spacing:1.5px;text-transform:uppercase;}
.hm-back-val{font-size:8px;color:rgba(255,255,255,.65);max-width:65%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hm-back-rating{color:#f5c842;font-family:'Special Gothic Expanded One',sans-serif;font-size:12px;}
.hm-back-moods{display:flex;flex-wrap:wrap;gap:2px;margin-top:5px;flex-shrink:0;}
.hm-back-mood{font-size:6.5px;color:rgba(192,132,252,.6);background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.15);border-radius:8px;padding:2px 5px;}
.hm-back-btn{
  margin-top:7px;flex-shrink:0;
  background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.3);
  border-radius:8px;padding:6px;
  color:#c084fc;font-family:'Special Gothic Expanded One',sans-serif;font-size:11px;letter-spacing:1px;
  cursor:pointer;text-align:center;
}


/* Carte collection — pas de 3D, juste un feedback tap propre */
.hm-card{
  border:1px solid rgba(168,85,247,.22);
  transition:transform .12s cubic-bezier(.2,1,.3,1), box-shadow .12s ease;
  will-change:transform;
  overflow:hidden;
}

/* Légère pression au tap */
.hm-card:active{
  transform:scale(.96);
}

/* ── Shimmer de tap — éclat qui traverse la carte au toucher ── */
.hm-card-tap-shine{
  position:absolute;inset:0;border-radius:14px;
  pointer-events:none;z-index:3;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 30%,
    rgba(255,255,255,.13) 48%,
    rgba(255,255,255,.07) 54%,
    transparent 70%,
    transparent 100%
  );
  opacity:0;
  transform:translateX(-100%);
}
.hm-card.tap-flash .hm-card-tap-shine{
  animation: cardTapShimmer .4s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes cardTapShimmer{
  0%  { opacity:0; transform:translateX(-100%); }
  30% { opacity:1; }
  100%{ opacity:0; transform:translateX(100%); }
}

/* Bordure subtile toujours présente, légèrement plus visible au hover */
.hm-card-border{
  position:absolute;inset:0;border-radius:14px;
  pointer-events:none;z-index:4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.15);
  border:1px solid rgba(168,85,247,.18);
  transition:border-color .2s;
}
.hm-card:hover .hm-card-border{
  border-color:rgba(168,85,247,.38);
}


/* overlay rotation supprimé */

/* ── AUJOURD'HUI DANS L'HISTOIRE DU CINEMA ── */
@keyframes spotlightSweep{0%{transform:translateX(-120%) skewX(-12deg);opacity:0;}8%{opacity:1;}45%{opacity:.6;}52%{transform:translateX(230%) skewX(-12deg);opacity:0;}100%{transform:translateX(230%) skewX(-12deg);opacity:0;}}
@keyframes histoAppear{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.histo-card{position:relative;overflow:hidden;border-radius:20px;margin-top:0;margin-bottom:10px;background:linear-gradient(135deg,rgba(18,14,4,.97),rgba(12,10,3,.95));border:1px solid rgba(245,200,66,.15);padding:16px 18px 14px;animation:histoAppear .5s ease both;}
.histo-card::before{content:'';position:absolute;inset:0;border-radius:20px;background:radial-gradient(ellipse 70% 55% at 15% 50%,rgba(245,200,66,.07) 0%,transparent 65%);pointer-events:none;}
.histo-spotlight{position:absolute;top:-20%;left:0;width:30%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,230,100,.05),rgba(255,218,70,.08),rgba(255,230,100,.05),transparent);animation:spotlightSweep 7s ease-in-out 1.5s infinite;pointer-events:none;z-index:0;}
.histo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;position:relative;z-index:1;}
.histo-label{display:flex;align-items:center;gap:6px;font-family:'Special Gothic Expanded One',sans-serif;font-size:11px;letter-spacing:2.5px;color:color-mix(in srgb,var(--gold) 50%,transparent);}
.histo-label svg{width:13px;height:13px;opacity:.55;flex-shrink:0;}
.histo-date-pill{font-size:9px;font-weight:600;letter-spacing:1px;color:rgba(255,255,255,.3);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:3px 9px;}
.histo-year{font-family:'Special Gothic Expanded One',sans-serif;font-size:42px;letter-spacing:2px;color:color-mix(in srgb,var(--gold) 13%,transparent);line-height:1;position:absolute;right:16px;bottom:10px;pointer-events:none;z-index:0;}
.histo-text{font-size:13px;color:rgba(255,255,255,.72);line-height:1.6;position:relative;z-index:1;padding-right:52px;}
.histo-text em{color:color-mix(in srgb,var(--gold) 85%,transparent);font-style:normal;}
.histo-tag{display:inline-flex;align-items:center;margin-top:10px;font-size:9px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:color-mix(in srgb,var(--gold) 55%,transparent);background:color-mix(in srgb,var(--gold) 7%,transparent);border:1px solid color-mix(in srgb,var(--gold) 13%,transparent);border-radius:8px;padding:3px 9px;position:relative;z-index:1;}

/* ── BARRE XP CLASSIQUE ── */
.xp-bar-wrap{display:flex;align-items:center;gap:10px;position:relative;z-index:1;margin:4px 0 6px;}
.xp-bar-track{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.07);overflow:hidden;position:relative;}
.xp-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold2),var(--gold),color-mix(in srgb,var(--gold) 60%,#fff));transition:width .7s cubic-bezier(.34,1.56,.64,1);position:relative;min-width:0;}
.xp-bar-fill::after{content:'';position:absolute;inset:0;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,transparent 60%);pointer-events:none;}
.xp-bar-fill.glow{box-shadow:0 0 8px color-mix(in srgb,var(--gold) 45%,transparent);}
.xp-bar-pct{font-family:'Special Gothic Expanded One',sans-serif;font-size:13px;color:color-mix(in srgb,var(--gold) 75%,transparent);letter-spacing:1px;flex-shrink:0;min-width:32px;text-align:right;}

/* ══════════════════════════════════════════════════════
   ── EASTER EGGS CSS ──
══════════════════════════════════════════════════════ */
@keyframes eePop{0%{transform:scale(0) rotate(-15deg);opacity:0;}60%{transform:scale(1.18) rotate(4deg);opacity:1;}80%{transform:scale(.94) rotate(-2deg);}100%{transform:scale(1) rotate(0deg);opacity:1;}}
@keyframes eeGlow{0%,100%{box-shadow:0 0 0 0 rgba(245,200,66,0);}50%{box-shadow:0 0 28px 6px rgba(245,200,66,.35);}}
@keyframes eeShake{0%,100%{transform:translateX(0);}15%{transform:translateX(-5px) rotate(-2deg);}30%{transform:translateX(5px) rotate(2deg);}45%{transform:translateX(-4px);}60%{transform:translateX(4px);}75%{transform:translateX(-2px);}90%{transform:translateX(2px);}}
@keyframes eeFoundPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,200,66,0);}50%{box-shadow:0 0 8px 2px rgba(245,200,66,.18);}}

.ee-toast-overlay{position:fixed;inset:0;z-index:9999;pointer-events:none;display:flex;align-items:center;justify-content:center;}
.ee-toast{
  background:linear-gradient(180deg,rgba(26,18,5,.98),rgba(14,10,2,.97));
  border:1.5px solid rgba(245,200,66,.45);border-radius:20px;padding:24px 24px 20px;text-align:center;
  max-width:300px;width:92%;pointer-events:all;overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.7),0 0 60px rgba(245,200,66,.06);
  animation:eePop .5s cubic-bezier(.34,1.56,.64,1) both, eeGlow 2.5s ease-in-out .5s infinite;
}
.ee-toast::before{
  content:'';display:block;height:8px;margin:-24px -24px 16px;
  background:repeating-linear-gradient(90deg,rgba(245,200,66,.5) 0px,rgba(245,200,66,.5) 10px,transparent 10px,transparent 16px);
  opacity:.6;
}
.ee-toast-egg{font-size:48px;margin-bottom:8px;display:block;filter:drop-shadow(0 4px 12px rgba(245,200,66,.4));}
.ee-toast-label{font-size:9px;letter-spacing:3px;color:rgba(245,200,66,.6);text-transform:uppercase;margin-bottom:6px;}
.ee-toast-name{font-family:'Special Gothic Expanded One',sans-serif;font-size:22px;letter-spacing:2px;color:#fff;margin-bottom:4px;}
.ee-toast-count{font-size:10px;color:rgba(245,200,66,.5);margin-bottom:6px;letter-spacing:.5px;}
.ee-toast-progress{height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin:0 0 16px;}
.ee-toast-progress-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,rgba(245,200,66,.5),#f5c842);transition:width .6s ease;}
.ee-toast-btn{background:linear-gradient(135deg,rgba(245,200,66,.2),rgba(245,200,66,.08));border:1px solid rgba(245,200,66,.3);border-radius:12px;padding:10px 24px;font-family:'Special Gothic Expanded One',sans-serif;font-size:15px;letter-spacing:2px;color:var(--gold);cursor:pointer;width:100%;transition:background .2s;}
.ee-toast-btn:active{background:rgba(245,200,66,.15);}

.ee-profile-section{margin-bottom:18px;}
.ee-profile-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:0;}
.ee-profile-item{aspect-ratio:1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);position:relative;cursor:pointer;transition:transform .15s;}
.ee-profile-item.found{background:rgba(245,200,66,.08);border-color:rgba(245,200,66,.25);animation:eeFoundPulse 4s ease-in-out infinite;}
.ee-profile-item.found:active{transform:scale(.94);}
.ee-profile-item-icon{font-size:17px;filter:grayscale(1);opacity:.25;transition:all .3s;}
.ee-profile-item.found .ee-profile-item-icon{filter:none;opacity:1;}
.ee-profile-item-num{font-size:7px;color:rgba(255,255,255,.2);letter-spacing:.5px;}
.ee-profile-item.found .ee-profile-item-num{color:rgba(245,200,66,.5);}
.ee-profile-bar-wrap{height:6px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden;margin-top:8px;}
.ee-profile-bar{height:100%;border-radius:6px;background:linear-gradient(90deg,rgba(245,200,66,.5),rgba(245,200,66,1));transition:width 1s cubic-bezier(.34,1.56,.64,1);}
.ee-profile-counter{display:none;}

/* ── Appuis longs easter eggs : bloquer sélection/callout natif ── */
.xp-bar-wrap, #p-pc, .xpw-quote, #rscore {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ══════════════════════════════════════════════════
   BOTTOM NAV & ÉCRANS SUPPLÉMENTAIRES
   ══════════════════════════════════════════════════ */

/* ── Bottom nav dans .wrap (position:relative, overflow:hidden) ── */
.cq-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background: rgba(10,10,15,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 5px 0 6px;
  height: 54px;
  z-index: 1000;
}
/* Desktop : nav alignée sur le .wrap centré */
@media (min-width:500px) {
  .cq-bottom-nav {
    left: 50%;
    transform: translateX(-50%);
    width: 390px;
    border-radius: 0 0 50px 50px;
    border-left: 1.5px solid rgba(255,255,255,.08);
    border-right: 1.5px solid rgba(255,255,255,.08);
    overflow: hidden;
  }
}
.cq-nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; padding: 6px 0 2px;
  color: rgba(255,255,255,.28); transition: color .18s;
}
.cq-nav-items-row {
  display: flex; flex-direction: row;
  align-items: center; justify-content: space-around;
  width: 100%;
}
.cq-nav-item svg { width: 22px; height: 22px; }
.cq-nav-item span { font-size: 10px; font-weight: 500; letter-spacing: .3px; }
.cq-nav-item.active { color: var(--gold); }

/* ── Padding bottom pour que le contenu ne passe pas sous la nav ── */
#home {
  padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 36px)) !important;
}

/* ── Topbar des écrans modes et profil ── */
.cq-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(52px, calc(env(safe-area-inset-top) + 14px)) 14px 14px;
  flex-shrink: 0;
  position: sticky;
  top: 0; z-index: 10;
  background: transparent;
}

/* Réduire le padding latéral des pages Modes et Profil */
.cq-screen-scroll {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Dans Modes, le topbar scrolle avec le contenu — plus besoin de fond */

/* ── Écran Modes ── */
#modes-screen {
  background: transparent !important;
}


/* ── Profil flex : topbar fixe + scroll ── */
.cq-flex-screen {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.cq-flex-screen .cq-screen-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}.cq-flex-screen .cq-screen-scroll::-webkit-scrollbar { display: none; }

/* Masquer l'ancien bouton profil et bkbtn */
#btn-profile { display: none !important; }
#profile .bkbtn { display: none !important; }

/* ══════════════════════════════════════════════════════════
   NAVBAR-AWARE BOTTOM SHEETS
   Quand la nav globale est visible (body.nav-visible),
   tous les overlays bottom-sheet remontent de --nav-h
   pour ne pas être masqués par la barre de navigation.
   ══════════════════════════════════════════════════════════ */

/* 1. Overlays à position:fixed avec align-items:flex-end
      → padding-bottom pousse la sheet vers le haut */
body.nav-visible .mode-info-over,
body.nav-visible .help-over,
body.nav-visible .mover,
body.nav-visible .hm-help-over {
  padding-bottom: var(--nav-h);
}

/* 2. Sheet .mode-info-sh : correction padding + max-height */
body.nav-visible .mode-info-sh {
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  max-height: calc(92dvh - var(--nav-h));
}

/* 3. Sheet .msh : max-height */
body.nav-visible .msh {
  max-height: calc(90dvh - var(--nav-h));
  padding-bottom: max(16px, env(safe-area-inset-bottom, 8px));
}

/* 4. Sheets .help-sh et .hm-help-sh : max-height */
body.nav-visible .help-sh,
body.nav-visible .hm-help-sh {
  max-height: calc(88vh - var(--nav-h));
}

/* 5. .wrong-sheet positionnée avec bottom:0 → décaler de --nav-h */
body.nav-visible .wrong-sheet.on {
  bottom: var(--nav-h);
}
body.nav-visible .wrong-sheet {
  max-height: calc(85vh - var(--nav-h));
  padding-bottom: max(calc(var(--nav-h) + 16px), calc(env(safe-area-inset-bottom, 0px) + 16px)) !important;
}

/* 6. .ob-card (onboarding) positionnée avec bottom:0 */
body.nav-visible #onboarding.on .ob-card {
  transform: translateY(calc(-1 * var(--nav-h)));
}

/* ── BADGES & EASTER EGGS SCREEN ── */
/* ══════════════════════════════
   BADGES & EASTER EGGS SCREEN
   ══════════════════════════════ */
#badges-screen {
  background: var(--bg);
}

/* ── Fonds statiques — Badges, Jukebox, Comment Jouer ── */

/* Badges : or chaud + violet profond */
.bsc-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 15% 18%, rgba(200,130,20,.26) 0%, transparent 60%),
    radial-gradient(ellipse 45% 38% at 80% 10%, rgba(168,85,247,.20) 0%, transparent 62%),
    radial-gradient(ellipse 40% 50% at 88% 55%, rgba(130,20,75,.18) 0%, transparent 58%),
    radial-gradient(ellipse 50% 35% at 20% 80%, rgba(99,60,180,.20) 0%, transparent 60%),
    radial-gradient(ellipse 90% 85% at 50% 50%, transparent 20%, rgba(0,0,0,.80) 100%);
}

/* Jukebox : rouge cinéma + or chaud */
.jk-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 42% at 20% 15%, rgba(180,30,30,.30) 0%, transparent 62%),
    radial-gradient(ellipse 42% 38% at 78% 8%,  rgba(245,150,40,.18) 0%, transparent 58%),
    radial-gradient(ellipse 38% 48% at 85% 60%, rgba(140,20,20,.20) 0%, transparent 56%),
    radial-gradient(ellipse 48% 36% at 18% 82%, rgba(100,30,10,.18) 0%, transparent 58%),
    radial-gradient(ellipse 90% 85% at 50% 50%, transparent 20%, rgba(0,0,0,.82) 100%);
}

/* Comment Jouer : bleu doux + indigo */
.help-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 52% 42% at 18% 16%, rgba(56,130,240,.24) 0%, transparent 62%),
    radial-gradient(ellipse 44% 36% at 80% 10%, rgba(99,102,241,.18) 0%, transparent 58%),
    radial-gradient(ellipse 38% 46% at 85% 58%, rgba(56,189,248,.14) 0%, transparent 56%),
    radial-gradient(ellipse 46% 34% at 15% 80%, rgba(80,60,200,.16) 0%, transparent 58%),
    radial-gradient(ellipse 90% 85% at 50% 50%, transparent 20%, rgba(0,0,0,.82) 100%);
}



/* Topbar */
.bsc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: max(52px, calc(env(safe-area-inset-top) + 14px)) 22px 18px;
  flex-shrink: 0;
}
.bsc-title-wrap { flex: 1; min-width: 0; }
.bsc-count-wrap { flex-shrink: 0; }
.bsc-count {
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 1px;
}

/* Tabs */
.bsc-tabs {
  display: flex;
  gap: 8px;
  padding: 0 22px 16px;
  flex-shrink: 0;
}
.bsc-tab {
  flex: 1;
  padding: 10px 12px 8px;
  border-radius: 14px;
  font-family: 'Special Gothic Expanded One', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all .2s;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.bsc-tab-label { display: block; }
.bsc-tab-count {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  color: rgba(255,255,255,.25);
  transition: color .2s;
}
.bsc-tab-bar-wrap {
  display: block;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.07);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2px;
}
.bsc-tab-bar {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: rgba(255,255,255,.25);
  transition: width .6s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.bsc-tab.bsc-tab-active {
  background: linear-gradient(135deg, rgba(245,200,66,.18), rgba(245,200,66,.08));
  border-color: rgba(245,200,66,.5);
  color: var(--gold);
  box-shadow: 0 0 16px rgba(245,200,66,.1);
}
.bsc-tab.bsc-tab-active .bsc-tab-count { color: rgba(245,200,66,.7); }
.bsc-tab.bsc-tab-active .bsc-tab-bar { background: var(--gold); }

/* Panels */
.bsc-panel {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 22px max(28px, env(safe-area-inset-bottom, 28px));
  display: flex;
  flex-direction: column;
}

/* Filtres badges */
.bsc-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.bsc-filter {
  flex: 1;
  padding: 9px 4px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .18s;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.35);
}
.bsc-filter.bsc-filter-active {
  background: linear-gradient(135deg, rgba(245,200,66,.18), rgba(245,200,66,.08));
  border-color: rgba(245,200,66,.45);
  color: var(--gold);
  box-shadow: 0 0 10px rgba(245,200,66,.08);
}

/* Grille badges */
#badges-screen .pbgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 60px;
  gap: 8px;
  align-content: start;
}

/* Point "nouveau badge" */
.unlock-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff4d6d;
  border: 1.5px solid var(--bg);
  box-shadow: 0 0 6px rgba(255,77,109,.6);
}

/* Header Easter Eggs */
.bsc-ee-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.bsc-ee-count {
  color: rgba(245,200,66,.6);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Fond animé réactivé — orbes de lumière statiques */
.arc-bg::before, .arc-bg::after {
  animation: none !important;
}

/* ══ OPTIMISATIONS NAVIGATEUR DESKTOP ══ */
/* Hover states sur tous les éléments interactifs */
@media (hover:hover) and (pointer:fine) {
  /* Boutons de réponse */
  .ans-btn:not(.correct):not(.wrong):hover {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(255,255,255,.28) !important;
    transform: translateY(-1px);
    transition: background .15s, border-color .15s, transform .15s;
  }
  /* Boutons clavier Pendu */
  .pendu-key:not(.used-ok):not(.used-ko):hover {
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.35) !important;
    transform: scale(1.08);
    transition: background .12s, transform .12s;
  }
  /* Cartes de mode */
  .mc:not(.mc-locked):hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    transition: transform .18s, box-shadow .18s;
  }
  /* Boutons génériques */
  .ibtn:hover, .qcount-btn:hover, .mode-info-play:hover {
    filter: brightness(1.12);
    transition: filter .15s;
  }
  /* Nav tabs */
  .cq-nav-item:hover {
    background: rgba(255,255,255,.05);
    border-radius: 12px;
    transition: background .15s;
  }
  /* Boutons modale */
  .mode-info-close:hover {
    background: rgba(255,255,255,.1) !important;
    transition: background .15s;
  }
}

/* cursor:pointer sur tous les éléments cliquables */
.mc, .ans-btn, .pendu-key, .ibtn, .qcount-btn, .mode-info-play,
.mode-info-close, .cq-nav-item, [onclick], button {
  cursor: pointer;
}

/* Scrollbar desktop discrète dans .wrap */
@media (min-width:500px) {
  .wrap ::-webkit-scrollbar { width: 4px; }
  .wrap ::-webkit-scrollbar-track { background: transparent; }
  .wrap ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
  .wrap ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }
}

/* ── Animations orbes pour les mini-jeux sans règles CSS dédiées ── */
#arc-p4        .arc-bg { animation: arcOrbeFloat1 13s ease-in-out infinite; }
#arc-speedquiz .arc-bg { animation: arcOrbeFloat2 10s ease-in-out infinite; }
#arc-invaders  .arc-bg { animation: arcOrbeFloat1 17s ease-in-out infinite reverse; }
#arc-pong      .arc-bg { animation: arcOrbeFloat2 12s ease-in-out infinite reverse; }
#arc-bobine    .arc-bg { animation: arcOrbeFloat1 15s ease-in-out infinite; }
#arc-doodle    .arc-bg { animation: arcOrbeFloat2 11s ease-in-out infinite; }

/* ══ CINÉPÉDIA ══ */
#cinepedia-modal {
  animation: cpModalIn .28s cubic-bezier(.22,.68,0,1.15) both;
}
@keyframes cpModalIn {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
#cp-filters::-webkit-scrollbar { display:none; }

/* Animation d'entrée de chaque item */
@keyframes cpItemIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Hover desktop sur les items */
@media (hover:hover) and (pointer:fine) {
  .cp-anec-item:hover {
    border-color: rgba(251,191,36,.35) !important;
    transform: translateY(-1px);
    transition: border-color .18s, transform .18s;
  }
  #cinepedia-home-card:hover {
    border-color: rgba(251,191,36,.35) !important;
    transition: border-color .2s, transform .16s;
  }
}

/* ── Ticket de cinéma — styles par thème ── */

/* Défaut (Cinéma) — ambre/doré : déjà dans le HTML inline */

/* Néon — violet/cyan */
.theme-neon .splash-ticket-left{
  background:rgba(196,102,255,.18);
  border-color:rgba(196,102,255,.45);
}
.theme-neon .splash-ticket-right{
  background:rgba(0,10,30,.88);
  border-color:rgba(0,229,255,.25);
}
.theme-neon .splash-ticket-stub-label,
.theme-neon .splash-ticket-stub-num{color:#c466ff;}
.theme-neon .splash-ticket-perf-line{
  background:repeating-linear-gradient(to bottom,rgba(196,102,255,.4) 0,rgba(196,102,255,.4) 5px,transparent 5px,transparent 9px);
}
.theme-neon .splash-ticket-cta-text{color:rgba(0,229,255,.7);}
.theme-neon .splash-ticket-arrow{color:rgba(196,102,255,.8);}
.theme-neon .splash-ticket-date{color:rgba(0,229,255,.3);}

/* Crimson — rouge sang */
.theme-crimson .splash-ticket-left{
  background:rgba(255,58,92,.18);
  border-color:rgba(255,58,92,.45);
}
.theme-crimson .splash-ticket-right{
  background:rgba(20,0,5,.9);
  border-color:rgba(255,58,92,.25);
}
.theme-crimson .splash-ticket-stub-label,
.theme-crimson .splash-ticket-stub-num{color:#ff3a5c;}
.theme-crimson .splash-ticket-perf-line{
  background:repeating-linear-gradient(to bottom,rgba(255,58,92,.4) 0,rgba(255,58,92,.4) 5px,transparent 5px,transparent 9px);
}
.theme-crimson .splash-ticket-cta-text{color:rgba(255,120,140,.7);}
.theme-crimson .splash-ticket-arrow{color:rgba(255,58,92,.8);}
.theme-crimson .splash-ticket-date{color:rgba(255,58,92,.3);}

/* Océan — cyan/bleu */
.theme-ocean .splash-ticket-left{
  background:rgba(0,212,255,.15);
  border-color:rgba(0,212,255,.4);
}
.theme-ocean .splash-ticket-right{
  background:rgba(0,10,20,.9);
  border-color:rgba(0,212,255,.22);
}
.theme-ocean .splash-ticket-stub-label,
.theme-ocean .splash-ticket-stub-num{color:#00d4ff;}
.theme-ocean .splash-ticket-perf-line{
  background:repeating-linear-gradient(to bottom,rgba(0,212,255,.4) 0,rgba(0,212,255,.4) 5px,transparent 5px,transparent 9px);
}
.theme-ocean .splash-ticket-cta-text{color:rgba(0,212,255,.7);}
.theme-ocean .splash-ticket-arrow{color:rgba(0,212,255,.8);}
.theme-ocean .splash-ticket-date{color:rgba(0,212,255,.3);}

/* Sunset — orange/rose */
.theme-sunset .splash-ticket-left{
  background:rgba(255,140,56,.18);
  border-color:rgba(255,140,56,.45);
}
.theme-sunset .splash-ticket-right{
  background:rgba(20,5,0,.9);
  border-color:rgba(255,78,106,.25);
}
.theme-sunset .splash-ticket-stub-label,
.theme-sunset .splash-ticket-stub-num{color:#ff8c38;}
.theme-sunset .splash-ticket-perf-line{
  background:repeating-linear-gradient(to bottom,rgba(255,140,56,.4) 0,rgba(255,140,56,.4) 5px,transparent 5px,transparent 9px);
}
.theme-sunset .splash-ticket-cta-text{color:rgba(255,140,56,.7);}
.theme-sunset .splash-ticket-arrow{color:rgba(255,78,106,.8);}
.theme-sunset .splash-ticket-date{color:rgba(255,140,56,.3);}

/* Glace — bleu pâle/blanc */
.theme-ice .splash-ticket-left{
  background:rgba(200,238,255,.15);
  border-color:rgba(200,238,255,.4);
}
.theme-ice .splash-ticket-right{
  background:rgba(0,10,25,.88);
  border-color:rgba(200,238,255,.2);
}
.theme-ice .splash-ticket-stub-label,
.theme-ice .splash-ticket-stub-num{color:#c8eeff;}
.theme-ice .splash-ticket-perf-line{
  background:repeating-linear-gradient(to bottom,rgba(200,238,255,.4) 0,rgba(200,238,255,.4) 5px,transparent 5px,transparent 9px);
}
.theme-ice .splash-ticket-cta-text{color:rgba(200,238,255,.7);}
.theme-ice .splash-ticket-arrow{color:rgba(200,238,255,.9);}
.theme-ice .splash-ticket-date{color:rgba(200,238,255,.3);}

/* Aurora — vert/violet/rose */
.theme-aurora .splash-ticket-left{
  background:rgba(74,222,128,.15);
  border-color:rgba(74,222,128,.4);
}
.theme-aurora .splash-ticket-right{
  background:rgba(5,0,20,.9);
  border-color:rgba(192,132,252,.25);
}
.theme-aurora .splash-ticket-stub-label,
.theme-aurora .splash-ticket-stub-num{color:#4ade80;}
.theme-aurora .splash-ticket-perf-line{
  background:repeating-linear-gradient(to bottom,rgba(192,132,252,.4) 0,rgba(192,132,252,.4) 5px,transparent 5px,transparent 9px);
}
.theme-aurora .splash-ticket-cta-text{color:rgba(192,132,252,.7);}
.theme-aurora .splash-ticket-arrow{color:rgba(74,222,128,.8);}
.theme-aurora .splash-ticket-date{color:rgba(192,132,252,.3);}

/* Galaxie — violet profond */
.theme-galaxy .splash-ticket-left{
  background:rgba(167,139,250,.15);
  border-color:rgba(167,139,250,.4);
}
.theme-galaxy .splash-ticket-right{
  background:rgba(3,0,15,.92);
  border-color:rgba(0,229,255,.2);
}
.theme-galaxy .splash-ticket-stub-label,
.theme-galaxy .splash-ticket-stub-num{color:#a78bfa;}
.theme-galaxy .splash-ticket-perf-line{
  background:repeating-linear-gradient(to bottom,rgba(167,139,250,.4) 0,rgba(167,139,250,.4) 5px,transparent 5px,transparent 9px);
}
.theme-galaxy .splash-ticket-cta-text{color:rgba(0,229,255,.65);}
.theme-galaxy .splash-ticket-arrow{color:rgba(167,139,250,.8);}
.theme-galaxy .splash-ticket-date{color:rgba(167,139,250,.3);}

/* Émeraude — vert vif */
.theme-emerald .splash-ticket-left{
  background:rgba(16,240,124,.13);
  border-color:rgba(16,240,124,.38);
}
.theme-emerald .splash-ticket-right{
  background:rgba(0,10,5,.9);
  border-color:rgba(16,240,124,.2);
}
.theme-emerald .splash-ticket-stub-label,
.theme-emerald .splash-ticket-stub-num{color:#10f07c;}
.theme-emerald .splash-ticket-perf-line{
  background:repeating-linear-gradient(to bottom,rgba(16,240,124,.4) 0,rgba(16,240,124,.4) 5px,transparent 5px,transparent 9px);
}
.theme-emerald .splash-ticket-cta-text{color:rgba(16,240,124,.7);}
.theme-emerald .splash-ticket-arrow{color:rgba(16,240,124,.8);}
.theme-emerald .splash-ticket-date{color:rgba(16,240,124,.3);}

/* Inferno — jaune/orange/rouge */
.theme-inferno .splash-ticket-left{
  background:rgba(255,149,0,.18);
  border-color:rgba(255,221,0,.45);
}
.theme-inferno .splash-ticket-right{
  background:rgba(15,3,0,.92);
  border-color:rgba(255,48,0,.3);
}
.theme-inferno .splash-ticket-stub-label,
.theme-inferno .splash-ticket-stub-num{color:#ffdd00;}
.theme-inferno .splash-ticket-perf-line{
  background:repeating-linear-gradient(to bottom,rgba(255,149,0,.5) 0,rgba(255,149,0,.5) 5px,transparent 5px,transparent 9px);
}
.theme-inferno .splash-ticket-cta-text{color:rgba(255,149,0,.8);}
.theme-inferno .splash-ticket-arrow{color:rgba(255,221,0,.9);}
.theme-inferno .splash-ticket-date{color:rgba(255,149,0,.35);}

/* Matrix — vert terminal */
.theme-matrix .splash-ticket-left{
  background:rgba(0,255,65,.1);
  border-color:rgba(0,255,65,.35);
}
.theme-matrix .splash-ticket-right{
  background:rgba(0,8,0,.94);
  border-color:rgba(0,255,65,.18);
}
.theme-matrix .splash-ticket-stub-label,
.theme-matrix .splash-ticket-stub-num{color:#00ff41;}
.theme-matrix .splash-ticket-perf-line{
  background:repeating-linear-gradient(to bottom,rgba(0,255,65,.35) 0,rgba(0,255,65,.35) 5px,transparent 5px,transparent 9px);
}
.theme-matrix .splash-ticket-cta-text{color:rgba(0,255,65,.65);}
.theme-matrix .splash-ticket-arrow{color:rgba(136,255,0,.8);}
.theme-matrix .splash-ticket-date{color:rgba(0,255,65,.3);}

/* Rose — rose/fuchsia */
.theme-rose .splash-ticket-left{
  background:rgba(255,110,180,.15);
  border-color:rgba(255,170,221,.4);
}
.theme-rose .splash-ticket-right{
  background:rgba(18,0,10,.9);
  border-color:rgba(255,110,180,.25);
}
.theme-rose .splash-ticket-stub-label,
.theme-rose .splash-ticket-stub-num{color:#ffaadd;}
.theme-rose .splash-ticket-perf-line{
  background:repeating-linear-gradient(to bottom,rgba(255,110,180,.4) 0,rgba(255,110,180,.4) 5px,transparent 5px,transparent 9px);
}
.theme-rose .splash-ticket-cta-text{color:rgba(255,170,221,.7);}
.theme-rose .splash-ticket-arrow{color:rgba(255,110,180,.8);}
.theme-rose .splash-ticket-date{color:rgba(255,110,180,.3);}