/* En-tête (son · logo · menu) et menu en bulles, communs à toutes les pages de l'app.
   Valeurs reprises de Figma « UX UI Final » (écrans 390 x 844) : « 01_accueil » (en-tête) et « Menu hamberguer ouverture » (bulles). */
.ma-header { position: fixed; left: 0; right: 0; top: 0; height: 0; z-index: 40; font-family: "Space Grotesk", system-ui, -apple-system, sans-serif; }
.ma-header, .ma-header *, .ma-drawer, .ma-drawer * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.ma-header a, .ma-header button, .ma-drawer a, .ma-drawer button { cursor: pointer; text-decoration: none; }

/* Bouton menu (Figma « Menu » 35 x 35 à droite : fond noir, contour blanc fin, lueur bleue, 2 traits) */
.ma-menu-btn { position: absolute; right: 30px; top: calc(40px + env(safe-area-inset-top)); width: 35px; height: 35px; padding: 0; display: block;
               border: .78px solid rgba(255,255,255,.95); border-radius: 7.8px; background: rgba(0,0,0,.79);
               box-shadow: 0 -8px 23px rgba(56,93,171,.43), inset 0 15px 45px rgba(68,85,241,.4), inset 0 5px 17px rgba(255,255,255,.25),
                           inset 0 -16px 20px rgba(30,121,248,.81), inset 0 -4px 4px rgba(255,255,255,.25), 0 2px 11px rgba(67,148,143,.61);
               transition: transform .2s ease; }
