/* =============================================================================
   My Larp Wallet — moteur de rendu de maquette
   -----------------------------------------------------------------------------
   Canevas de 923 px de large = un écran iPhone de 393 pt à 2,3486x. Toutes les
   longueurs sont donc des pixels de capture, ce qui rend la maquette exportable
   à la résolution native d'un vrai screenshot.

   Contrairement au prototype d'origine, la mise en page est ici en FLUX et non
   en positions absolues : le nombre de jetons est variable, tout doit se
   replacer tout seul.
   ============================================================================= */

.mw {
  /* --- palette (surchargeable par le configurateur) --- */
  --mw-bg:        #000000;
  --mw-card:      #181818;
  --mw-pill:      #1c1c1c;
  --mw-accent:    rgb(179, 165, 248);
  --mw-accent-ink:#000000;
  --mw-text:      #efefef;
  --mw-dim:       #b3b3b3;
  --mw-up:        rgb(13, 234, 80);
  --mw-down:      rgb(255, 2, 42);
  --mw-chip:      #1f1f1f;

  /* --- métriques typographiques, résolues sur des captures réelles ---
     (SF Pro bascule de Text à Display au-dessus de ~27 px : ces valeurs
     tiennent compte de la bascule, ne pas les « arrondir ») */
  --mw-f-tab:     38.5px;  --mw-ls-tab:      0.6px;
  --mw-f-wallet:  42px;    --mw-ls-wallet:   0px;
  --mw-f-balance: 111px;   --mw-ls-balance:  0.4px;
  --mw-f-delta:   38.5px;  --mw-ls-delta:    1.4px;
  --mw-f-badge:   36px;    --mw-ls-badge:    1px;
  --mw-f-head:    55px;    --mw-ls-head:     0.3px;
  --mw-f-tname:   42px;    --mw-ls-tname:   -0.4px;
  --mw-f-tsub:    36.4px;  --mw-ls-tsub:     0.8px;
  --mw-f-tval:    41px;    --mw-ls-tval:    -2.1px;
  --mw-f-tchg:    37.4px;  --mw-ls-tchg:    -0.5px;
  --mw-f-search:  41.3px;  --mw-ls-search:   0.3px;

  position: relative;
  width: 923px;
  /* Hauteur FIXE, pas min-height : c'est un écran, pas un document. Le contenu
     qui dépasse est masqué et défile ; sinon `.mw` s'étire à la hauteur du
     contenu et le dock, ancré en bas, part au milieu de nulle part. */
  height: 2000px;
  background: var(--mw-bg);
  color: var(--mw-text);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "SF Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-kerning: normal;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mw *, .mw *::before, .mw *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Thème clair : on ne redéfinit que ce qui change de rôle. */
.mw[data-theme="light"] {
  --mw-bg:   #ffffff;
  --mw-card: #f2f2f4;
  --mw-pill: #ececef;
  --mw-text: #0d0d0f;
  --mw-dim:  #6a6a72;
  --mw-chip: #e4e4e8;
  --mw-accent-ink: #000000;
}

/* ------------------------------------------------------------ barre d'état */
/* Reproduite pour l'export : une maquette destinée à l'App Store en a besoin. */
.mw-status { position: relative; height: 140px; flex: 0 0 auto; }
/* Positions mesurées sur une capture native : heure à x=117 / y=54, groupe de
   droite terminant à 77 du bord, écarts de 18, tout aligné sur une base à 82. */
.mw-status .t {
  position: absolute; left: 117px; top: 48px;
  font-size: 41px; font-weight: 600; line-height: 1;
  letter-spacing: -0.4px; color: var(--mw-text);
}
.mw-status .r {
  position: absolute; right: 77px; top: 52px;
  display: flex; align-items: flex-end; gap: 18px;
}
.mw-status svg { display: block; }
.mw-status .sig, .mw-status .wifi { margin-bottom: 1.5px; }
.mw-status .batt { position: relative; }
.mw-status .batt .pct {
  position: absolute; left: 0; top: 0; width: 59.5px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; font-weight: 650; letter-spacing: -0.6px; line-height: 1;
  color: var(--mw-bg);
}

/* -------------------------------------------------------------------- tabs */
.mw-tabs-wrap {
  --fade: linear-gradient(to right, #000 0, #000 92.6%, rgba(0,0,0,.80) 93.8%,
                          rgba(0,0,0,.62) 95.9%, rgba(0,0,0,.50) 98%, rgba(0,0,0,.48) 100%);
  -webkit-mask-image: var(--fade); mask-image: var(--fade);
  margin-top: 17px;
}
.mw-tabs {
  display: flex; align-items: center; gap: 19px;
  padding: 0 47px; overflow: hidden;
}
.mw-tab {
  flex: 0 0 auto; height: 94px; border-radius: 47px;
  background: var(--mw-pill); color: var(--mw-dim);
  font-size: var(--mw-f-tab); font-weight: 500; letter-spacing: var(--mw-ls-tab);
  display: flex; align-items: center; justify-content: center;
  padding: 0 33px; white-space: nowrap;
}
.mw-tab.is-active { background: var(--mw-accent); color: var(--mw-accent-ink); font-weight: 600; }
.mw-tab.is-avatar {
  width: 94px; padding: 0; overflow: hidden;
  font-size: 52px; line-height: 1; background: var(--mw-pill);
}
.mw-tab.is-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------------ entête */
.mw-wallet {
  display: flex; align-items: center; gap: 14px;
  margin: 79px 0 0 48px;
  font-size: var(--mw-f-wallet); font-weight: 500; letter-spacing: var(--mw-ls-wallet);
  line-height: 1; color: var(--mw-dim);
}
.mw-wallet svg { display: block; position: relative; top: 2px; }

.mw-balance {
  margin: 18px 0 0 47px;
  font-size: var(--mw-f-balance); font-weight: 700; line-height: 1;
  letter-spacing: var(--mw-ls-balance); color: var(--mw-text);
  white-space: nowrap;
}

.mw-delta { display: flex; align-items: center; gap: 20px; margin: 25px 0 0 48px; }
.mw-delta .abs {
  font-size: var(--mw-f-delta); font-weight: 600; line-height: 1;
  letter-spacing: var(--mw-ls-delta);
}
.mw-delta .pct {
  height: 51px; border-radius: 18px; color: #050000;
  font-size: var(--mw-f-badge); font-weight: 600;
  letter-spacing: var(--mw-ls-badge); line-height: 1;
  display: flex; align-items: center; padding: 0 13px;
}
.mw-delta.is-up   .abs { color: var(--mw-up); }
.mw-delta.is-up   .pct { background: var(--mw-up); }
.mw-delta.is-down .abs { color: var(--mw-down); }
.mw-delta.is-down .pct { background: var(--mw-down); color: #050000; }

/* ------------------------------------------------------ liseré des cartes */
/* Mesuré sur l'app de référence : le bord est plus clair que le fond, en
   dégradé — +8 en haut, +5 sur les côtés, +2 en bas. Un filet de 1 px écran
   vaut 2,3 px de canevas. */
.mw-card { position: relative; background: var(--mw-card); }
.mw-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 2.3px; pointer-events: none;
  background: linear-gradient(180deg,
              rgba(255,255,255,.036) 0%,
              rgba(255,255,255,.022) 45%,
              rgba(255,255,255,.009) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.mw[data-theme="light"] .mw-card::before {
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.02));
}

/* --------------------------------------------------------------- carte Cash */
.mw-cash {
  margin: 64px 47px 0; height: 164px; border-radius: 52px;
  display: flex; align-items: center; padding: 0 49px 0 66px;
}
.mw-cash .ic { flex: 0 0 57px; width: 57px; height: 40.4px; display: block; }
.mw-cash .lb {
  flex: 1 1 auto; margin-left: 45px;
  font-size: 43px; font-weight: 600; letter-spacing: -.3px; line-height: 1;
}
.mw-cash .val { font-size: 42px; font-weight: 600; letter-spacing: -1.6px; line-height: 1; }

/* ----------------------------------------------------------------- section */
.mw-section { margin-top: 59px; }
.mw-section-head {
  display: flex; align-items: center; gap: 20px;
  padding-left: 47px; height: 70px;
  font-size: var(--mw-f-head); font-weight: 700;
  letter-spacing: var(--mw-ls-head); line-height: 1;
}
.mw-section-head svg { display: block; color: var(--mw-dim); position: relative; top: 2px; }

/* -------------------------------------------------------------- ligne jeton */
.mw-tokens { padding: 0 47px; margin-top: 32px; }
.mw-token {
  display: flex; align-items: center;
  height: 160px; border-radius: 52px; padding: 0 47px;
}
.mw-token + .mw-token { margin-top: 19px; }
.mw-token .icon {
  flex: 0 0 94px; width: 94px; height: 94px; border-radius: 50%;
  overflow: hidden; margin-right: 29px; display: block; background: var(--mw-chip);
}
.mw-token .icon svg, .mw-token .icon img { display: block; width: 100%; height: 100%; }
.mw-token .main { flex: 1 1 auto; min-width: 0; }
.mw-token .side { flex: 0 0 auto; text-align: right; position: relative; top: 1px; }

.mw-token .name {
  font-size: var(--mw-f-tname); font-weight: 600;
  letter-spacing: var(--mw-ls-tname); line-height: 1; color: var(--mw-text);
}
.mw-token .sub {
  font-size: var(--mw-f-tsub); font-weight: 400;
  letter-spacing: var(--mw-ls-tsub); line-height: 1; color: var(--mw-dim); margin-top: 15px;
}
.mw-token .val {
  font-size: var(--mw-f-tval); font-weight: 600;
  letter-spacing: var(--mw-ls-tval); line-height: 1; color: var(--mw-text);
  margin-right: 2.1px; /* compense l'approche sur un texte aligné à droite */
}
.mw-token .chg {
  font-size: var(--mw-f-tchg); font-weight: 600;
  letter-spacing: var(--mw-ls-tchg); line-height: 1; margin-top: 16px;
}
.mw-token .chg.up   { color: var(--mw-up); }
.mw-token .chg.down { color: var(--mw-down); }


/* ------------------------------------------------------ défilement interne */
/* Le contenu passe SOUS l'entête. Ordre de superposition, du fond vers le
   dessus : contenu (auto), puis voile du haut (2), puis barre d'état et
   onglets (3).
   NB : jamais de chevron ouvrant dans ces commentaires — la feuille est
   inlinée dans un SVG à l'export, où il serait lu comme une balise. */
.mw-scroll{ position: relative; will-change: transform; }
.mw-tail{ height: 260px; }          /* respiration sous la dernière carte */

.mw-topveil{
  /* Opaque jusqu'en dessous des onglets (qui finissent à 268), puis fondu.
     Plus court, un filet de contenu réapparaissait sous la barre pendant le
     défilement. */
  position: absolute; left: 0; right: 0; top: 0; height: 330px; z-index: 2;
  background: linear-gradient(to bottom, var(--mw-bg) 0%, var(--mw-bg) 82%,
              rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.mw[data-theme="light"] .mw-topveil{
  background: linear-gradient(to bottom, var(--mw-bg) 0%, var(--mw-bg) 82%,
              rgba(255,255,255,0) 100%);
}
.mw-status{ position: relative; z-index: 3; }
.mw-tabs-wrap{ position: relative; z-index: 3; }

/* Pastille discrète quand une valeur vient de changer (démo animée). */
.mw-flash{ animation: mw-flash 1.5s ease-out; }
@keyframes mw-flash{
  /* Éclat discret : à 2,1 le chiffre « sautait » à chaque révision, ce qui
     accentuait l'impression de vitesse. */
  0%   { filter: brightness(1.45); }
  100% { filter: brightness(1); }
}


/* =============================================================================
   Sections basses — Perps, Predictions, Watchlist, Explore, Support
   -----------------------------------------------------------------------------
   Reprises telles quelles du prototype vérifié au pixel, avec deux adaptations :
   les sélecteurs sont portés par `.mw` (le moteur peut être instancié plusieurs
   fois sur une page) et les variables reprennent le préfixe `--mw-`.
   Elles ne sont rendues que si `showSections` est vrai : c'est ce qui donne de
   la matière au défilement de la démonstration.
   ============================================================================= */
/* ------------------------------------------------------------------- rails */
.mw .rail{
  display:flex; gap:19px; padding:0 47px;
  overflow-x:auto; scrollbar-width:none;
}
.mw .rail::-webkit-scrollbar{ display:none; }
.mw .rail > *{ flex:0 0 auto; }
.mw .rail--perps{ margin-top:32px; margin-right:10px; }
.mw .rail--preds{ margin-top:30px; gap:38px; }

.mw .perp{
  width:376px; height:338px;
  background:var(--mw-card); border-radius:52px;
  padding:48px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.mw .perp-icon{
  width:111px; height:111px; border-radius:50%;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.mw .perp-icon svg{ display:block; }
.mw .perp-icon--eth svg{ margin:-2px 4px 0 0; }
.mw .perp-icon--hype{ align-items:flex-start; justify-content:flex-start; }
.mw .perp-icon--hype i{ display:block; width:59px; height:59px; border-radius:50%;
                    background:#97fce4; margin:29px 0 0 -3px; }
.mw .perp-foot{ margin-bottom:3px; }
.mw .perp-row{ display:flex; align-items:center; gap:15px; }
.mw .perp-name{ font-size:var(--mw-f-pname); font-weight:700; letter-spacing:var(--mw-ls-pname); line-height:1; color:var(--mw-text); }
.mw .perp-lev{
  height:48px; border-radius:16px; background:var(--mw-chip);
  color:var(--mw-text); font-size:var(--mw-f-plev); font-weight:600;
  letter-spacing:var(--mw-ls-plev); line-height:1;
  display:flex; align-items:center; padding:0 14px;
}
.mw .perp-chg{ font-size:var(--mw-f-pchg); font-weight:500; letter-spacing:var(--mw-ls-pchg); line-height:1; margin-top:16px; }

.mw .pred{
  width:545px; height:330px;
  background:var(--mw-card); border-radius:36px;
  padding:39px 42px;
  display:flex; align-items:flex-start; justify-content:space-between;
}
.mw .pred-icon{ width:100px; height:100px; border-radius:50%; overflow:hidden; }
.mw .pred-icon svg{ display:block; width:100%; height:100%; }
.mw .pred-live{
  display:flex; align-items:center; gap:11px;
  color:var(--mw-red); font-size:36px; font-weight:600; line-height:1; margin-top:10px;
}
.mw .pred-live::before{ content:""; width:13px; height:13px; border-radius:50%; background:var(--mw-red); display:block; }

/* ------------------------------------------------------- carte prédiction */
.mw .pred{
  width:554px; height:319px;
  background:var(--mw-card); border-radius:38px;
  padding:39px 31px 0;
  position:relative;
}
.mw .pred-icon{ width:108px; height:108px; border-radius:50%; overflow:hidden; display:block; }
.mw .pred-icon svg{ display:block; width:100%; height:100%; }
.mw .pred-live{
  position:absolute; right:39px; top:47px;
  display:flex; align-items:center; gap:12px;
  color:var(--mw-red); font-size:37px; font-weight:600; line-height:1;
}
.mw .pred-live::before{ content:""; width:13px; height:13px; border-radius:50%; background:var(--mw-red); display:block; }
.mw .pred-title{
  position:absolute; left:31px; top:181px;
  font-size:40px; font-weight:600; letter-spacing:-.2px; line-height:1; color:var(--mw-text);
  white-space:nowrap;
}
.mw .pred-sub{
  position:absolute; left:31px; top:238px;
  font-size:37px; font-weight:400; letter-spacing:.2px; line-height:1; color:var(--mw-dim);
  white-space:nowrap;
}
.mw .pred-tickets{ position:absolute; left:38px; top:34px; width:150px; height:120px; }
.mw .pred-tickets svg{ display:block; }

/* ------------------------------------------------------------- watchlist */
.mw .watch{ padding:0 47px; margin-top:26px; }
.mw .wrow{ display:flex; align-items:center; height:164px; }
.mw .wrow-icon{
  flex:0 0 92px; width:92px; height:92px; border-radius:50%;
  overflow:hidden; margin-right:24px; display:block;
}
.mw .wrow-icon svg{ display:block; width:100%; height:100%; }
.mw .wrow-main{ flex:1 1 auto; min-width:0; }
.mw .wrow-name{ display:flex; align-items:center; gap:11px; }
.mw .wrow-sym{ font-size:42px; font-weight:700; letter-spacing:-.3px; line-height:1; color:var(--mw-text); }
.mw .wrow-mc{ font-size:37px; font-weight:400; letter-spacing:.3px; line-height:1; color:var(--mw-dim); margin-top:16px; }
.mw .wrow-side{ flex:0 0 auto; text-align:right; }
.mw .wrow-px{ font-size:41px; font-weight:600; letter-spacing:-1.4px; line-height:1; color:var(--mw-text); }
.mw .wrow-chg{ font-size:37px; font-weight:500; letter-spacing:-.4px; line-height:1; margin-top:16px; }

/* --------------------------------------------------------------- explore */
.mw .explore{ padding:0 47px; margin-top:54px; }
.mw .erow{
  display:flex; align-items:center;
  height:127px; background:var(--mw-card); border-radius:38px;
  padding-left:47px;
}
.mw .erow + .erow{ margin-top:47px; }
.mw .erow-icon{ flex:0 0 79px; width:79px; height:79px; display:flex; align-items:center; justify-content:center; margin-right:65px; }
.mw .erow-icon svg{ display:block; }
.mw .erow-title{ font-size:42px; font-weight:600; letter-spacing:-.2px; line-height:1; color:var(--mw-text); }
.mw .erow-sub{ font-size:37px; font-weight:400; letter-spacing:.2px; line-height:1; color:var(--mw-dim); margin-top:22px; }

/* --------------------------------------------------------------- support */
.mw .support-link{
  /* Étaient en absolu dans le prototype, où la section l'était aussi. En flux,
     elles s'échappaient vers le haut de l'écran : on garde les mêmes écarts. */
  margin:47px 0 0 47px;
  display:flex; align-items:center; gap:17px;
  font-size:42px; font-weight:700; letter-spacing:-.2px; line-height:1; color:var(--mw-text);
}
.mw .support-link svg{ display:block; color:var(--mw-text); position:relative; top:1px; }
.mw .disclose{
  margin:86px 0 0 47px;
  display:flex; align-items:center; gap:14px;
  font-size:36px; font-weight:400; letter-spacing:.2px; line-height:1; color:#8b8b8b;
}
.mw .disclose svg{ display:block; flex:0 0 auto; }

.mw .perp--cta{
  width:705px; padding:0; position:relative;
}
.mw .perp-cta-icon{ position:absolute; left:50px; top:47px; display:block; }
.mw .perp-cta-title{
  position:absolute; left:50px; top:196px;
  font-size:42px; font-weight:600; letter-spacing:-.2px; line-height:1; color:var(--mw-text); white-space:nowrap;
}
.mw .perp-cta-sub{
  position:absolute; left:50px; top:252px;
  font-size:37px; font-weight:400; letter-spacing:.2px; line-height:1; color:var(--mw-dim); white-space:nowrap;
}
.mw .perp-icon--hype{ overflow:visible; align-items:center; justify-content:flex-start; }
.mw .perp-icon--hype svg{ margin-left:-4px; }

/* 487 px de canevas sur 923 = 52,76 % de la largeur : le fantome garde sa
   taille relative sans dependre du facteur d'echelle calcule en JS. */
  100%    { opacity:0; }
}

.mw .support-link + .support-link{ margin-top:66px; }

/* -------------------------------------------------------------------- dock */
.mw-dock {
  position: absolute; left: 0; right: 0; bottom: 80px; height: 112px;
  display: flex; align-items: center; gap: 22px; padding: 0 47px; z-index: 4;
}
.mw-search {
  flex: 1 1 auto; height: 112px; border-radius: 56px;
  background: rgba(38,38,38,.72);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
          backdrop-filter: blur(34px) saturate(150%);
  display: flex; align-items: center; padding: 0 40px; gap: 24px;
  font-size: var(--mw-f-search); letter-spacing: var(--mw-ls-search);
  color: #8b8b8b; font-weight: 400;
}
.mw[data-theme="light"] .mw-search { background: rgba(0,0,0,.06); color: #77777f; }
.mw-search svg { display: block; flex: 0 0 auto; }
.mw-plus {
  flex: 0 0 112px; width: 112px; height: 112px; border-radius: 50%;
  background: var(--mw-accent); display: flex; align-items: center; justify-content: center;
}
.mw-plus svg { display: block; }

/* Voile dégradé sous le dock, comme sur l'app de référence. */
.mw-veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 300px; z-index: 3;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.92) 100%);
  pointer-events: none;
}
.mw[data-theme="light"] .mw-veil {
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 42%, rgba(255,255,255,.95) 100%);
}

/* ------------------------------------------------------- étiquette maquette */
/* Par défaut visible : le livrable est assumé comme une maquette, pas comme un
   relevé. Le configurateur permet de la retirer pour un usage où le contexte
   est déjà explicite (fiche App Store, deck produit). */
.mw-tag {
  /* Sous le contenu, au-dessus du dock : en haut à droite elle percutait les
     icônes de la barre d'état, ce qui gâchait toute capture destinée à une
     fiche produit. */
  /* Tout en bas, centrée : c'est la seule bande toujours libre quel que soit
     le nombre de jetons. En haut à droite elle percutait la barre d'état, au
     dessus du dock elle tombait sur la dernière ligne. */
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 20px; z-index: 9;
  padding: 10px 22px; border-radius: 999px;
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.72);
  font-size: 26px; font-weight: 700; letter-spacing: 3px; line-height: 1;
  text-transform: uppercase;
}
.mw[data-theme="light"] .mw-tag { background: rgba(0,0,0,.10); color: rgba(0,0,0,.62); }

/* ------------------------------------------------------------- conteneur mis
   à l'échelle : le canevas garde ses 923 px, seul le zoom change. */
.mw-frame { position: relative; overflow: hidden; }
.mw-frame > .mw { transform-origin: top left; }