/* D.A. OasisMax « liquid glass bleu » : le système du Clipping Center de Félix (noir, verre, métal liquide),
   avec le bleu électrique du logo OasisMax (#1238FF, mesuré sur le bouton Register) comme seule couleur dominante.
   Pas d'or, pas de violet. Le vert ne sert qu'aux gains. */
:root {
  --fond: #02040b;
  --carte: rgba(255, 255, 255, 0.045);
  --carte2: rgba(255, 255, 255, 0.08);
  --ligne: rgba(255, 255, 255, 0.09);
  --bleu: #1238ff;
  --bleu2: #3b62ff;
  --eclat: #7c9bff;
  --abysse: #061266;
  --texte: #f4f6ff;
  --doux: #8a91aa;
  --vert: #2ee68f;
  --titre: "Archivo Black", "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

.titre { font-family: var(--titre); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; font-weight: 400; }
.penche { display: inline-block; transform: skewX(-8deg); }
.chiffres { font-variant-numeric: tabular-nums; }
.doux { color: var(--doux); }
.ic { width: 20px; height: 20px; flex: none; }

/* Fond de page : des halos bleus fixes, que le verre des cartes reflète. */
.fond-oasis {
  background:
    radial-gradient(60% 35% at 50% -6%, rgba(18, 56, 255, 0.40), transparent 70%),
    radial-gradient(45% 30% at 105% 35%, rgba(18, 56, 255, 0.22), transparent 70%),
    radial-gradient(45% 30% at -10% 70%, rgba(18, 56, 255, 0.16), transparent 70%),
    radial-gradient(60% 30% at 50% 110%, rgba(18, 56, 255, 0.24), transparent 70%),
    var(--fond);
  background-attachment: fixed;
}

/* Liquid glass : verre dépoli, reflet en haut, bord clair, ombre profonde. */
.verre {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.03), 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
}

/* Verre sombre : barres (onglets, en-tête), lisibles au-dessus de tout. */
.verre-sombre {
  background: linear-gradient(180deg, rgba(20, 22, 32, 0.82) 0%, rgba(8, 9, 16, 0.88) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 40px -12px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
}

/* Verre bleu : pour ce qui compte le plus (onglet actif, chiffre phare, pastilles). */
.verre-bleu {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 45%),
    linear-gradient(160deg, rgba(59, 98, 255, 0.6) 0%, rgba(18, 56, 255, 0.42) 45%, rgba(6, 18, 102, 0.6) 100%);
  border: 1px solid rgba(140, 165, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -10px 30px -10px rgba(0, 0, 0, 0.45), 0 20px 50px -18px rgba(18, 56, 255, 0.8);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
}

/* Bord de verre avec un liseré bleu. */
.bord-verre {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(16, 18, 28, 0.78), rgba(6, 7, 14, 0.72)) padding-box,
    linear-gradient(140deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04) 40%, rgba(59, 98, 255, 0.6)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
}

/* Trame de points discrète (vue chez EmpireDrop, déjà dans la D.A. de Félix). */
.trame {
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.3px);
  background-size: 9px 9px;
}

/* Chiffres « glace » : du blanc vers le bleu. */
.texte-glace {
  background: linear-gradient(180deg, #ffffff 0%, #dfe6ff 30%, #7c9bff 72%, #2a4fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.halo-glace { filter: drop-shadow(0 0 22px rgba(59, 98, 255, 0.5)); }

/* Bouton en verre (secondaire : Login, Voir tout…). */
.bouton-verre {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  transition: background 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bouton-verre:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)); }
.bouton-verre:active { transform: translateY(1px) scale(0.98); }
.bouton-rond { width: 46px; padding: 0; }

/* Bouton en métal liquide : contour métal bleu (shader Paper en « screen » sur un anneau bleu),
   lumière qui fait le tour du contour en boucle, cœur en verre bleu. Monté par metal.js. */
.metal {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  height: var(--h, 46px); padding: 0 26px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: #fff; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 20px 12px rgba(0, 0, 0, 0.08), 0 9px 9px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.metal.grand { --h: 56px; padding: 0 34px; font-size: 17px; }
.metal:active { transform: translateY(1px) scale(0.98); }
.metal > .m { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.metal .m-anneau { overflow: hidden; background: linear-gradient(135deg, #8aa6ff 0%, #1238ff 45%, #050f55 100%); }
.metal .m-anneau canvas { mix-blend-mode: screen; border-radius: 999px; z-index: 0 !important; }
.metal .m-lumiere { overflow: hidden; }
.metal .m-halo { inset: -4px; overflow: hidden; filter: blur(8px); opacity: 0.8; z-index: -1; }
.metal .m-lumiere i, .metal .m-halo i {
  position: absolute; left: 50%; top: 50%; width: var(--diag, 300px); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg, transparent 0deg 215deg, rgba(110, 145, 255, 0.85) 285deg, #ffffff 322deg, rgba(110, 145, 255, 0.85) 342deg, transparent 360deg);
  animation: m-tourne 2.8s linear infinite;
}
.metal .m-coeur {
  inset: 2px;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.3), transparent 45%),
    linear-gradient(180deg, #2a55ff 0%, #1232c8 55%, #06135e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -8px 18px -8px rgba(0, 0, 0, 0.5), 0 14px 34px -12px rgba(18, 56, 255, 0.9);
  transition: box-shadow 0.15s;
}
.metal:active .m-coeur { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); }
.metal .m-texte { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
@keyframes m-tourne { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Barre d'onglets en verre, pastille bleue qui glisse (ressort). */
.onglets { position: relative; display: inline-flex; gap: 2px; padding: 5px; border-radius: 20px; }
.onglets .pastille {
  position: absolute; top: 5px; bottom: 5px; left: 0; border-radius: 15px;
  transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1), width 0.55s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.onglets button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 0; background: none; border-radius: 15px; cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--doux);
  transition: color 0.3s;
}
.onglets button:hover { color: var(--texte); }
.onglets button[aria-selected="true"] { color: #fff; }

/* Bandeau des gains en direct : défilement continu, pause au survol. */
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.defile { display: flex; gap: 10px; width: max-content; animation: defile 40s linear infinite; }
.defile:hover { animation-play-state: paused; }
.masque-bords { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }

@keyframes respire { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.point-live { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 10px var(--vert); animation: respire 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .defile, .point-live { animation: none; }
  .metal .m-lumiere i, .metal .m-halo i { animation-duration: 14s; }
}