@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@900&text=%E3%82%AF%E3%82%B7%E3%83%88&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=DM+Mono:wght@400;500&family=Tilt+Neon&display=swap');

  :root{
    color-scheme:dark;
    --bg:#000714;                       /* Nuit */
    --panel:#171026;                    /* Encre */
    --ink:#F4EEFF;                      /* Blanc tube */
    --ink-dim:rgba(244,238,255,0.58);
    --ink-faint:rgba(244,238,255,0.3);
    --yellow:#FFEB1F;                   /* Jaune néon : lecture, actions */
    --violet:#A855FF;                   /* Violet néon : exploration, liens */
    --violet-deep:#4A1FA8;              /* Violet profond : reflets, halos */
    --line:rgba(244,238,255,0.10);
    --glass-line:rgba(168,85,255,0.32);
    --ambient:
      radial-gradient(70% 45% at 10% 6%, rgba(74,31,168,0.55), transparent 72%),
      radial-gradient(55% 38% at 94% 56%, rgba(255,235,31,0.10), transparent 70%),
      radial-gradient(70% 45% at 6% 100%, rgba(168,85,255,0.22), transparent 70%);

    /* couleurs de rareté — réservées aux drops (cartes / résultat), pas au chrome UI */
    --r-commun:#4B9EFF;   --r-commun-2:#2F6FE0;
    --r-rare:#B573FF;     --r-rare-2:#E14BE8;
    --r-tresrare:#FF4B4B; --r-tresrare-2:#C42323;
    --r-legend:#FFD700;   --r-legend-2:#FF9500;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{ height:100%; background:var(--bg); font-family:'DM Mono', monospace; overflow:hidden; }
  body{ display:flex; align-items:center; justify-content:center; }

  #stage{
    position:relative;
    width:100vw; height:100vh; height:100dvh;
    overflow:hidden;
    flex-direction:column;
    background:var(--ambient), var(--bg);
  }
  #stage.active{ display:flex; }
  #stage.shake{ animation:stageShake .45s ease; }
  @keyframes stageShake{
    0%,100%{ transform:translate(0,0); }
    20%{ transform:translate(calc(-1 * var(--sh,4px)), calc(var(--sh,4px) * 0.5)); }
    40%{ transform:translate(var(--sh,4px), calc(var(--sh,4px) * -0.5)); }
    60%{ transform:translate(calc(-0.6 * var(--sh,4px)), calc(var(--sh,4px) * 0.25)); }
    80%{ transform:translate(calc(0.6 * var(--sh,4px)), calc(var(--sh,4px) * -0.25)); }
  }

  /* ambiance : un seul halo, sobre par défaut, se teinte à la couleur du drop au reveal */
  #blob{
    position:absolute; width:320px; height:320px; border-radius:50%;
    background:var(--violet);
    filter:blur(90px);
    opacity:0.14;
    top:-120px; left:50%; transform:translateX(-50%);
    z-index:0;
    transition:background 1s ease, opacity 1s ease;
  }
  #grain{
    position:absolute; inset:0;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
    pointer-events:none; mix-blend-mode:overlay; z-index:1;
  }
  /* vignettage cinématographique — concentre discrètement le regard vers
     le centre de l'écran, en permanence */
  #vignette{
    position:absolute; inset:0;
    pointer-events:none;
    z-index:13;
    background:radial-gradient(ellipse at 50% 42%, transparent 45%, rgba(0,0,0,0.38) 100%);
  }

  /* ligne du haut — continue, sur toute la largeur */
  #storybar{
    position:relative; z-index:3;
    height:2px; margin:0 22px; margin-top:16px;
    background:rgba(255,255,255,0.12);
    border-radius:2px;
    overflow:hidden;
  }
  #storybar::after{
    content:"";
    position:absolute; inset:0;
    background:var(--violet);
    box-shadow:0 0 10px var(--violet);
  }

  #content{
    flex:1;
    display:flex; flex-direction:column; justify-content:center;
    z-index:3; position:relative;
  }

  #head{ padding:max(18px, env(safe-area-inset-top)) 24px 4px; position:relative; z-index:3; text-align:center; }
  #title{
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:26px; font-weight:700; letter-spacing:-0.015em;
    color:var(--ink); margin:10px auto 0; line-height:1.15;
    max-width:290px;
    text-shadow:0 0 26px rgba(168,85,255,0.45);
  }

  /* ---------- reel ---------- */
  #reel-wrap{ position:relative; margin:34px 0 8px; height:222px; z-index:3; transform-origin:50% 50%; }
  #reel-mask{
    position:absolute; inset:0; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
  #reel{ position:absolute; top:0; left:0; height:100%; display:flex; align-items:center; will-change:transform; }

  .card{
    flex:0 0 auto;
    width:158px; height:198px;
    margin:0 8px;
    border-radius:22px;
    position:relative;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--line);
    box-shadow:0 0 0 rgba(0,0,0,0);
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .card::before{
    content:"";
    position:absolute; inset:0;
    opacity:var(--glow, 0.2);
    background:radial-gradient(circle at 50% 45%, var(--c1, #A855FF) 0%, transparent 68%);
    transition:opacity .35s ease;
  }
  .card::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
    transform:translateX(-130%);
    opacity:0;
    pointer-events:none;
  }
  .card.winner{ animation:winnerPop .55s cubic-bezier(.2,1.4,.4,1) forwards, winnerGlow 1.6s ease-in-out .55s infinite; z-index:6; }

  /* effet holographique — réservé au palier giga, une teinte qui tourne en
     continu par-dessus le halo normal, façon carte iridescente */
  .card.holo::before{ animation:holoShift 3s linear infinite; }
  .card.holo .vinyl{ animation:holoShift 3s linear infinite; }
  @keyframes holoShift{
    0%{ filter:hue-rotate(0deg) saturate(1.6); }
    100%{ filter:hue-rotate(360deg) saturate(1.6); }
  }

  /* carte actuellement sous le repère — reste allumée tant qu'elle y est */
  .card.active-light{
    transform:scale(1.035);
    box-shadow:0 0 24px var(--c1, #A855FF);
  }
  .card.active-light::before{ opacity:calc(var(--glow, 0.2) + 0.25); }
  .card.shine-once::after{ animation:cardShine .6s ease; }
  @keyframes cardShine{
    0%{ transform:translateX(-130%); opacity:0; }
    22%{ opacity:.9; }
    100%{ transform:translateX(130%); opacity:0; }
  }
  @keyframes winnerPop{
    0%{ transform:scale(1); }
    45%{ transform:scale(1.08); }
    100%{ transform:scale(1.03); }
  }
  @keyframes winnerGlow{
    0%,100%{ box-shadow:0 0 26px 2px var(--c1, #A855FF); }
    50%{ box-shadow:0 0 54px 10px var(--c1, #A855FF); }
  }

  .vinyl{
    position:relative;
    width:82px; height:82px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:
      repeating-radial-gradient(circle at center, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 5px),
      radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), transparent 45%),
      #111116;
    border:1px solid rgba(255,255,255,0.16);
    box-shadow:0 0 var(--blur, 18px) var(--c1, #A855FF);
  }
  .vinyl::after{
    content:""; position:absolute; inset:0; margin:auto;
    width:10px; height:10px; border-radius:50%;
    background:#000; border:1px solid rgba(255,255,255,0.35);
    z-index:2;
  }
  .icon-glyph{
    position:relative; z-index:3;
    color:var(--c1, #A855FF);
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,0.55));
  }
  .icon-glyph svg{ width:100%; height:100%; }
  @keyframes counterSpin{ to{ transform:rotate(-360deg); } }
  .icon-glyph.flip{ animation:flipIcon .5s ease forwards; }
  @keyframes flipIcon{
    0%{ transform:rotateY(0deg); }
    50%{ transform:rotateY(90deg); }
    100%{ transform:rotateY(0deg); }
  }
  .badge-txt{ display:none; }
  @keyframes spinVinyl{ to{ transform:rotate(360deg); } }

  /* anneaux de pulsation, uniquement sur la carte gagnante */
  .ring{
    position:absolute; border-radius:50%;
    border:1px solid var(--c1, #A855FF);
    width:82px; height:82px;
    opacity:0;
    pointer-events:none;
  }
  .card.winner .ring{ animation:ringPulse 1s ease-out forwards; }
  .card.winner .ring.r2{ animation-delay:.15s; }
  @keyframes ringPulse{
    0%{ opacity:calc(var(--glow,0.2)*1.1); transform:scale(1); }
    100%{ opacity:0; transform:scale(2.3); }
  }

  /* center pointer — effet métal brossé, s'illumine au passage des cartes */
  #pointer{
    position:absolute; top:-6px; bottom:-6px; left:50%; width:2px;
    background:repeating-linear-gradient(180deg, #dcdce6 0px, #a3a3b4 2px, #f0f0f6 4px, #8d8d9e 6px);
    transform:translateX(-50%); z-index:5;
    box-shadow:0 0 10px rgba(255,255,255,0.35);
    transition:box-shadow .12s ease;
  }
  #pointer.lit{ box-shadow:0 0 24px var(--violet), 0 0 10px #fff; }
  #pointer::before, #pointer::after{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
    transition:border-color .12s ease, filter .12s ease;
    filter:drop-shadow(0 0 3px rgba(255,255,255,0.4));
  }
  #pointer::before{ top:-2px; border-top:7px solid #e9e9f0; }
  #pointer::after{ bottom:-2px; border-bottom:7px solid #e9e9f0; }
  #pointer.lit::before{ border-top-color:var(--violet); filter:drop-shadow(0 0 6px var(--violet)); }
  #pointer.lit::after{ border-bottom-color:var(--violet); filter:drop-shadow(0 0 6px var(--violet)); }

  .spark{
    position:absolute; width:4px; height:4px; border-radius:50%;
    background:var(--violet);
    pointer-events:none; z-index:7;
    animation:sparkFly .7s ease-out forwards;
    box-shadow:0 0 6px var(--violet);
  }
  @keyframes sparkFly{
    0%{ transform:translate(0,0) scale(1); opacity:1; }
    100%{ transform:translate(var(--dx), var(--dy)) scale(0); opacity:0; }
  }

  /* ---------- result zone ---------- */
  #result{ margin-top:26px; text-align:center; min-height:20px; z-index:3; position:relative; }
  #meter{
    display:flex; gap:6px; justify-content:center;
    opacity:0; transition:opacity .4s ease;
  }
  #meter .pip{
    width:6px; height:6px; border-radius:50%;
    background:rgba(255,255,255,0.14);
  }
  #meter .pip.lit{ background:var(--violet); box-shadow:0 0 8px var(--violet); }
  #result.show #meter{ opacity:1; }
  #result.loading #meter{ opacity:1; animation:meterBreathe 1.1s ease-in-out infinite; }
  @keyframes meterBreathe{ 0%,100%{ opacity:.22; } 50%{ opacity:.65; } }

  /* ---------- footer ---------- */
  #foot{ margin-top:auto; padding:22px 24px max(34px, env(safe-area-inset-bottom)); z-index:3; position:relative; display:flex; justify-content:center; }
  #spin-btn{
    width:64px; height:64px;
    display:flex; align-items:center; justify-content:center;
    background:transparent;
    color:rgba(255,255,255,0.75);
    border:1.5px solid rgba(255,255,255,0.4);
    border-radius:50%;
    font-size:20px;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
  }
  #spin-btn:hover{ border-color:var(--violet); color:#fff; }
  #spin-btn:active{ transform:scale(0.94); }
  #spin-btn:disabled{ border-color:rgba(255,255,255,0.14); color:var(--ink-dim); box-shadow:none; animation:none; }
  #spin-btn .ico{ display:inline-block; }
  #spin-btn .ico.spin{ animation:iconSpin 0.9s linear infinite; }
  @keyframes iconSpin{ to{ transform:rotate(360deg); } }

  /* flash plein écran au drop, toujours violet */
  #burst{ position:absolute; inset:0; pointer-events:none; z-index:4; opacity:0; }
  #burst.go{ animation:flash .6s ease-out; }
  @keyframes flash{ 0%{opacity:0;} 14%{opacity:1;} 100%{opacity:0;} }
  .ray{
    position:absolute; top:50%; left:50%; width:2px; height:56%;
    background:linear-gradient(to bottom, var(--violet), transparent);
    transform-origin:top center; opacity:.5; border-radius:2px;
  }

  /* onde de couleur plein écran, dans la teinte de la rareté du drop */
  #colorwash{
    position:absolute; inset:0;
    z-index:4;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(circle at 50% 60%, var(--wash, #A855FF) 0%, transparent 62%);
  }
  #colorwash.go{ animation:washPulse 1.5s ease-out; }
  @keyframes washPulse{
    0%{ opacity:0; transform:scale(0.35); }
    28%{ opacity:0.6; }
    100%{ opacity:0; transform:scale(1.9); }
  }

  /* écran final "jackpot" — dès que le loot drop, la couleur de sa rareté
     monte progressivement et prend tout l'écran, comme un évanouissement
     doux. Elle reste ensuite vivante (aura, ondes, bulles, scintillement,
     nappe sonore), comme un espace de rêve prolongé, jusqu'au prochain
     drop. Laisse la place à ta propre vidéo au montage. */
  #jackpotFlash{
    position:absolute; inset:0;
    background:radial-gradient(circle at 50% 42%, var(--jc1, #fff) 0%, transparent 70%);
    opacity:0;
    pointer-events:none;
    z-index:14;
  }
  #jackpotFlash.go{ animation:jackpotFlashSoft 1.6s ease-out; }
  @keyframes jackpotFlashSoft{
    0%{ opacity:0; }
    30%{ opacity:.2; }
    100%{ opacity:0; }
  }

  /* la couleur monte très progressivement en fondu, comme si on augmentait
     la luminosité de l'écran — une seule propriété qui bouge (l'opacité),
     rien d'autre, pour un rendu parfaitement fluide */
  #cardFlood{
    position:absolute; inset:0;
    background:radial-gradient(circle at 50% 42%, var(--jc1, #A855FF) 0%, var(--jc2, #5B21B6) 55%, var(--jc2, #5B21B6) 100%);
    pointer-events:none;
    z-index:10;
    opacity:0;
    overflow:hidden;
    will-change:opacity;
    transition:opacity 2.1s linear;
  }
  #cardFlood.curtain{ opacity:1; }
  #cardFlood.holo{ animation:holoShift 4s linear infinite; }

  /* icône du loot, qui s'installe calmement au centre pendant que la
     couleur monte autour d'elle */
  #curtainIcon{
    position:absolute;
    top:42%; left:50%;
    width:22vw; height:22vw;
    max-width:88px; max-height:88px;
    min-width:60px; min-height:60px;
    transform:translate(-50%,-50%) scale(0.4);
    color:#fff;
    filter:drop-shadow(0 0 18px rgba(255,255,255,0.7));
    z-index:15;
    opacity:0;
    pointer-events:none;
  }
  #curtainIcon svg{ width:100%; height:100%; overflow:visible; }
  #curtainIcon.holo{ animation:holoShift 2.4s linear infinite; }

  /* le logo est composé de 3 fragments de LUI-MÊME, superposés à l'identique
     (chacun ne montrant qu'une partie via clip-path) — invisible tant que
     les fragments sont alignés, mais dès qu'on les décale légèrement, on
     voit littéralement le logo se fendre en morceaux */
  .icon-shard-layer{
    position:absolute; inset:0;
    transform:translate(0,0) rotate(0deg);
  }
  .icon-shard-layer svg{ width:100%; height:100%; }

  /* aura interne qui dérive lentement — n'apparaît qu'une fois la montée
     terminée, pour ne rien ajouter qui puisse saccader la montée elle-même */
  #cardFlood::before{
    content:"";
    position:absolute; inset:-20%;
    background:
      radial-gradient(circle at 28% 30%, rgba(255,255,255,0.32) 0%, transparent 45%),
      radial-gradient(circle at 76% 68%, var(--jc1, #A855FF) 0%, transparent 50%);
    mix-blend-mode:overlay;
    opacity:0;
  }
  #cardFlood.settled::before{ animation:auraDrift 6s ease-in-out infinite; }
  @keyframes auraDrift{
    0%,100%{ opacity:.5; transform:translate(0,0) scale(1); }
    50%{ opacity:.85; transform:translate(-4%, 4%) scale(1.1); }
  }

  /* respiration douce de la couleur pleine écran, tenue en continu */
  #cardFlood.settled{ animation:jackpotBreathe 3s ease-in-out infinite; }
  @keyframes jackpotBreathe{
    0%,100%{ filter:brightness(1); }
    50%{ filter:brightness(1.09); }
  }

  #jackpotFX{
    position:absolute; inset:0;
    z-index:12;
    pointer-events:none;
    overflow:hidden;
  }
  /* ondes de choc concentriques, envoyées à chaque battement */
  .jp-ring{
    position:absolute; top:42%; left:50%;
    width:36px; height:36px;
    margin:-18px 0 0 -18px;
    border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.7);
    opacity:0;
    transform:scale(0);
  }
  .jp-ring.go{ animation:jpRingExpand 1.6s cubic-bezier(.16,.8,.24,1) forwards; }
  @keyframes jpRingExpand{
    0%{ opacity:.7; transform:scale(0); }
    65%{ opacity:.18; }
    100%{ opacity:0; transform:scale(14); }
  }

  /* scintillement discret, continu */
  .jp-spark{
    position:absolute;
    width:3px; height:3px; border-radius:50%;
    background:#fff;
    opacity:0;
  }
  .jp-spark.go{ animation:jpTwinkle 2.6s ease-in-out infinite; }
  @keyframes jpTwinkle{
    0%,100%{ opacity:0; transform:scale(.6); }
    50%{ opacity:.85; transform:scale(1.4); }
  }

  /* bulles-icônes qui flottent doucement vers le haut pendant la tenue */
  .jp-bubble{
    position:absolute;
    bottom:-40px;
    width:22px; height:22px;
    color:rgba(255,255,255,0.8);
    opacity:0;
  }
  .jp-bubble svg{ width:100%; height:100%; }
  .jp-bubble.go{ animation:bubbleFloat linear forwards; }
  @keyframes bubbleFloat{
    0%{ opacity:0; transform:translateY(0) rotate(0deg) scale(0.8); }
    12%{ opacity:.85; }
    85%{ opacity:.5; }
    100%{ opacity:0; transform:translateY(-115vh) rotate(24deg) scale(1.1); }
  }

  /* ============================================================
     APPLICATION — menu, tours gratuits / pub / achat, gestion des musiques
     Même famille visuelle que la roulette (grain, halo violet, vignette,
     ligne animée), sans toucher au code de la roulette elle-même.
     ============================================================ */
  .app-screen{
    display:none;
    position:relative;
    width:100vw; height:100vh; height:100dvh;
    flex-direction:column;
    background:var(--ambient), var(--bg);
    color:var(--ink);
    overflow:hidden;
  }
  .app-screen.active{ display:flex; }

  /* grain — l'ambiance colorée vient du fond de .app-screen (--ambient) */
  .app-screen:not(#stage)::after{
    content:"";
    position:absolute; inset:0;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
    pointer-events:none; mix-blend-mode:overlay; z-index:1;
  }
  .scr-vignette{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(ellipse at 50% 38%, transparent 45%, rgba(0,0,0,0.4) 100%);
  }
  .scr-topline{
    position:relative; z-index:2;
    height:2px; margin:0 22px; margin-top:max(16px, env(safe-area-inset-top));
    background:rgba(255,255,255,0.12);
    border-radius:2px; overflow:hidden;
    flex:none;
  }
  .scr-topline::after{
    content:""; position:absolute; inset:0;
    background:var(--violet);
    box-shadow:0 0 10px var(--violet);
  }

  .app-screen .screen-pad{
    position:relative; z-index:2;
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:26px 24px max(28px, env(safe-area-inset-bottom));
    display:flex; flex-direction:column;
  }
  .app-eyebrow{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); }
  .app-title{
    font-family:'Bricolage Grotesque',sans-serif; font-size:26px; font-weight:700;
    margin-top:8px; letter-spacing:-.01em;
    text-shadow:0 0 26px rgba(168,85,255,0.4);
  }
  .app-sub{ font-family:'Bricolage Grotesque', sans-serif; font-size:13px; font-weight:400; color:var(--ink-dim); margin-top:8px; line-height:1.6; }

  .menu-hero-title{ text-align:center; }
  .menu-hero-title em{ font-style:normal; color:var(--violet); }

  /* échelle de rareté — petit teaser des 6 paliers, façon roulette */
  .rarity-ladder{ display:flex; gap:7px; justify-content:center; margin-top:20px; }
  .rarity-ladder span{
    width:5px; height:5px; border-radius:50%;
    background:currentColor;
    opacity:.85;
    box-shadow:0 0 5px currentColor;
  }

  .app-card{
    margin-top:24px;
    background:linear-gradient(165deg, rgba(255,255,255,0.035), rgba(255,255,255,0.005)), var(--panel);
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
    transition:border-color .35s ease, box-shadow .35s ease;
  }
  .app-card.is-available{ border-color:rgba(168,85,255,.4); box-shadow:0 0 20px rgba(168,85,255,.12); }
  .app-card.is-premium{ border-color:rgba(255,215,0,.4); box-shadow:0 0 20px rgba(255,215,0,.1); }
  .app-status{ display:flex; align-items:center; gap:10px; font-family:'Bricolage Grotesque', sans-serif; font-size:13px; font-weight:500; color:var(--ink-dim); }
  .app-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--violet); box-shadow:0 0 6px var(--violet); flex:none; transition:background .3s ease, box-shadow .3s ease; }
  .app-card.is-premium .dot{ background:#FFD700; box-shadow:0 0 6px #FFD700; }
  .app-card.is-locked .dot{ background:var(--ink-faint); box-shadow:none; }

  .menu-section-label{
    margin-top:30px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
    font-family:'Bricolage Grotesque',sans-serif;
  }

  .app-btn{
    display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%; margin-top:14px; padding:16px 0;
    border-radius:999px; border:1px solid var(--line);
    background:transparent; color:var(--ink);
    font-family:'Bricolage Grotesque',sans-serif; font-size:14.5px; font-weight:600;
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
  }
  .app-btn.primary{
    border:none;
    color:#fff;
    background:linear-gradient(135deg, #A66BFF, #6D2FD6);
    box-shadow:0 8px 24px -8px rgba(139,76,255,0.65);
  }
  .app-btn.primary:hover{ box-shadow:0 8px 28px -6px rgba(139,76,255,0.8); }
  .app-btn:hover{ border-color:var(--violet); }
  .app-btn:disabled{ opacity:.35; }
  .app-btn.ghost{ border-color:transparent; color:var(--ink-dim); margin-top:8px; }
  .app-btn:active{ transform:scale(.98); }

  .app-list{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
  .app-track{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
    transition:border-color .2s ease;
  }
  .app-track:hover{ border-color:rgba(255,255,255,0.16); }
  .app-track .info{ display:flex; align-items:center; gap:11px; min-width:0; }
  .app-track .rdot{ width:8px; height:8px; border-radius:50%; flex:none; box-shadow:0 0 6px currentColor; }
  .app-track .meta{ font-size:10.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.05em; }
  .app-track .name{ font-size:13.5px; font-weight:600; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-track button{ background:none; border:none; color:var(--ink-dim); font-size:17px; cursor:pointer; padding:4px 8px; flex:none; transition:color .2s ease; }
  .app-track button:hover{ color:#FF4B4B; }
  .app-empty{ margin-top:16px; font-family:'Bricolage Grotesque', sans-serif; font-size:13px; color:var(--ink-dim); text-align:center; padding:30px 10px; }

  .app-field{ margin-top:12px; }
  .app-field label{ font-size:10.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.06em; }
  .app-field input, .app-field select{
    width:100%; margin-top:6px; padding:12px 14px;
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    color:var(--ink); font-family:'Bricolage Grotesque',sans-serif; font-size:16px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .app-field input:focus, .app-field select:focus{
    outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(168,85,255,0.18);
  }
  .app-field select{ appearance:none; }
  .app-row{ display:flex; gap:10px; }
  .app-row .app-field{ flex:1; }

  .app-back{
    position:absolute; top:max(20px, env(safe-area-inset-top)); left:18px;
    z-index:5; background:none; border:none; color:var(--ink); cursor:pointer;
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease;
  }
  .app-back:active{ background:rgba(255,255,255,0.08); }

  /* ---------- mini-jeu : qui a mis ce son ? ---------- */
  .room-code{
    font-family:'DM Mono',monospace; font-size:40px; font-weight:700;
    letter-spacing:.32em; text-align:center; margin:14px 0 0; padding-left:.32em;
    text-shadow:0 0 24px rgba(168,85,255,0.55);
  }
  .game-song{
    font-family:'Bricolage Grotesque',sans-serif; font-size:26px; font-weight:700;
    text-align:center; margin:22px 0 6px; line-height:1.25; word-break:break-word;
    text-shadow:0 0 26px rgba(168,85,255,0.45);
  }
  .game-cover{
    display:block; width:min(56vw, 220px); aspect-ratio:1; object-fit:cover;
    margin:18px auto 0; border-radius:18px; background:#15151b;
    border:1px solid rgba(255,255,255,0.12); box-shadow:0 0 40px rgba(168,85,255,0.35);
  }
  .game-cover + .game-song{ margin-top:14px; }
  .song-reveal{
    position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
    z-index:16; padding:0 26px; text-align:center;
    animation:srIn .7s ease both;
  }
  @keyframes srIn{ from{ opacity:0; transform:translateY(-46%); } to{ opacity:1; transform:translateY(-50%); } }
  #sr-cover{
    display:block; width:min(52vw, 200px); aspect-ratio:1; object-fit:cover; margin:0 auto 16px;
    border-radius:18px; background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.3);
    box-shadow:0 12px 40px rgba(0,0,0,0.45);
  }
  .sr-title{ font-family:'Bricolage Grotesque',sans-serif; font-size:24px; font-weight:700; line-height:1.2; word-break:break-word; text-shadow:0 2px 18px rgba(0,0,0,0.5); }
  .sr-artist{ font-family:'Bricolage Grotesque',sans-serif; font-size:15px; font-weight:500; margin-top:6px; opacity:.92; text-shadow:0 2px 12px rgba(0,0,0,0.5); }
  .sr-meta{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; margin-top:8px; opacity:.7; }
  .sr-actions{ margin-top:8px; }
  .song-reveal .app-btn{ background:rgba(0,0,0,0.3); border-color:rgba(255,255,255,0.35); color:#fff; }
  .app-track .info{ flex:1; }
  .hist-cover{ width:44px; height:44px; border-radius:8px; object-fit:cover; flex:none; background:#1b1b22; }
  .app-track .ext{ color:var(--ink-dim); text-decoration:none; font-size:16px; padding:4px 8px; flex:none; transition:color .2s ease; }
  .app-track .ext:hover{ color:var(--violet); }
  .app-track .sub{ font-family:'Bricolage Grotesque',sans-serif; font-size:11.5px; color:var(--ink-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-btn.selected{ border-color:var(--violet); box-shadow:0 0 0 2px rgba(168,85,255,0.35); color:#fff; }
  .app-track.off{ opacity:.45; }
  .app-track .right{ font-family:'DM Mono',monospace; font-size:13px; color:var(--ink-dim); flex:none; }
  .app-track .right.good{ color:#3DDC84; }
  .app-track .right.bad{ color:#FF6B6B; }
  .guess-timer{ font-family:'Bricolage Grotesque',sans-serif; font-size:34px; font-weight:700; text-align:center; margin-top:10px; text-shadow:0 0 22px rgba(168,85,255,0.5); }
  .guess-timer.urgent{ color:#FF6B6B; text-shadow:0 0 22px rgba(255,75,75,0.6); }
  .timer-bar{ height:3px; border-radius:3px; background:rgba(255,255,255,0.1); overflow:hidden; margin:6px 0 10px; }
  .timer-bar div{ height:100%; width:100%; background:linear-gradient(90deg, var(--violet), #fff); }
  .ac-wrap{ position:relative; }
  .ac-list{
    position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
    background:#111116; border:1px solid rgba(168,85,255,0.4); border-radius:12px;
    box-shadow:0 12px 32px rgba(0,0,0,0.6); overflow:hidden; max-height:260px; overflow-y:auto;
  }
  .ac-item{
    display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px;
    background:none; border:none; border-bottom:1px solid var(--line);
    color:var(--ink); text-align:left; cursor:pointer; font-family:'Bricolage Grotesque',sans-serif;
  }
  .ac-item:last-child{ border-bottom:none; }
  .ac-item:hover, .ac-item.active{ background:rgba(168,85,255,0.16); }
  .ac-item img{ width:32px; height:32px; border-radius:6px; flex:none; object-fit:cover; background:#222; }
  .ac-item .t{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ac-item .a{ font-size:11px; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-hint{ font-family:'Bricolage Grotesque',sans-serif; font-size:12px; color:var(--ink-dim); text-align:center; margin-top:10px; }
  /* ============================================================
     DIRECTION ARTISTIQUE — néon jaune & violet + frozen glass
     Le noir domine. Une source de lumière par écran : jaune = ce qui
     joue ou ce qu'on peut lancer, violet = ce qu'on explore. Seul le
     logo vacille ; rien ne bouge en continu, sauf l'égaliseur.
     ============================================================ */
  .neon{
    font-family:'Tilt Neon',sans-serif; font-weight:400; font-style:normal; color:var(--yellow);
    text-shadow:0 0 6px rgba(255,235,31,0.85), 0 0 20px rgba(255,235,31,0.5), 0 0 44px rgba(255,235,31,0.28);
  }
  .logo{ display:block; text-align:center; font-size:clamp(44px, 14vw, 62px); line-height:1.05; margin:0; animation:signFlicker 11s linear infinite; }
  .kushito-sign{ display:block; flex:none; height:128px; width:auto; margin:0; overflow:visible; }
  .lt-tube{ stroke:var(--violet); filter:drop-shadow(0 0 3px var(--violet)) drop-shadow(0 0 10px rgba(168,85,255,0.75)) drop-shadow(0 0 26px rgba(168,85,255,0.4)); }
  .lt-kana{ font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Yu Gothic',sans-serif; font-weight:900; font-size:50px;
    fill:rgba(255,235,31,0.16); stroke:var(--yellow); stroke-width:2.1; stroke-linejoin:round;
    filter:drop-shadow(0 0 3px rgba(255,235,31,0.9)) drop-shadow(0 0 12px rgba(255,190,31,0.6)); }
  .lt-latin{ font-family:'Tilt Neon',sans-serif; font-size:27px; letter-spacing:2px; fill:#F4EEFF; stroke:none;
    filter:drop-shadow(0 0 3px rgba(255,235,31,0.95)) drop-shadow(0 0 12px rgba(255,235,31,0.6)); }
  .brand-lockup{ display:flex; align-items:center; justify-content:center; gap:14px; margin:10px 0 18px; }
  .brand-lockup .logo{ flex:none; white-space:nowrap; }
  .lt-seal rect{ fill:rgba(255,235,31,0.16); stroke:var(--yellow); stroke-width:2; }
  .lt-seal path{ stroke:#F4EEFF; stroke-width:1.8; stroke-linecap:round; }
  .lt-seal{ filter:drop-shadow(0 0 5px rgba(255,235,31,0.85)); }
  @keyframes signFlicker{
    0%,17%,19%,21%,62%,64%,100%{ opacity:1; }
    18%{ opacity:.45; } 20%{ opacity:.75; } 63%{ opacity:.6; }
  }
  .app-title, #title, .game-song{ text-shadow:none; }
  .app-title{ font-weight:800; letter-spacing:-0.02em; line-height:1.1; }
  #title{ font-weight:800; }
  .app-eyebrow, .app-track .meta, .app-field label{ font-family:'DM Mono',monospace; }
  /* la zone défilante prend toute la largeur (la barre de défilement reste au bord de la fenêtre) ; le contenu est centré par le padding */
  .app-screen .screen-pad{
    width:100%; max-width:none; margin:0;
    padding-left:max(24px, calc((100% - 512px) / 2)); padding-right:max(24px, calc((100% - 512px) / 2));
    scrollbar-width:thin; scrollbar-color:rgba(168,85,255,0.6) transparent; scrollbar-gutter:stable both-edges;
  }

  /* frozen glass */
  .app-card, .app-track, .wheel-card, .ac-list{
    background:linear-gradient(160deg, rgba(168,85,255,0.16), rgba(74,31,168,0.10));
    border:1px solid var(--glass-line);
    -webkit-backdrop-filter:blur(16px) saturate(1.25); backdrop-filter:blur(16px) saturate(1.25);
    box-shadow:inset 0 1px 0 rgba(244,238,255,0.12), 0 8px 30px -12px rgba(0,0,0,0.6);
  }
  .ac-list{ background:linear-gradient(160deg, #241245, #171026); }
  .app-card{ position:relative; }
  .app-card:focus-within{ z-index:30; }
  @media (max-width:899px){
    .ac-list{ top:auto; bottom:calc(100% + 6px); max-height:216px; }
  }
  .app-card.is-available, .app-card.is-premium{
    border-color:rgba(255,235,31,0.5);
    box-shadow:inset 0 1px 0 rgba(244,238,255,0.12), 0 0 22px rgba(255,235,31,0.12);
  }
  .app-card.is-available .dot, .app-card.is-premium .dot{ background:var(--yellow); box-shadow:0 0 8px var(--yellow); }
  .app-track:hover{ border-color:rgba(168,85,255,0.6); }
  .app-track .name{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; }

  /* ligne du haut : tube néon violet, cœur légèrement blanc, reflet blanc qui la parcourt */
  .scr-topline, #storybar{
    height:3px; overflow:visible; border-radius:3px;
    background:
      linear-gradient(90deg, transparent, rgba(255,255,255,0.95) 50%, transparent) no-repeat -22% 0 / 18% 100%,
      var(--violet);
    box-shadow:0 0 6px var(--violet), 0 0 16px rgba(168,85,255,0.7), 0 0 34px rgba(168,85,255,0.35);
    animation:neonSweep 5.5s ease-in-out infinite;
  }
  .scr-topline::after, #storybar::after{ inset:1px 0; background:rgba(244,238,255,0.5); box-shadow:none; }
  @keyframes neonSweep{
    0%{ background-position:-22% 0, 0 0; }
    68%, 100%{ background-position:122% 0, 0 0; }
  }

  /* boutons contour : ils s'allument au survol */
  .app-btn{
    background:rgba(0,7,20,0.35); border:1.5px solid var(--violet); color:var(--violet);
    font-weight:700; letter-spacing:.01em;
  }
  .app-btn:not(:disabled):hover{ background:var(--violet); color:var(--bg); border-color:var(--violet); box-shadow:0 0 24px rgba(168,85,255,0.55); }
  .app-btn.primary{
    background:rgba(0,7,20,0.35); border:1.5px solid var(--yellow); color:var(--yellow);
    box-shadow:0 0 16px rgba(255,235,31,0.16), inset 0 0 14px rgba(255,235,31,0.06);
  }
  .app-btn.primary:not(:disabled):hover{ background:var(--yellow); color:var(--bg); border-color:var(--yellow); box-shadow:0 0 30px rgba(255,235,31,0.6); }
  .app-btn.ghost{ background:none; border-color:transparent; color:var(--ink-dim); box-shadow:none; font-weight:600; }
  .app-btn.ghost:not(:disabled):hover{ background:none; color:var(--ink); box-shadow:none; border-color:transparent; }
  .app-btn.selected{ border-color:var(--yellow); color:var(--yellow); box-shadow:0 0 18px rgba(255,235,31,0.3); }
  .app-btn:disabled{ opacity:.4; }
  .app-back:active{ background:rgba(244,238,255,0.08); }
  .lang-toggle-float{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:max(20px, env(safe-area-inset-top)); right:18px; z-index:65;
    width:38px; height:38px; border-radius:50%; cursor:pointer;
    background:rgba(0,7,20,0.55); border:1.5px solid var(--glass-line); color:var(--ink-dim);
    font-family:'DM Mono',monospace; font-weight:500; font-size:11.5px;
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    transition:border-color .2s ease, color .2s ease;
  }
  .lang-toggle-float:active{ border-color:var(--violet); color:var(--ink); }

  .app-field input, .app-field select{ background:rgba(0,7,20,0.55); border:1px solid var(--glass-line); }
  .app-field input:focus, .app-field select:focus{ border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,235,31,0.16); }
  .ac-item:hover, .ac-item.active{ background:rgba(168,85,255,0.22); }

  #spin-btn{
    color:var(--yellow); border:1.5px solid var(--yellow); background:rgba(0,7,20,0.5);
    box-shadow:0 0 16px rgba(255,235,31,0.22), inset 0 0 12px rgba(255,235,31,0.08);
  }
  #spin-btn:hover{ background:var(--yellow); color:var(--bg); border-color:var(--yellow); box-shadow:0 0 30px rgba(255,235,31,0.6); }
  #spin-btn:disabled{ background:transparent; color:var(--ink-dim); border-color:rgba(244,238,255,0.18); box-shadow:none; }

  .guess-timer{ color:var(--yellow); font-family:'DM Mono',monospace; font-weight:500; text-shadow:none; }
  .guess-timer.urgent{ color:#FF6B6B; text-shadow:none; }
  .timer-bar div{ background:var(--yellow); box-shadow:0 0 8px rgba(255,235,31,0.6); }
  .room-code{ color:var(--yellow); text-shadow:0 0 18px rgba(255,235,31,0.35); font-weight:500; }
  .game-cover{ box-shadow:0 0 40px rgba(74,31,168,0.55); border-color:var(--glass-line); }

  /* roulettes par thème */
  .wheel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
  .wheel-card{
    position:relative; text-align:left; padding:16px 14px; border-radius:18px;
    color:var(--ink); cursor:pointer; overflow:hidden; font-family:'Bricolage Grotesque',sans-serif;
    transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .wheel-card:hover{ border-color:var(--yellow); box-shadow:inset 0 1px 0 rgba(244,238,255,0.12), 0 0 24px rgba(255,235,31,0.22); }
  .wheel-card:active{ transform:scale(.97); }
  .wheel-card .wi{ width:30px; height:30px; color:var(--violet); filter:drop-shadow(0 0 6px rgba(168,85,255,0.6)); transition:color .2s ease, filter .2s ease; }
  .wheel-card:hover .wi{ color:var(--yellow); filter:drop-shadow(0 0 8px rgba(255,235,31,0.7)); }
  .wheel-card .wi svg{ width:100%; height:100%; }
  .wheel-card .wn{ font-size:16px; font-weight:800; margin-top:12px; }
  .wheel-card .wd{ font-size:11.5px; color:var(--ink-dim); margin-top:3px; line-height:1.4; }
  .wheel-card .ws{ font-family:'DM Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; margin-top:10px; color:var(--yellow); }
  .wheel-card.used{ opacity:.7; }
  .wheel-card.used .ws{ color:var(--ink-faint); }

  .audio-bar{ align-items:center; justify-content:center; gap:14px; margin-top:12px; }
  .audio-btn{ width:auto; margin:0; padding:8px 20px; font-size:12.5px; }
  .audio-bar .eq i{ background:var(--violet); }
  .audio-bar .eq.on i{ background:var(--yellow); }

  /* jeu de la bombe */
  .seg{ display:flex; gap:8px; margin-top:8px; }
  .seg button{
    flex:1; padding:11px 0; border-radius:999px; cursor:pointer;
    background:rgba(0,7,20,0.55); border:1.5px solid var(--glass-line); color:var(--ink-dim);
    font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:14px;
    transition:border-color .2s ease, color .2s ease, box-shadow .2s ease;
  }
  .seg button:hover{ border-color:var(--violet); color:var(--ink); }
  .seg button.on{ border-color:var(--yellow); color:var(--yellow); box-shadow:0 0 16px rgba(255,235,31,0.25); }
  .bomb-stage{ text-align:center; }
  .bomb-ring{
    width:min(52vw, 220px); aspect-ratio:1; margin:20px auto 8px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:3px solid var(--yellow); background:rgba(0,7,20,0.45);
    box-shadow:0 0 24px rgba(255,235,31,0.45), inset 0 0 28px rgba(255,235,31,0.14);
  }
  .bomb-letter{ font-size:clamp(88px, 26vw, 124px); line-height:1; }
  .bomb-timer{ font-family:'DM Mono',monospace; font-size:44px; font-weight:500; color:var(--yellow); margin-top:8px; }
  .blind-listen{ display:flex; align-items:center; justify-content:center; margin:24px 0 8px; }
  .blind-ring{
    width:min(46vw, 190px); aspect-ratio:1; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:3px solid var(--violet); background:rgba(0,7,20,0.45);
    box-shadow:0 0 24px rgba(168,85,255,0.4), inset 0 0 28px rgba(168,85,255,0.14);
    animation:blindPulse 2.2s ease-in-out infinite;
  }
  .blind-ring svg{ width:38%; height:38%; color:var(--violet); filter:drop-shadow(0 0 8px rgba(168,85,255,0.7)); }
  @keyframes blindPulse{
    0%,100%{ box-shadow:0 0 24px rgba(168,85,255,0.4), inset 0 0 28px rgba(168,85,255,0.14); }
    50%{ box-shadow:0 0 38px rgba(168,85,255,0.65), inset 0 0 34px rgba(168,85,255,0.22); }
  }
  .bomb-timer.urgent{ color:#FF6B6B; }
  #bomb-timer-fill{ height:100%; width:100%; background:var(--yellow); box-shadow:0 0 8px rgba(255,235,31,0.6); }
  .bomb-turn{ font-size:17px; font-weight:700; margin-top:12px; color:var(--ink); }
  .bomb-turn.me{ color:var(--yellow); }
  .bomb-form{ display:flex; gap:10px; align-items:stretch; margin-top:14px; }
  .bomb-form .app-btn{ width:auto; margin-top:0; padding:0 26px; }
  .bomb-form .app-field input{ margin-top:0; height:100%; }
  .bomb-form input:disabled{ opacity:.5; }
  .app-track.turn{ border-color:var(--yellow); box-shadow:0 0 18px rgba(255,235,31,0.22); }
  .app-track .right.lives{ color:var(--yellow); letter-spacing:.12em; font-size:15px; }
  .bomb-winner{ font-family:'Tilt Neon',sans-serif; text-align:center; color:var(--yellow); font-size:clamp(34px, 9vw, 52px); margin:14px 0 6px; line-height:1.1;
    text-shadow:0 0 6px rgba(255,235,31,0.85), 0 0 20px rgba(255,235,31,0.5), 0 0 44px rgba(255,235,31,0.28); }
  .bomb-boom{
    position:absolute; inset:0; z-index:15; padding:24px; text-align:center;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    background:rgba(0,7,20,0.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    animation:boomIn .35s ease-out both;
  }
  @keyframes boomIn{ from{ opacity:0; transform:scale(1.08); } to{ opacity:1; transform:scale(1); } }
  .boom-word{ font-size:clamp(72px, 20vw, 130px); line-height:1; }
  .boom-line{ font-size:22px; font-weight:800; }
  .boom-sub{ font-size:14px; color:var(--ink-dim); }

  /* lecteur : barre de progression + égaliseur (la seule animation continue) */
  .sr-player{ margin:14px auto 4px; max-width:320px; }
  .sr-bar{ position:relative; height:3px; border-radius:3px; background:rgba(244,238,255,0.22); }
  #sr-bar-fill{ position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:3px; background:var(--yellow); box-shadow:0 0 8px rgba(255,235,31,0.7); }
  #sr-bar-fill::after{ content:""; position:absolute; right:-5px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--ink); box-shadow:0 0 8px rgba(255,235,31,0.8); }
  .sr-times{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:8px; font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:.06em; color:rgba(244,238,255,0.75); }
  .eq{ display:flex; align-items:flex-end; gap:3px; height:18px; }
  .eq i{ display:block; width:3px; height:100%; border-radius:1px; background:var(--ink); transform-origin:bottom; transform:scaleY(.25); }
  .eq.on i{ animation:eqBar 900ms ease-in-out infinite alternate; }
  .eq.on i:nth-child(2){ animation-duration:700ms; animation-delay:-.2s; }
  .eq.on i:nth-child(3){ animation-duration:1100ms; animation-delay:-.5s; }
  .eq.on i:nth-child(4){ animation-duration:800ms; animation-delay:-.1s; }
  .eq.on i:nth-child(5){ animation-duration:1000ms; animation-delay:-.7s; }
  .eq.on i:nth-child(6){ animation-duration:750ms; animation-delay:-.4s; }
  @keyframes eqBar{ from{ transform:scaleY(.2); } to{ transform:scaleY(1); } }
  .song-reveal .app-btn{ background:rgba(0,7,20,0.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .song-reveal .app-btn:not(:disabled):hover{ background:var(--violet); }
  .song-reveal .app-btn.primary{ background:rgba(0,7,20,0.55); }
  .song-reveal .app-btn.primary:not(:disabled):hover{ background:var(--yellow); }

  /* --- mise en page : panneaux, menu, navigation --- */
  .menu-cols, .menu-hero, .menu-actions{ display:block; }
  .menu-hero .app-eyebrow, .menu-hero .app-sub{ text-align:center; }
  .pane-a, .pane-b{ min-width:0; }
  .pane-b .app-card{ margin-top:14px; }
  #topnav{ display:none; }

  @media (min-width:900px){
    /* navigation flottante en verre dépoli */
    #topnav{
      display:flex; align-items:center; gap:24px;
      position:fixed; top:60px; left:50%; transform:translateX(-50%); z-index:60;
      width:min(1008px, calc(100vw - 112px)); padding:10px 12px 10px 24px; border-radius:999px; color:var(--ink);
      background:linear-gradient(160deg, rgba(168,85,255,0.18), rgba(74,31,168,0.12));
      border:1px solid var(--glass-line);
      -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25);
      box-shadow:inset 0 1px 0 rgba(244,238,255,0.12), 0 8px 30px -12px rgba(0,0,0,0.6);
    }
    #topnav.hidden{ display:none; }
    .nav-logo{ display:flex; align-items:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:17px; letter-spacing:-0.01em; }
    .nav-lantern{ height:32px; width:auto; margin-right:10px; overflow:visible; }
    .nl-tube{ stroke:var(--violet); filter:drop-shadow(0 0 2px var(--violet)) drop-shadow(0 0 7px rgba(168,85,255,0.7)); }
    .nl-note{ fill:var(--yellow); stroke:var(--yellow); stroke-width:1.8; stroke-linecap:round; filter:drop-shadow(0 0 3px rgba(255,235,31,0.8)); }
    .nav-links{ display:flex; gap:4px; margin:0 auto; }
    .nav-links a{
      display:inline-block; text-decoration:none;
      background:none; border:none; cursor:pointer; padding:8px 16px; border-radius:999px;
      font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size:13.5px; color:var(--ink-dim);
      transition:color .2s ease, background .2s ease;
    }
    .nav-links a:hover{ color:var(--ink); background:rgba(244,238,255,0.06); }
    .nav-links a.active{ color:var(--yellow); }
    .nav-cta{
      display:inline-block; text-decoration:none;
      cursor:pointer; padding:9px 22px; border-radius:999px; background:none;
      border:1.5px solid var(--yellow); color:var(--yellow);
      font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:13.5px;
      transition:background .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .nav-cta:hover{ background:var(--yellow); color:var(--bg); box-shadow:0 0 24px rgba(255,235,31,0.55); }
    .lang-toggle-float{ display:none; }
    .lang-toggle{
      cursor:pointer; width:38px; height:38px; border-radius:50%; background:none;
      border:1.5px solid var(--glass-line); color:var(--ink-dim);
      font-family:'DM Mono',monospace; font-weight:500; font-size:11.5px; letter-spacing:.02em;
      transition:border-color .2s ease, color .2s ease;
    }
    .lang-toggle:hover{ border-color:var(--violet); color:var(--ink); }

    .app-screen:not(#stage):not(#screen-game):not(#screen-bomb):not(#screen-blind) .app-back{ display:none; }
    .app-screen .screen-pad{ padding:154px max(56px, calc((100% - 1008px) / 2)) 40px; }
    #screen-locked .screen-pad, #screen-premium .screen-pad, #screen-ad .screen-pad{ padding:40px max(24px, calc((100% - 512px) / 2)); }
    #gv-end{ max-width:560px; margin:0 auto; }
    .app-title{ font-size:40px; }
    .app-sub{ font-size:14.5px; max-width:640px; }

    /* accueil : héros à gauche, actions à droite */
    .menu-cols{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:72px; align-items:center; min-height:calc(100dvh - 232px); }
    .brand-lockup{ justify-content:flex-start; gap:28px; margin:6px 0 24px; }
    .menu-hero .logo{ text-align:left; font-size:92px; }
    .brand-lockup .kushito-sign{ height:200px; }
    .menu-hero .app-eyebrow, .menu-hero .app-sub{ text-align:left; }
    .menu-hero .menu-hero-title{ font-size:54px; text-align:left; }
    .menu-hero .app-sub{ font-size:15.5px; }
    .menu-hero .rarity-ladder{ justify-content:flex-start; }
    .menu-actions{ display:flex; flex-direction:column; gap:14px; }
    .menu-tile{
      padding:18px 20px 20px; border-radius:18px;
      background:linear-gradient(160deg, rgba(168,85,255,0.16), rgba(74,31,168,0.10));
      border:1px solid var(--glass-line);
      -webkit-backdrop-filter:blur(16px) saturate(1.25); backdrop-filter:blur(16px) saturate(1.25);
      box-shadow:inset 0 1px 0 rgba(244,238,255,0.12), 0 8px 30px -12px rgba(0,0,0,0.6);
    }
    .menu-tile .menu-section-label{ margin-top:0; }
    .menu-tile .app-btn{ margin-top:12px; }

    /* roulettes en grille */
    .wheel-grid{ grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:16px; margin-top:28px; }
    .wheel-card{ padding:22px 18px; }
    .wheel-card .wn{ font-size:18px; }
    .wheel-card .wi{ width:36px; height:36px; }

    /* bibliothèque */
    #history-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }

    /* mini-jeu : deux panneaux côte à côte */
    .pane-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; }
    .pane-b .app-card{ margin-top:24px; }
    .pane-b > .menu-section-label:first-child{ margin-top:0; }
    #gv-guess .pane-a, #gv-reveal .pane-a{ text-align:center; }
    .game-cover{ width:min(26vw, 300px); }
    .game-song{ font-size:34px; }
    .guess-timer{ font-size:48px; }
    #guess-choices{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
    .room-code{ font-size:56px; }

    /* jeu de la bombe */
    #bv-end{ max-width:560px; margin:0 auto; }
    #bl-end{ max-width:560px; margin:0 auto; }
    .bomb-ring{ width:260px; margin-top:8px; }
    .blind-ring{ width:220px; }
    .bomb-letter{ font-size:150px; }
    .bomb-timer{ font-size:56px; }

    /* roue */
    #head{ padding-top:44px; }
    #title{ font-size:42px; max-width:none; }
    #reel-wrap{ margin:64px 0 24px; }
    #spin-btn{ width:78px; height:78px; }
    #foot{ padding-bottom:64px; }

    /* révélation : pochette à gauche, infos à droite */
    .song-reveal{ padding:0 56px; text-align:left; }
    .sr-inner{ max-width:940px; margin:0 auto; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:64px; align-items:center; }
    #sr-cover{ grid-column:1; grid-row:1 / span 9; width:min(27vw, 320px); margin:0; }
    .sr-inner > *:not(#sr-cover){ grid-column:2; }
    .sr-title{ font-size:40px; }
    .sr-artist{ font-size:19px; }
    .sr-player{ max-width:none; width:100%; margin:20px 0 8px; }
    .sr-actions{ display:flex; gap:12px; }
    .sr-actions .app-btn{ flex:1; }
  }

  @media (prefers-reduced-motion: reduce){
    .scr-topline, #storybar{ animation:none; }
    .logo{ animation:none; }
    .eq.on i{ animation:none; transform:scaleY(.6); }
    .blind-ring{ animation:none; }
  }