:root{
      --accent:#7c3aed; /* couleur thème */
      --accent-2:#22d3ee;
      --text:#f8fafc; --muted:#94a3b8;
      --panel:#0b0f26cc; --border:#2d356b;
      --card:#0f1227aa; --card-border:#2b2f5a;
      --bg1:#0b1020; --bg2:#11163a;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Segoe UI Emoji","Segoe UI Symbol","Apple Color Emoji","Noto Color Emoji"; color:var(--text);
      /* Fond statique de base (fallback) */
      background:radial-gradient(1200px 600px at 70% -10%, #1f224a55, transparent),
                 radial-gradient(900px 650px at -10% 20%, #0ea5e955, transparent),
                 linear-gradient(160deg, var(--bg1), var(--bg2));
      overflow:hidden}
    /* Couche animée séparée pour éviter les artefacts sur mobile */
    body::before{
      content:""; position:fixed; inset:-20vmax; z-index:-1; pointer-events:none;
      background:radial-gradient(60vmax 30vmax at 70% -10%, #1f224a66, transparent 60%),
                 radial-gradient(45vmax 35vmax at 10% 20%, #0ea5e966, transparent 60%),
                 linear-gradient(160deg, var(--bg1), var(--bg2));
      background-repeat:no-repeat;
      background-size:140vmax 80vmax, 120vmax 90vmax, cover;
      background-position:60% -10%, 10% 20%, center;
      will-change:transform, background-position;
      animation:bgSwirl 16s ease-in-out infinite alternate;
    }
    @keyframes bgSwirl{
      0%   { transform:translate3d(0,0,0) rotate(0deg) scale(1.06); background-position:60% -10%, 0% 30%, center; }
      50%  { transform:translate3d(-3vmax,2vmax,0) rotate(6deg)  scale(1.08); background-position:92% 10%, 12% 15%, center; }
      100% { transform:translate3d(3vmax,-2vmax,0) rotate(-6deg) scale(1.08); background-position:45% -18%, 25% 38%, center; }
    }
    @media (prefers-reduced-motion: reduce){ body::before{ animation:none; } }
    .wrap{display:grid;place-items:center;min-height:100svh;padding:16px}
    .card{width:min(1440px,98vw);background:var(--card);backdrop-filter:blur(6px);border:1px solid var(--card-border);border-radius:20px;box-shadow:0 10px 30px #0006,0 0 0 1px #000 inset;padding:16px 16px 8px}
    header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 4px 16px;flex-wrap:wrap}
    .title{font-size:clamp(22px,4.2vw,40px);font-weight:800;letter-spacing:.3px;
      /* Neon white with subtle light-blue tint */
      color:#f3f9ff;
      text-shadow:0 0 3px #e6f5ff, 0 0 8px #cfefff, 0 0 18px #a3e1ff, 0 0 32px #7dd3fc55;
      animation:neonWhite 2.4s ease-in-out infinite alternate;
    }
    /* Make the badge text white and disable neon on it */
    .title .badge{font-size:.7em;font-weight:700;color:#fff;margin-left:10px;text-shadow:none;animation:none}
    .sub{color:var(--muted);font-size:14px}
    .controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .btn{appearance:none;border:none;cursor:pointer;background:linear-gradient(180deg,#1f254e,#1a1d3a);color:var(--text);padding:10px 14px;border-radius:12px;font-weight:700;letter-spacing:.2px;border:1px solid #2c3170;box-shadow:0 2px 0 #000a,inset 0 0 10px #ffffff05;transition:transform .06s ease,filter .12s ease}
    .btn:active{transform:translateY(1px);filter:brightness(.92)}
    .btn.primary{background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 70%,#fff 10%),var(--accent));border-color:color-mix(in oklab,var(--accent),#000 30%)}
    .btn.ghost{background:transparent;border-color:#2c3170}
    .statusbar{display:flex;gap:10px;align-items:center;font-weight:700;font-size:14px;padding:8px 0 12px}
    .pill{padding:6px 10px;border-radius:999px;background:#11153a;border:1px solid #263079}
    .pill .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);margin-right:8px;box-shadow:0 0 8px var(--accent)}
    .game-frame{position:relative;aspect-ratio:16/9;width:100%;background:#050815;border-radius:16px;overflow:hidden;border:1px solid #262a4d}
    canvas{width:100%;height:100%;display:block;image-rendering:pixelated; touch-action:none}
    .mobile-hud{ display:none; position:absolute; top:8px; left:8px; right:auto; z-index:20; gap:8px; align-items:center }
    .mh-pill{ display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; background:rgba(15,21,42,0.7); border:1px solid #2b335a; color:#e2e8f0 }
    .mh-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent) }
    .overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,#0a0f22aa,#070a16cc);backdrop-filter:blur(2px); z-index:1000}
    /* Confetti canvas sits above overlays */
    #confetti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3000 }
    .panel{width:min(640px,92%);background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:18px;text-align:center;box-shadow:0 10px 30px #0007,inset 0 0 40px #ffffff06}
    .panel h2{margin:8px 0 6px;font-size:clamp(22px,3.6vw,32px)}
    .panel p{margin:0 0 12px;color:var(--muted)}
    /* Desktop-only: center and slightly enlarge status pills */
    @media (pointer: fine){
      .statusbar{ justify-content:center; font-size:16px; }
      .statusbar .pill{ padding:8px 14px; font-size:16px; }
      .statusbar .pill .dot{ width:12px; height:12px; margin-right:10px; }
    }
    /* Time penalty flash animation (stronger, with wiggle + glow) */
    #hudTimer, #mobTimer{ display:inline-block; will-change:transform, color, text-shadow; }
    .time-hit{ animation: timeHit 0.8s ease-out; }
    @keyframes timeHit{
      0%   { transform:scale(1) translateX(0); color:inherit; text-shadow:none; }
      10%  { transform:scale(1.16) translateX(-2px); color:#ef4444; text-shadow:0 0 10px #ef444480, 0 0 20px #ef444440; }
      20%  { transform:scale(1.20) translateX(2px);  color:#ef4444; text-shadow:0 0 12px #ef4444aa, 0 0 26px #ef444470; }
      30%  { transform:scale(1.14) translateX(-1px); color:#f87171; text-shadow:0 0 10px #ef444490, 0 0 20px #ef444455; }
      45%  { transform:scale(1.08) translateX(1px);  color:#fca5a5; text-shadow:0 0 6px #ef444460; }
      100% { transform:scale(1) translateX(0); color:inherit; text-shadow:none; }
    }
    @media (prefers-reduced-motion: reduce){
      .time-hit{ animation: none; }
      #hudTimer.time-hit, #mobTimer.time-hit{ color:#ef4444; }
    }
    /* Subtle neon pulse for the main title */
    @keyframes neonGlow{
      0%{ text-shadow:0 0 2px #ff6bd6, 0 0 6px #ff3fbf, 0 0 12px #b266ff }
      100%{ text-shadow:0 0 4px #ff6bd6, 0 0 12px #ff3fbf, 0 0 24px #b266ff }
    }
    @media (prefers-reduced-motion: reduce){ .title{ animation:none; } }
    /* Neon pulse animation in bluish white */
    @keyframes neonWhite{
      0%{ text-shadow:0 0 2px #eaf6ff, 0 0 6px #d9f1ff, 0 0 12px #bfe8ff, 0 0 20px #93ddff55 }
      100%{ text-shadow:0 0 4px #eaf6ff, 0 0 12px #cfefff, 0 0 24px #a3e1ff, 0 0 36px #7dd3fc88 }
    }
    .achieve{position:absolute;left:50%;top:16px;transform:translateX(-50%);background:#0b1027ee;border:1px solid #33407b;border-radius:14px;padding:10px 14px;font-weight:700;box-shadow:0 8px 20px #0007;animation:pop .2s ease,slideup .5s ease}
    @keyframes pop{from{transform:translateX(-50%) scale(.9);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
    @keyframes slideup{from{top:28px}to{top:16px}}

    /* Bottom‑center mobile touchbar (outside game frame) */
    .touchbar{ display:none; }
    @media (pointer: coarse) {
      .touchbar{ /* visible on mobile at all times */
        display:flex;
        position:fixed; left:50%; transform:translateX(-50%);
        bottom:calc(env(safe-area-inset-bottom,0) + 8px); z-index:1500;
        justify-content:center; gap:12px; padding:0;
        background:transparent; border:none; border-radius:0;
      }
      /* Always show on mobile; ignore is-hidden */
      .touchbar.is-hidden{ display:flex !important; }
      .touchbar button{ appearance:none; background:rgba(14,19,48,0.35); border:1px solid #2b3170; border-radius:12px; color:#e2e8f0; font-weight:900; font-size:22px; width:56px; height:56px; box-shadow:0 2px 0 #0006; touch-action:manipulation; }
      .touchbar button:active{ filter:brightness(.9); }
    }

    /* Mobile landscape: maximize game area */
    @media (pointer: coarse) and (orientation: landscape){
      .wrap{ padding:0; }
      .card{ width:100vw; max-width:100vw; padding:8px; border:none; border-radius:0; background:transparent; box-shadow:none; }
      header, .statusbar{ display:none; }
      .mobile-hud{ display:flex; }
      /* Keep touch controls visible as an overlay */
      .touchbar{
        display:flex;
        position:fixed; left:0; right:0; transform:none;
        width:100vw;
        bottom:calc(env(safe-area-inset-bottom,0) + 8px); z-index:1500;
        background:transparent; border:none; border-radius:0;
        --thumb-inset: clamp(24px, 10vw, 120px);
        padding:0 var(--thumb-inset); gap:12px;
        justify-content:flex-start; align-items:center;
      }
      .touchbar button{
        width:56px; height:56px; font-size:22px;
        background:rgba(14,19,48,0.35);
        color:#e2e8f0; border:1px solid #2b3170;
      }
      /* Layout: Jump on the far left; Left+Right grouped at far right */
      .touchbar button[data-dir="jump"]{ order:0; margin-right:auto; }
      .touchbar button[data-dir="left"]{ order:1; }
      .touchbar button[data-dir="right"]{ order:2; }
      .touchbar button:active{ filter:brightness(1.05); }
    }