@property --mx-split { syntax:'<percentage>'; inherits:true; initial-value:50%; }
.mx { --mx-ink:#030305; --mx-amber:#ffb347; --mx-ember:#ff7a1a; --mx-blood:#c8402f; --mx-cyan:#7fe3ff; --mx-azure:#3fb8ff; --mx-violet:#8a63ff; --mx-paper:#efe3c0; --mx-display:'Anton','Impact','Arial Narrow',sans-serif; --mx-body:'Cabin',system-ui,-apple-system,'Segoe UI',sans-serif; }

/* ---------- l'écran scindé ---------- */
.mx { position:fixed; inset:0; --mx-split:50%; --mx-skew:7%; --mx-px:0; --mx-py:0; transition:--mx-split .8s cubic-bezier(.2,.9,.2,1); }
.mx[data-hover="left"] { --mx-split:61%; } .mx[data-hover="right"] { --mx-split:39%; }
.mx.mx-chosen-left { --mx-split:100%; } .mx.mx-chosen-right { --mx-split:0%; }
.mx-panel { position:absolute; inset:0; display:block; overflow:hidden; cursor:pointer; color:inherit; text-decoration:none; outline:0; border:0; padding:0; background:none; text-align:inherit; font:inherit; transition:filter .6s ease, opacity .5s ease; }
.mx-panel.mx-left  { clip-path:polygon(0 0, calc(var(--mx-split) + var(--mx-skew)) 0, calc(var(--mx-split) - var(--mx-skew)) 100%, 0 100%); }
.mx-panel.mx-right { clip-path:polygon(calc(var(--mx-split) + var(--mx-skew)) 0, 100% 0, 100% 100%, calc(var(--mx-split) - var(--mx-skew)) 100%); }
.mx[data-hover="left"] .mx-right, .mx[data-hover="right"] .mx-left { filter:brightness(.4) saturate(.5) blur(1.6px); }
.mx[data-hover="left"] .mx-left, .mx[data-hover="right"] .mx-right { filter:brightness(1.1) saturate(1.12); }
.mx.mx-chosen-left .mx-right, .mx.mx-chosen-right .mx-left { opacity:0; pointer-events:none; }
.mx.mx-chosen-left .mx-copy, .mx.mx-chosen-right .mx-copy { opacity:0; transition:opacity .25s; }
.mx-bg { position:absolute; inset:-3%; transition:transform .2s linear; transform:translate(calc(var(--mx-px) * -8px), calc(var(--mx-py) * -5px)); }
.mx-left .mx-bg  { background:radial-gradient(ellipse at 24% 32%, #46200d 0%, #1b0a0b 38%, #070304 72%, #020102 100%); }
.mx-right .mx-bg { background:radial-gradient(ellipse at 76% 18%, #123166 0%, #07122b 40%, #030818 72%, #010207 100%); }
/* trame de bande dessinée + vignette très sombre */
.mx-panel::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:6; mix-blend-mode:multiply;
  background:radial-gradient(ellipse at 50% 58%, transparent 34%, rgba(0,0,0,.82) 100%), radial-gradient(circle, rgba(0,0,0,.5) 1.2px, transparent 1.8px) 0 0 / 7px 7px; }
.mx-scene { position:absolute; bottom:0; height:min(70vh, 74vw); z-index:2; transform:translate(calc(var(--mx-px) * -16px), calc(var(--mx-py) * -9px)); transition:transform .2s linear; overflow:visible; }
.mx-left .mx-scene { aspect-ratio:390/720; right:calc(100% - var(--mx-split) + var(--mx-skew) + 1.2vw); }
.mx-right .mx-scene { aspect-ratio:560/720; left:calc(var(--mx-split) + 1.2vw); }
.mx-fx { position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; transform:translate(calc(var(--mx-px) * -28px), calc(var(--mx-py) * -14px)); }

/* ---------- textes ---------- */
.mx-copy { position:absolute; z-index:7; top:9.5vh; max-width:min(36vw, 520px); }
.mx-left .mx-copy { left:5vw; } .mx-right .mx-copy { right:5vw; text-align:right; }
.mx-kicker { font:700 clamp(11px, 1.05vw, 14px)/1.2 var(--mx-body); letter-spacing:.22em; text-transform:uppercase; color:#cdb98d; text-shadow:0 2px 0 #000; margin:0 0 clamp(22px, 3.6vw, 60px); position:relative; z-index:2; }
.mx-title { margin:0; padding-top:.14em; font:400 clamp(40px, 6.9vw, 108px)/1 var(--mx-display); text-transform:uppercase; transform:rotate(-2deg) skewX(-5deg); transform-origin:left bottom; letter-spacing:.01em; paint-order:stroke fill; -webkit-text-stroke:clamp(3px,.5vw,7px) #000; transition:letter-spacing .5s ease, text-shadow .5s ease, transform .5s ease; }
.mx-right .mx-title { transform:rotate(2deg) skewX(-5deg); transform-origin:right bottom; }
.mx-left .mx-title  { color:#ffcf6a; text-shadow:.045em .05em 0 #7a1b12, 0 0 .5em rgba(255,140,40,.45); }
.mx-right .mx-title { color:#aeeaff; text-shadow:.045em .05em 0 #3b2a8c, 0 0 .5em rgba(63,184,255,.5); }
.mx[data-hover="left"] .mx-left .mx-title { letter-spacing:.045em; text-shadow:.06em .07em 0 #7a1b12, 0 0 .9em rgba(255,140,40,.8); transform:rotate(-3deg) skewX(-5deg) scale(1.04); }
.mx[data-hover="right"] .mx-right .mx-title { letter-spacing:.045em; text-shadow:.06em .07em 0 #3b2a8c, 0 0 .9em rgba(63,184,255,.9); transform:rotate(3deg) skewX(-5deg) scale(1.04); }
.mx-bubble { display:inline-block; position:relative; margin:.9em 0 0; padding:.55em .95em; background:var(--mx-paper); color:#150d08; border:3px solid #000; border-radius:16px; box-shadow:4px 4px 0 #000; font:700 clamp(13px, 1.3vw, 17px)/1.25 var(--mx-body); transform:rotate(-1.2deg); }
.mx-bubble::after { content:""; position:absolute; bottom:-14px; left:26px; width:18px; height:18px; background:var(--mx-paper); border-right:3px solid #000; border-bottom:3px solid #000; transform:rotate(45deg) skew(8deg,8deg); }
.mx-right .mx-bubble { transform:rotate(1.2deg); } .mx-right .mx-bubble::after { left:auto; right:26px; }
.mx-chips { list-style:none; display:flex; gap:8px; flex-wrap:wrap; margin:1.3em 0 0; padding:0; } .mx-right .mx-chips { justify-content:flex-end; }
.mx-chips li { opacity:0; transform:translateY(16px) rotate(-2deg); transition:opacity .45s ease, transform .45s cubic-bezier(.2,1.4,.4,1); transition-delay:calc(var(--mx-i) * 80ms); background:#0a0a0f; border:2px solid; padding:.3em .8em; border-radius:999px; font:700 clamp(11px, 1vw, 14px) var(--mx-body); letter-spacing:.05em; text-transform:uppercase; box-shadow:3px 3px 0 #000; }
.mx-left .mx-chips li  { border-color:var(--mx-amber); color:#ffd993; } .mx-right .mx-chips li { border-color:var(--mx-cyan); color:#c9f3ff; }
.mx[data-hover="left"] .mx-left .mx-chips li, .mx[data-hover="right"] .mx-right .mx-chips li { opacity:1; transform:none; }
.mx-cta { display:inline-flex; align-items:center; gap:.5em; margin-top:1.1em; padding:.5em 1.1em; font:400 clamp(16px, 1.7vw, 24px) var(--mx-display); letter-spacing:.08em; text-transform:uppercase; color:#0a0608; border:3px solid #000; box-shadow:5px 5px 0 #000; transform:rotate(-1.5deg); transition:transform .25s ease, box-shadow .25s ease; opacity:0; }
.mx-left .mx-cta { background:var(--mx-amber); } .mx-right .mx-cta { background:var(--mx-cyan); }
.mx[data-hover="left"] .mx-left .mx-cta, .mx[data-hover="right"] .mx-right .mx-cta { opacity:1; }
.mx-panel:hover .mx-cta, .mx-panel:focus-visible .mx-cta { transform:rotate(-1.5deg) translate(-3px,-3px); box-shadow:8px 8px 0 #000; }
.mx-panel:active .mx-cta { transform:rotate(-1.5deg) translate(3px,3px); box-shadow:2px 2px 0 #000; }

/* ---------- la lame qui sépare ---------- */
.mx-bladeWrap { position:absolute; inset:0; pointer-events:none; z-index:8; filter:drop-shadow(0 0 10px rgba(255,190,110,.6)) drop-shadow(0 0 22px rgba(63,184,255,.35)); }
.mx-blade { position:absolute; inset:0; clip-path:polygon(calc(var(--mx-split) + var(--mx-skew) - .3%) 0, calc(var(--mx-split) + var(--mx-skew) + .3%) 0, calc(var(--mx-split) - var(--mx-skew) + .3%) 100%, calc(var(--mx-split) - var(--mx-skew) - .3%) 100%); background:linear-gradient(180deg, #ffb347 0%, #fff4d6 48%, #7fe3ff 100%); background-size:100% 200%; animation:mx-shimmer 6s ease-in-out infinite alternate; }
.mx.mx-chosen-left .mx-bladeWrap, .mx.mx-chosen-right .mx-bladeWrap { opacity:0; transition:opacity .4s; }
@keyframes mx-shimmer { to { background-position:0 100%; } }

/* ---------- en-tête ---------- */
.mx-heading { position:fixed; z-index:9; top:2.4vh; left:50%; transform:translateX(-50%); font:400 clamp(15px, 1.9vw, 26px) var(--mx-display); letter-spacing:.32em; text-transform:uppercase; color:#d8c79e; text-shadow:0 2px 0 #000, 0 0 18px rgba(0,0,0,.9); white-space:nowrap; pointer-events:none; }
.mx-me { position:fixed; z-index:9; top:1.8vh; right:2vw; display:flex; align-items:center; gap:10px; padding:5px 14px 5px 6px; background:#0b0b12dd; border:2px solid #000; box-shadow:3px 3px 0 #000; border-radius:999px; font:700 13px var(--mx-body); }
.mx-me i { width:28px; height:28px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #f1cba5, #b98a63); border:2px solid #000; display:grid; place-items:center; font-style:normal; font-size:15px; }
.mx-me small { color:#e3b94f; font-weight:700; }

/* ---------- animations de scène ---------- */
.mx-lanternGlow { transform-box:fill-box; transform-origin:center; animation:mx-flick 2.7s infinite; } .mx[data-hover="left"] .mx-lanternGlow { animation-duration:1.6s; }
@keyframes mx-flick { 0%,100% { opacity:.85; transform:scale(1); } 18% { opacity:.55; transform:scale(.95); } 40% { opacity:.95; transform:scale(1.04); } 62% { opacity:.62; transform:scale(.97); } 80% { opacity:.9; transform:scale(1.02); } }
.mx-lantern { transform-origin:110px 0; animation:mx-swing 5.5s ease-in-out infinite; } .mx[data-hover="left"] .mx-lantern { animation-duration:2.6s; }
@keyframes mx-swing { 0%,100% { transform:rotate(-2.4deg); } 50% { transform:rotate(2.4deg); } }
.mx-lid { transform-origin:330px 500px; transition:transform .7s cubic-bezier(.3,1.5,.5,1); } .mx[data-hover="left"] .mx-lid { transform:scaleY(1.1) translateY(-6px); }
.mx-goldGlow { transform-box:fill-box; transform-origin:center; animation:mx-pulse 3.4s ease-in-out infinite; } @keyframes mx-pulse { 0%,100% { opacity:.65; transform:scale(1); } 50% { opacity:1; transform:scale(1.08); } }
.mx[data-hover="left"] .mx-goldGlow { animation-duration:1.6s; }
.mx-card { transition:transform .6s cubic-bezier(.3,1.4,.5,1); } .mx-c1 { transform:translate(494px,598px) rotate(-16deg); } .mx-c2 { transform:translate(494px,598px) rotate(0deg); } .mx-c3 { transform:translate(494px,598px) rotate(16deg); }
.mx[data-hover="left"] .mx-c1 { transform:translate(494px,598px) rotate(-38deg); } .mx[data-hover="left"] .mx-c3 { transform:translate(494px,598px) rotate(34deg); } .mx[data-hover="left"] .mx-c2 { transform:translate(494px,586px) rotate(-3deg); }
.mx-eye { transform-box:fill-box; transform-origin:center; animation:mx-blink 6s infinite; } .mx-e2 { animation-delay:-2.2s; opacity:.0; transition:opacity .8s; } .mx[data-hover="left"] .mx-e2 { opacity:1; }
@keyframes mx-blink { 0%,90%,100% { transform:scaleY(1); } 93% { transform:scaleY(.08); } 96% { transform:scaleY(1); } }
.mx-glint { transform-box:fill-box; transform-origin:center; animation:mx-glint 3.6s infinite; } .mx-g2 { animation-delay:-1.2s; } .mx-g3 { animation-delay:-2.4s; }
@keyframes mx-glint { 0%,70%,100% { opacity:0; transform:scale(.3) rotate(0); } 80% { opacity:1; transform:scale(1) rotate(45deg); } }
.mx-ember { position:absolute; bottom:-10px; width:var(--mx-s); height:var(--mx-s); border-radius:50%; background:radial-gradient(circle, #fff1b8, #ff8a1f 55%, transparent 72%); opacity:0; animation:mx-rise var(--mx-d) linear infinite; animation-delay:var(--mx-dl); }
@keyframes mx-rise { 0% { transform:translate(0,0) scale(1); opacity:0; } 8% { opacity:.95; } 100% { transform:translate(var(--mx-dx), -92vh) scale(.25); opacity:0; } }
.mx-drop { position:absolute; bottom:-10px; width:var(--mx-s); height:var(--mx-s); border-radius:50%; border:1.5px solid rgba(127,227,255,.65); background:rgba(63,184,255,.12); opacity:0; animation:mx-rise var(--mx-d) ease-in infinite; animation-delay:var(--mx-dl); }
.mx-waveA, .mx-waveB, .mx-waveC { animation:mx-drift linear infinite; } .mx-waveA { animation-duration:26s; } .mx-waveB { animation-duration:17s; } .mx-waveC { animation-duration:11s; }
@keyframes mx-drift { to { transform:translateX(-560px); } }
.mx-shipBob { animation:mx-bob 5.5s ease-in-out infinite; transform-origin:300px 440px; } @keyframes mx-bob { 0%,100% { transform:translateY(0) rotate(-.6deg); } 50% { transform:translateY(-9px) rotate(.8deg); } }
.mx-shipLift { transition:transform .8s cubic-bezier(.2,1.2,.3,1), filter .8s; filter:drop-shadow(0 0 10px rgba(63,184,255,.55)); } .mx[data-hover="right"] .mx-shipLift { transform:translate(-26px,8px) scale(1.07); filter:drop-shadow(0 0 24px rgba(63,184,255,.95)) drop-shadow(0 0 40px rgba(138,99,255,.6)); }
.mx-fog { filter:blur(26px); animation:mx-fogdrift 22s ease-in-out infinite alternate; transition:opacity .9s; } .mx-f2 { animation-duration:30s; animation-direction:alternate-reverse; } .mx[data-hover="right"] .mx-fog { opacity:.35; }
@keyframes mx-fogdrift { from { transform:translateX(-60px); } to { transform:translateX(70px); } }
.mx-bolt { opacity:0; animation:mx-bolt 9s infinite; } @keyframes mx-bolt { 0%,91%,100% { opacity:0; } 92% { opacity:.95; } 93% { opacity:.1; } 94.5% { opacity:1; } 97% { opacity:0; } }
.mx-flash { position:absolute; inset:0; z-index:5; pointer-events:none; background:radial-gradient(ellipse at 30% 10%, rgba(180,220,255,.55), transparent 60%); opacity:0; animation:mx-bolt 9s infinite; }
.mx-rune { animation:mx-runeglow 3s ease-in-out infinite; } @keyframes mx-runeglow { 0%,100% { opacity:.55; } 50% { opacity:1; } }

.mx-panel:focus-visible .mx-title { outline:3px dashed #fff; outline-offset:8px; }

/* ---------- téléphone (portrait) : les deux moitiés s'empilent ---------- */
@media (max-aspect-ratio: 4/5) {
  .mx { --mx-skew:4%; }
  .mx-panel.mx-left  { clip-path:polygon(0 0, 100% 0, 100% calc(var(--mx-split) - var(--mx-skew)), 0 calc(var(--mx-split) + var(--mx-skew))); }
  .mx-panel.mx-right { clip-path:polygon(0 calc(var(--mx-split) + var(--mx-skew)), 100% calc(var(--mx-split) - var(--mx-skew)), 100% 100%, 0 100%); }
  .mx-heading { left:4vw; transform:none; top:2.2vh; font-size:13px; letter-spacing:.2em; }
  .mx-me { top:1.4vh; right:3vw; padding:3px 10px 3px 4px; font-size:12px; } .mx-me i { width:24px; height:24px; font-size:13px; }
  .mx-copy { max-width:62vw; bottom:auto; } .mx-title { font-size:clamp(34px, 11.5vw, 64px); } .mx-kicker { font-size:10px; margin-bottom:1.1em; }
  .mx-left .mx-copy { top:7.5vh; left:5vw; right:auto; }
  .mx-right .mx-copy { top:calc(var(--mx-split) + 5vh); right:5vw; left:auto; }
  .mx-left .mx-scene { height:27vh; left:auto; right:2vw; bottom:calc(100% - var(--mx-split) + var(--mx-skew) + 1vh); }
  .mx-right .mx-scene { height:30vh; left:1vw; right:auto; bottom:0; }
  .mx-blade { clip-path:polygon(0 calc(var(--mx-split) + var(--mx-skew) - .3%), 100% calc(var(--mx-split) - var(--mx-skew) - .3%), 100% calc(var(--mx-split) - var(--mx-skew) + .3%), 0 calc(var(--mx-split) + var(--mx-skew) + .3%)); }
  .mx-chips li { opacity:1 !important; transform:none; } .mx-chips { margin-top:.6em; } .mx-cta { display:none; } .mx-bubble { font-size:12px; }
  .mx[data-hover="left"], .mx[data-hover="right"] { --mx-split:50%; }
  .mx.mx-chosen-left { --mx-split:100%; } .mx.mx-chosen-right { --mx-split:0%; }
}
@media (hover:none) { .mx-chips li { opacity:1; transform:none; } .mx[data-hover] .mx-panel { filter:none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition-duration:.01ms !important; } }

/* ---- compléments pour l'intégration dans le jeu ---- */
html.mx-lock, html.mx-lock body { overflow:hidden; }
.mx, .mx *, .mx *::before, .mx *::after { box-sizing:border-box; }
.mx { z-index:20; background:#020308; color:#f1e6c8; font-family:var(--mx-body); }
.mx-me { display:flex; align-items:center; gap:10px; }
.mx-me span { color:#fff3d6; font-size:15px; font-weight:700; letter-spacing:.01em; text-shadow:0 1px 0 #000; }
.mx-me small { color:#ffd993; font-size:13px; }
.mx-me .mx-grade { color:#c3d1de; font-size:13px; }
.mx-music { position:fixed; z-index:9; top:1.8vh; left:2vw; width:38px; height:38px; display:grid; place-items:center; padding:0; font:700 20px/1 var(--mx-body); color:#ffd993; background:#0b0b12dd; border:2px solid #000; box-shadow:3px 3px 0 #000; border-radius:50%; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.mx-music:hover, .mx-music:focus-visible { transform:translate(-2px,-2px); box-shadow:5px 5px 0 #000; outline:none; }
.mx-music[aria-pressed="false"] { color:#7d7a72; }
.mx-music::after { content:""; position:absolute; width:26px; height:3px; background:#c8402f; border:1px solid #000; border-radius:2px; transform:rotate(-45deg); opacity:0; transition:opacity .2s; }
.mx-music[aria-pressed="false"]::after { opacity:1; }
/* Navires : bientôt */
.mx-soon { position:absolute; z-index:9; left:-58px; top:-40px; width:112px; transform:rotate(-12deg); animation:mx-wobble 3.2s ease-in-out infinite; filter:drop-shadow(3px 3px 0 #000); pointer-events:none; }
@keyframes mx-wobble { 0%,100% { transform:rotate(-12deg) scale(1); } 50% { transform:rotate(-6deg) scale(1.09); } }
.mx-soonmode { cursor:help; }
.mx-right .mx-cta { background:#16233a; color:#a9c1d8; border-style:dashed; }
.mx-nope { animation:mx-nope .45s ease; } @keyframes mx-nope { 20% { transform:translateX(-7px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(2px); } }
/* réglage « Animations » coupé */
.mx-still *, .mx-still *::before, .mx-still *::after { animation:none !important; transition-duration:.01ms !important; }
.mx-still .mx-ember, .mx-still .mx-drop { display:none; }
@media (max-aspect-ratio: 4/5) { .mx-music { top:1.2vh; left:auto; right:3vw; top:calc(1.4vh + 38px); width:32px; height:32px; font-size:17px; } .mx-soon { width:76px; left:-66px; top:-22px; } }

/* « Changer de pseudo » sous la pastille du profil */
.mx-switch { position:fixed; z-index:9; top:calc(1.8vh + 5px); left:calc(2vw + 48px); padding:.3em .85em; font:700 12px var(--mx-body); letter-spacing:.04em; color:#c3d1de; background:#0b0b12cc; border:2px solid #000; box-shadow:2px 2px 0 #000; border-radius:999px; cursor:pointer; transition:transform .2s ease, color .2s ease; }
.mx-switch:hover, .mx-switch:focus-visible { color:#fff; transform:translate(-1px,-1px); outline:none; border-color:#7fe3ff; }
@media (max-aspect-ratio: 4/5) { .mx-switch { top:calc(1.4vh + 36px); right:3vw; font-size:11px; } .mx-music { top:calc(1.4vh + 36px + 28px); } }

/* NAVIRES: carte « Accès anticipé · Bêta ». N'agit que si mount pose .mx-beta (c'est-à-dire quand onNavires est fourni) ; sinon la carte reste « Bientôt ».
   L'étiquette est dans le flux du texte (au-dessus du sous-titre) : placée en absolu, la lame en diagonale la coupait, surtout sur téléphone. */
.mx-betatag { display:none; position:relative; z-index:9; width:max-content; margin:0 0 .7em auto; padding:4px 12px 5px; border:3px solid #000; border-radius:10px; background:#f0b84a; color:#1c1311; text-align:center; line-height:1; box-shadow:3px 4px 0 #000; transform:rotate(-4deg); transform-origin:right center; animation:mx-tagwobble 3.2s ease-in-out infinite; pointer-events:none; }
.mx-betatag i { display:block; font:700 clamp(9px, .8vw, 11px)/1 var(--mx-body); letter-spacing:.12em; text-transform:uppercase; font-style:normal; }
.mx-betatag b { display:block; margin-top:3px; font:400 clamp(20px, 2vw, 28px)/1 var(--mx-display); letter-spacing:.08em; }
@keyframes mx-tagwobble { 0%,100% { transform:rotate(-4deg) scale(1); } 50% { transform:rotate(-2deg) scale(1.06); } }
.mx-beta .mx-soon { display:none; }
.mx-beta .mx-betatag { display:block; }
.mx-beta { cursor:pointer; }
.mx-right.mx-beta .mx-cta { background:var(--mx-cyan); color:#0a0608; border-style:solid; }
/* téléphone en paysage (fenêtre basse) : une seule ligne, SORTIE du flux, dans l'espace entre le sous-titre et le titre, pour ne pas pousser le bouton hors de l'écran (mesuré : +67 px sinon) */
@media (max-height: 520px) and (min-aspect-ratio: 4/5) { .mx-betatag { position:absolute; top:16px; right:0; margin:0; padding:2px 8px 3px; font-size:8px; border-width:2px; border-radius:8px; box-shadow:2px 3px 0 #000; white-space:nowrap; } .mx-betatag i, .mx-betatag b { display:inline; font-size:8px; margin:0; letter-spacing:.1em; } .mx-betatag b { font-family:var(--mx-body); font-weight:700; } .mx-betatag b::before { content:' · '; } }