/* Osalia — styles du contenu ajouté le 12/11 (chargé après osalia.css) : rareté Mythique (rouge sombre à éclairs,
   comme les cartes du jeu : AlteresRareteFond.cs), fiche de boss, rangs des sorts, page Monde (sauvages, raretés,
   téléporteur, butins), espace du compte, curseur des champs. Pas de flammes, pas de runes, pas de fissures. */
:root {
  --mythique: #8b1a1a;          /* couleur de la rareté dans le jeu (regles.mythiques.couleur_rarete) */
  --mythique-vif: #e0483f;      /* la même, lisible sur le bleu nuit (textes, rayons, halos) */
  --mythique-nuit: #1a0609;
  /* Éclairs : deux traits brisés ramifiés, cœur clair et bord rouge (le halo est un drop-shadow). */
  --eclairs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23ff5a4a' stroke-width='3.2'%3E%3Cpath d='M62 0L53 38L67 60L47 104L61 128L49 168L57 192'/%3E%3Cpath d='M53 38L35 66L39 92'/%3E%3Cpath d='M47 104L28 118'/%3E%3Cpath d='M152 300L158 262L143 236L163 198L149 174L160 136'/%3E%3Cpath d='M143 236L123 220L119 196'/%3E%3C/g%3E%3Cg stroke='%23ffe3da' stroke-width='1.1'%3E%3Cpath d='M62 0L53 38L67 60L47 104L61 128L49 168L57 192'/%3E%3Cpath d='M152 300L158 262L143 236L163 198L149 174L160 136'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --eclairs-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23ff5a4a' stroke-width='3'%3E%3Cpath d='M158 0L150 34L163 58L144 96L156 118L146 150'/%3E%3Cpath d='M163 58L182 80'/%3E%3Cpath d='M38 300L32 264L46 240L28 206L41 182L33 150'/%3E%3Cpath d='M46 240L66 226'/%3E%3C/g%3E%3Cg stroke='%23ffe3da' stroke-width='1'%3E%3Cpath d='M158 0L150 34L163 58L144 96L156 118L146 150'/%3E%3Cpath d='M38 300L32 264L46 240L28 206L41 182L33 150'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.r-mythique { --r: var(--mythique-vif); }

/* Curseur des champs : dans osalia.css (citron), focus natif aussi. */

/* ── Éclairs : invisibles la plupart du temps, deux coups brefs, puis plus rien ── */
@keyframes eclair { 0%, 84%, 100% { opacity: 0; } 85% { opacity: 1; } 86.5% { opacity: .12; } 88% { opacity: .95; } 91.5% { opacity: 0; } }
@keyframes eclair-fond { 0%, 84%, 100% { opacity: 0; } 85% { opacity: .55; } 86.5% { opacity: .1; } 88% { opacity: .45; } 92% { opacity: 0; } }
@keyframes battement { 0%, 100% { opacity: .55; transform: scale(1); } 12% { opacity: .95; transform: scale(1.06); } 24% { opacity: .6; } 36% { opacity: .85; transform: scale(1.03); } }

/* ── Carte d'un Mythique (partout : Osadex, accueil, Monde) : fond cramoisi au cœur qui bat, éclairs derrière le boss ── */
.carte-n.r-mythique .cn-cadre { background: linear-gradient(170deg, #e6c26a, #8b1a1a 32%, #3e0a0c 66%, #c99a3c); }
.carte-n.r-mythique .cn-art {
  background: radial-gradient(circle at 50% 44%, #9e2420 0, #5a0f12 26%, #2a070a 56%, var(--mythique-nuit) 82%);
}
.carte-n.r-mythique .cn-art::before {
  content: ""; position: absolute; inset: 0;
  background: var(--eclairs) center 20% / 100% 82% no-repeat, radial-gradient(circle at 50% 44%, rgba(255, 120, 100, .9), rgba(224, 72, 63, .35) 34%, transparent 66%);
  filter: drop-shadow(0 0 5px #ff2a1a); opacity: 0;
  animation: eclair 5.6s linear infinite; animation-delay: calc(var(--i, 0) * -.83s);
}
.carte-n.r-mythique .cn-ombre { opacity: .55; background: radial-gradient(circle at 50% 44%, rgba(224, 72, 63, .55), transparent 52%); animation: battement 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.4s); }
.carte-n.r-mythique:hover .cn-art::before, .carte-n.r-mythique:focus-visible .cn-art::before { animation-duration: 1.9s; }
.carte-n.r-mythique:hover .cn-cadre, .carte-n.r-mythique:focus-visible .cn-cadre { background: linear-gradient(170deg, #fff1b8, #e0483f 38%, #8b1a1a 70%, #ffe28c); filter: drop-shadow(0 0 18px rgba(224, 72, 63, .8)); }
.carte-n.r-mythique:hover .cn-perso, .carte-n.r-mythique:focus-visible .cn-perso { filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 22px rgba(224, 72, 63, .9)); }
.carte-n .cn-donjon {
  position: absolute; left: 8%; right: 8%; bottom: 12%; text-align: center; font: 600 10.5px/1.25 var(--texte); letter-spacing: .04em;
  color: #ffd2c8; text-shadow: 0 1px 2px #000, 0 0 6px #000; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.trio .carte-n .cn-meta { bottom: 3.5%; }

/* ── Héros de l'accueil tombé sur un Mythique : éclairs autour de lui, rayons rouges ── */
.scene.r-mythique .lumiere::after {
  content: ""; position: absolute; left: var(--cx, 50%); top: var(--cy, 55%); width: calc(var(--dim, 400px) * 1.35); height: calc(var(--dim, 400px) * 1.5);
  translate: -50% -55%; background: var(--eclairs) center / 100% 100% no-repeat, var(--eclairs-2) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 8px #ff2a1a) drop-shadow(0 0 2px #fff); opacity: 0; animation: eclair 4.8s linear infinite;
}
.scene.r-mythique .halo-r { background: radial-gradient(circle, rgba(224, 72, 63, .75) 0, rgba(139, 26, 26, .4) 36%, transparent 66%); animation: pouls-halo 4s ease-in-out infinite, battement 2.6s ease-in-out infinite; }

/* ── Fiche d'un Mythique : fenêtre LevelUp passée au rouge sombre, éclairs derrière le boss ── */
dialog.fiche.r-mythique { background: radial-gradient(ellipse at 22% 30%, #3a0c10 0, #1e0d16 38%, var(--dark) 72%); }
.fiche.r-mythique .revelation .halo { filter: hue-rotate(-42deg) saturate(1.6) brightness(.9); }
.fiche.r-mythique .revelation .rais { filter: hue-rotate(-42deg) saturate(1.8); }
.revelation .eclairs {
  position: absolute; left: 50%; top: 2%; width: 320px; height: 80%; translate: -50% 0; pointer-events: none;
  background: var(--eclairs) center / 100% 100% no-repeat, var(--eclairs-2) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 7px #ff2a1a); opacity: 0; animation: eclair 4.6s linear infinite;
}
.fiche.r-mythique .ruban { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)) drop-shadow(0 0 14px rgba(224, 72, 63, .45)); }

/* Donjon et capture (fiche d'un Mythique). */
.donjon-ligne { display: flex; align-items: center; gap: 12px; }
.donjon-ligne img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
.donjon-ligne b { display: block; font: 400 19px/1.15 var(--titre); text-transform: uppercase; text-shadow: 0 2px 0 #000; }
.donjon-ligne span { color: var(--doux); font-size: 13.5px; font-weight: 500; }
.regles-fiche { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.regles-fiche li { display: flex; align-items: center; gap: 10px; color: var(--doux); font-size: 14px; }
.regles-fiche li > img { width: 30px; height: 38px; object-fit: contain; flex: none; }
.regles-fiche li > .ico-n { width: 24px; height: 24px; margin: 0 3px; color: var(--or-clair); }
.regles-fiche b { font: 400 20px/1 var(--titre); color: var(--or-clair); text-shadow: 0 2px 0 #000; white-space: nowrap; }
.regles-fiche .kroma-ligne b { background: linear-gradient(90deg, #ff5ea8, #ffcf4d, #70ff94, #4fd8ff, #9d7bff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.gemme-kroma {
  width: 18px; height: 18px; margin: 0 8px 0 6px; flex: none; background: conic-gradient(#ff5ea8, #ffcf4d, #70ff94, #4fd8ff, #9d7bff, #ff5ea8);
  -webkit-mask: url("../img/natif/diamondFill.png") center / contain no-repeat; mask: url("../img/natif/diamondFill.png") center / contain no-repeat;
  animation: arc-en-ciel 6s linear infinite;
}

/* Rangs des sorts (1 à 4 : niveaux 1, 50, 100, 150 du dresseur) : chiffres soulignés comme les onglets du client. */
.titre-sorts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.titre-sorts h3 { margin: 0; }
.rangs { display: flex; gap: 2px; }
.rangs button { position: relative; width: 32px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; font: 400 16px/1 var(--titre); color: var(--discret); text-shadow: 0 2px 0 #000; transition: color .2s, transform .25s var(--ressort); }
.rangs button:hover { color: var(--creme); transform: translateY(-2px); }
.rangs button[aria-pressed="true"] { color: var(--citron); }
.rangs button[aria-pressed="true"]::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 0; height: 2px; background: var(--citron); box-shadow: 0 0 8px var(--citron); }
.sort .detail { margin-top: 6px; }
.sort .detail .cout { white-space: normal; }
.sort .effets { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; }
.sort .effets li { font-size: 13.5px; font-weight: 500; color: var(--creme-2); padding-left: 14px; position: relative; }
.sort .effets li::before {
  content: ""; position: absolute; left: 1px; top: .5em; width: 7px; height: 7px; background: var(--r, var(--or));
  -webkit-mask: url("../img/natif/diamondFill.png") center / contain no-repeat; mask: url("../img/natif/diamondFill.png") center / contain no-repeat;
}
.sort .sceau { font: 600 11px var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--mythique-vif); text-shadow: 0 0 8px rgba(224, 72, 63, .6); }
/* .sort.signature : style laissé à la direction artistique (osalia.css). */

/* ── Page Monde ─────────────────────────────────────────────────────── */
.monde { display: grid; grid-template-columns: minmax(0, 1fr); gap: 70px; margin-top: 10px; }
.monde-bloc { position: relative; }
.monde-bloc > .titre-m, .monde-texte > .titre-m { margin-bottom: 14px; }
.chiffres { display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: flex-end; margin: 6px 0 22px; }
.chiffre { position: relative; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 12px; }
.chiffre > img, .chiffre > .ico-n { grid-row: span 2; width: 44px; height: auto; max-height: 50px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); transition: transform .35s var(--ressort); }
.chiffre > .ico-n { width: 36px; height: 36px; color: var(--or-clair); }
.chiffre:hover > img, .chiffre:hover > .ico-n { transform: translateY(-3px) scale(1.08); }
.chiffre b { font: 400 44px/1 var(--titre); background: linear-gradient(#fff3c4, var(--or) 55%, var(--or-fonce)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .8)); white-space: nowrap; }
.chiffre span { font: 600 12.5px/1.2 var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--creme-2); }
.chiffre:not(:has(> img, > .ico-n)) { grid-template-columns: auto; }
.chiffre.kroma-c b { background: linear-gradient(90deg, #ff5ea8, #ffcf4d, #70ff94, #4fd8ff, #9d7bff); -webkit-background-clip: text; background-clip: text; }

/* Sauvages : six âmes de rareté qui flottent, puis les trois temps (âme, révélation, capture). */
.monde-sauvages { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 30px; align-items: center; }
.ames { position: relative; height: 300px; }
.ames img { position: absolute; bottom: 8%; left: calc(var(--i) * 15%); width: 22%; height: auto; animation: flotte-ame 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); filter: drop-shadow(0 0 14px rgba(182, 179, 230, .35)); }
.ames img:nth-child(2n) { width: 17%; bottom: 34%; }
.ames img:nth-child(3n) { bottom: 18%; }
@keyframes flotte-ame { 50% { translate: 0 -16px; } }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 0 22px; }
.etapes li { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; font: 600 13px/1.25 var(--texte); color: var(--creme-2); }
.etapes li + li::before { content: ""; position: absolute; left: -28px; top: 14px; width: 34px; height: 16px; background: url("../img/natif/turnStartDeco.png") left center / auto 100% no-repeat; opacity: .9; }
.etapes img { width: 34px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); transition: transform .35s var(--ressort); }
.etapes li:hover img, .etapes li:hover .ico-n { transform: translateY(-3px) scale(1.1); }
.etapes .ico-n { width: 34px; height: 44px; color: var(--or-clair); transition: transform .35s var(--ressort); }
.etapes b { font: 400 18px var(--titre); color: var(--or-clair); text-shadow: 0 2px 0 #000; }

/* Mythiques : trois cartes de boss, la vedette au milieu plus haute. */
.monde-mythiques { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 30px; align-items: center; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 190px)); justify-content: center; gap: 18px; align-items: end; }
.trio .vedette-m { margin-bottom: 30px; }

/* Raretés : une carte par rareté avec le fond animé de sa rareté, et le Kroma. */
.rangee-r { display: grid; grid-template-columns: repeat(4, minmax(0, 200px)); justify-content: center; gap: 26px 30px; }
.rangee-r figure { margin: 0; display: grid; gap: 8px; justify-items: center; }
.rangee-r figcaption { font: 600 12px var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--r); text-shadow: 0 1px 2px #000; }
.rangee-r .r-kroma figcaption { background: linear-gradient(90deg, #ff5ea8, #ffcf4d, #70ff94, #4fd8ff, #9d7bff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }

/* Fonds animés par rareté (même esprit que les cartes du jeu, plus vivant à mesure que la rareté monte). */
.carte-n.fond-rarete:not(.r-mythique) .cn-art { background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--r) 58%, #1b1d32) 0, color-mix(in srgb, var(--r) 22%, #141629) 42%, #11122a 80%); }
.carte-n.fond-rarete:not(.r-mythique) .cn-art::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* Commun : fine poussière lumineuse qui flotte. */
.carte-n.fond-rarete.r-commun .cn-art::before {
  background: radial-gradient(circle, rgba(255, 255, 255, .8) 0 1px, transparent 2px) 0 0 / 34px 41px,
              radial-gradient(circle, rgba(255, 255, 255, .5) 0 1px, transparent 2px) 13px 19px / 47px 53px;
  animation: poussiere 14s linear infinite; opacity: .55;
}
@keyframes poussiere { to { background-position: 0 -410px, 13px -511px; } }
/* Rare : lumière bleue qui respire, reflets en diagonale. */
.carte-n.fond-rarete.r-rare .cn-art::before {
  background: linear-gradient(115deg, transparent 40%, rgba(160, 215, 255, .32) 48%, transparent 56%) 0 0 / 260% 100%,
              radial-gradient(circle at 50% 46%, rgba(79, 176, 255, .55), transparent 58%);
  animation: reflet-r 4.2s ease-in-out infinite, respire-r 3.4s ease-in-out infinite;
}
@keyframes reflet-r { 0% { background-position: 140% 0, 0 0; } 100% { background-position: -40% 0, 0 0; } }
@keyframes respire-r { 50% { opacity: .55; } }
/* Unique : lueur verte aux pieds, lucioles. */
.carte-n.fond-rarete.r-unique .cn-art::before {
  background: radial-gradient(circle, #b6ffe9 0 1.5px, transparent 3px) 0 0 / 52px 60px,
              radial-gradient(ellipse at 50% 74%, rgba(63, 224, 184, .7), transparent 46%);
  animation: lucioles 9s ease-in-out infinite alternate, respire-r 3s ease-in-out infinite;
}
@keyframes lucioles { to { background-position: 26px -60px, 0 0; } }
/* Épique : rayons violets qui tournent. */
.carte-n.fond-rarete.r-epique .cn-art::before, .carte-n.fond-rarete.r-legendaire .cn-art::before {
  inset: -40%; background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--r) 55%, transparent) 0 5deg, transparent 5deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 46%); mask: radial-gradient(circle, #000 12%, transparent 46%);
  animation: tourne 24s linear infinite;
}
@keyframes tourne { to { rotate: 360deg; } }
/* Légendaire : rayons d'or plus denses et plus rapides, balayage. */
.carte-n.fond-rarete.r-legendaire .cn-art::before { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 214, 90, .7) 0 4deg, transparent 4deg 14deg); animation-duration: 14s; }
.carte-n.fond-rarete.r-legendaire .cn-ombre { opacity: 1; background: linear-gradient(110deg, transparent 42%, rgba(255, 240, 190, .35) 50%, transparent 58%) 0 0 / 300% 100%; animation: reflet-r 3.6s ease-in-out infinite; }
/* Évolution : énergie qui monte (couleur de la rareté du site). */
.carte-n.fond-rarete.r-evolution .cn-art::before {
  background: repeating-linear-gradient(0deg, transparent 0 16px, color-mix(in srgb, var(--r) 30%, transparent) 16px 18px, transparent 18px 34px),
              radial-gradient(ellipse at 50% 90%, color-mix(in srgb, var(--r) 65%, transparent), transparent 55%);
  -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  animation: monte-e 2.4s linear infinite;
}
@keyframes monte-e { to { background-position: 0 -68px, 0 0; } }
/* Kroma : reflet holographique arc-en-ciel posé sur la rareté. */
.carte-n.fond-rarete.kroma .cn-art::before {
  inset: -40%; background: conic-gradient(#ff5ea8, #ffcf4d, #70ff94, #4fd8ff, #9d7bff, #ff5ea8); opacity: .55; mix-blend-mode: screen;
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 50%); mask: radial-gradient(circle, #000 18%, transparent 50%);
  animation: tourne 9s linear infinite;
}
.carte-n.fond-rarete.kroma .cn-ombre { opacity: 1; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 48%, transparent 58%) 0 0 / 300% 100%; animation: reflet-r 2.8s ease-in-out infinite; mix-blend-mode: overlay; }
.carte-n.fond-rarete.kroma .cn-cadre { background: conic-gradient(from 0deg, #ff5ea8, #ffcf4d, #70ff94, #4fd8ff, #9d7bff, #ff5ea8); animation: arc-en-ciel 6s linear infinite; }
.carte-n.fond-rarete.kroma .cn-titre::after { background: conic-gradient(#ff5ea8, #ffcf4d, #70ff94, #4fd8ff, #9d7bff, #ff5ea8); }

/* Téléporteur : défilé continu des boss de donjon (portrait du Mythique, niveau du donjon). */
.defile-boss { position: relative; overflow: hidden; padding: 8px 0 4px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.defile-boss .piste { display: flex; width: max-content; animation: defile-b calc(var(--n, 100) * 1.1s) linear infinite; }
.defile-boss:hover .piste { animation-play-state: paused; }
.defile-boss .double { display: flex; }
.defile-boss a { position: relative; display: grid; justify-items: center; width: 84px; flex: none; color: var(--creme-2); }
.defile-boss img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)); transition: transform .3s var(--ressort), filter .3s; }
.defile-boss a:hover img { transform: translateY(-5px) scale(1.12); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 12px rgba(224, 72, 63, .9)); }
.defile-boss span { font: 400 13px var(--titre); color: var(--or-clair); text-shadow: 0 2px 0 #000; }
@keyframes defile-b { to { transform: translateX(-50%); } }

/* ── Compte : espace du joueur connecté ─────────────────────────────── */
.formulaire .aide { font-size: 12.5px; color: var(--discret); text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ── Écrans étroits ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .monde-sauvages, .monde-mythiques { grid-template-columns: 1fr; }
  .ames { height: 200px; max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 760px) {
  .monde { gap: 54px; }
  .chiffres { gap: 14px 26px; }
  .chiffre b { font-size: 34px; }
  .chiffre > img { width: 36px; }
  .rangee-r { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .trio .vedette-m { margin-bottom: 16px; }
  .trio .cn-nom { font-size: 11px; }
  .trio .carte-n .cn-donjon { display: none; }
  .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
  .etapes li { font-size: 12px; }
  .etapes li + li::before { left: -20px; width: 24px; height: 12px; top: 16px; }
  .titre-sorts { flex-wrap: wrap; }
  .revelation .eclairs { width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .carte-n.r-mythique .cn-art::before, .scene.r-mythique .lumiere::after, .revelation .eclairs { opacity: 0; }
}