.ma-menu-btn:active { transform: scale(.93); }
.ma-menu-btn i { position: absolute; right: 9px; height: 1.56px; border-radius: 1px; background: #fff; transition: transform .35s ease, width .35s ease, top .35s ease; }
.ma-menu-btn i:nth-child(1) { top: 14.2px; width: 16px; }
.ma-menu-btn i:nth-child(2) { top: 19.2px; width: 12px; }
/* menu ouvert : les deux traits se croisent pour fermer */
.ma-menu-btn[aria-expanded="true"] i { top: 16.7px; width: 16px; }
.ma-menu-btn[aria-expanded="true"] i:nth-child(1) { transform: rotate(45deg); }
.ma-menu-btn[aria-expanded="true"] i:nth-child(2) { transform: rotate(-45deg); }

/* Logo Continuum (Figma « Group 2293 » 54 x 27, centré) */
.ma-logo { position: absolute; left: 50%; margin-left: -27px; top: calc(43px + env(safe-area-inset-top)); width: 54px; height: 27px; display: block;
           animation: ma-glow 4s ease-in-out infinite; }
.ma-logo img { width: 100%; height: 100%; display: block; }
@keyframes ma-glow { 50% { filter: brightness(1.2) drop-shadow(0 0 4px rgba(224,252,253,.45)); } }

/* Bouton son (Figma « son » 34 x 33 à gauche : rond gris foncé, contour gris) */
.ma-sound { position: absolute; left: 34px; top: calc(39px + env(safe-area-inset-top)); width: 34px; height: 33px; border-radius: 60px; padding: 0;
            display: grid; place-items: center; color: #fff; border: 1px solid #59595e; background: #1c1c1c; box-shadow: inset 0 4px 4px rgba(255,255,255,.25); }
.ma-sound img, .ma-sound svg { width: 16px; height: 16px; display: block; }

/* Menu en bulles (plein écran) */
.ma-drawer { position: fixed; inset: 0; z-index: 30; opacity: 0; visibility: hidden; color: #fff; overflow: hidden; cursor: default;
             font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
             transition: opacity .4s ease, visibility 0s linear .4s; background: linear-gradient(180deg, #130622 0%, #000 100%); }
.ma-drawer.open { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
/* scène de 390 x 844 mise à l'échelle de l'écran (la grille de Figma est gardée) */
.ma-stage { position: absolute; left: 50%; top: 50%; width: 390px; height: 844px; transform-origin: 0 0; }
.ma-stage svg.ma-ciel { position: absolute; left: -400px; top: -400px; width: 1190px; height: 1644px; overflow: visible; pointer-events: none; }
.ma-bulle { position: absolute; display: grid; place-items: center; border-radius: 50%; padding: 0 12px; color: #fff; text-align: center;
            font: 500 15px/1.2 "Space Grotesk", sans-serif; text-wrap: balance;
            background: rgba(53,4,80,.8);
            box-shadow: inset 0 15px 45px rgba(68,85,241,.4), inset 0 5px 17px rgba(255,255,255,.25), inset 0 -11px 26px rgba(2,15,255,.36);
            transform: scale(.2); opacity: 0; }
.ma-bulle span { display: block; animation: none; }
.ma-drawer.open .ma-bulle { animation: ma-pop .7s cubic-bezier(.2,1.5,.4,1) forwards, ma-flotte var(--fd, 6s) ease-in-out var(--fdel, .7s) infinite; animation-delay: var(--pd, 0s), var(--fdel, .7s); }
.ma-bulle:active { filter: brightness(1.25); }
.ma-bulle[aria-current="page"] { box-shadow: inset 0 15px 45px rgba(68,85,241,.55), inset 0 5px 17px rgba(255,255,255,.35), inset 0 -11px 26px rgba(2,15,255,.6), 0 0 26px rgba(68,85,241,.55); }
@keyframes ma-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ma-flotte { 0%, 100% { transform: translate(0, 0); opacity: 1; } 33% { transform: translate(var(--fx, 3px), var(--fy, -7px)); opacity: 1; } 66% { transform: translate(calc(var(--fx, 3px) * -1), calc(var(--fy, -7px) * -.5)); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ma-drawer.open .ma-bulle { animation: ma-pop .01s forwards; } }
.ma-soon { position: fixed; left: 50%; bottom: calc(40px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px 14px; border-radius: 10px; z-index: 41;
           background: #fff; color: #111; font: 500 13px "Space Grotesk", sans-serif; opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap; margin: 0; }
.ma-soon.show { opacity: 1; }

/* Bouton principal commun (Figma « Intro / Bouton principal », UX UI Final : noir, lueur bleue en bas, reflet blanc en haut) */
.cx-btn { box-sizing: border-box; appearance: none; display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 28px; border: 0; border-radius: 16px; cursor: pointer;
          color: #fff; font: 500 16px/1.4 "Space Grotesk", sans-serif; text-decoration: none; -webkit-tap-highlight-color: transparent;
          background: #0f0f0f;
          box-shadow: 0 -8px 23px rgba(56,93,171,.43), inset 0 15px 45px rgba(68,85,241,.4), inset 0 5px 17px rgba(255,255,255,.25), inset 0 -16px 20px rgba(30,121,248,.81), inset 0 -4px 4px rgba(255,255,255,.25);
          transition: transform .15s ease, filter .2s ease; }
.cx-btn:active { transform: scale(.97); filter: brightness(1.2); }
/* variante « Commencer » (chargement, Lobby, Forum) : bleu nuit, 45 px, gras 14 */
.cx-btn.bleu { height: 45px; background: #282b6e; font-weight: 700; font-size: 14px; }
/* bouton icône carré 31 px (Figma « RESTART », « More », « setting ») */
.cx-ico { appearance: none; width: 31px; height: 31px; padding: 0; display: grid; place-items: center; border: 1px solid #fff; border-radius: 10px; background: #000; cursor: pointer; color: #fff;
          box-shadow: inset 0 -16px 20px rgba(30,121,248,.81), inset 0 -4px 4px rgba(255,255,255,.25), 0 2px 11px rgba(67,148,143,.61), inset 0 14px 11px rgba(0,0,0,.4); }
.cx-ico:active { transform: scale(.93); }
/* encadré commun (Figma « Frame 27/28 » de l'accueil) */
.cx-cadre { background: rgba(29,17,46,.5); border-radius: 10px; }