/* Dorax Finance — the moment a win arrives, the owner's (v404; features/phone/r6-win-moment.js; the canvas "Logro-alcanzado-V6"). One sequence of
   about 2.3 s: the glow grows; the medal arrives (a coin turns and lands with a small beat, the others rise into place); a ring of light leaves it;
   a sheen crosses it once; the rays come in and keep turning slowly; a few particles burst and drift down; then the words, then the buttons.
   A tap on the medal draws it again, so it all plays again. Nothing moves for someone who asked for less motion. */
@media (max-width: 920px) {
  :root.land #overlay .r6la { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; overflow: hidden; background: #070808; color: #EFF1F6; }
  :root.land #overlay .r6la.r6la-leave { animation: r6la-leave .2s ease-in both; pointer-events: none; }      /* v426: back to Your wins, it fades */
  @keyframes r6la-leave { to { opacity: 0; transform: scale(.98); } }
  :root.land #overlay .r6la-stage { position: relative; flex: 1 1 auto; min-height: 260px; }
  :root.land #overlay .r6la-stage > * { position: absolute; left: 50%; top: 52%; }
  :root.land #overlay .r6la-light { width: 0; height: 0; }      /* v428: the rays, the ring and the particles, put in two frames later, from the same centre */
  :root.land #overlay .r6la-light > * { position: absolute; left: 0; top: 0; }
  :root.land #overlay .r6la-glow { width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; animation: r6la-glow 1.3s cubic-bezier(.2, .8, .2, 1) both; }
  :root.land #overlay .r6la-rays { width: 400px; height: 400px; margin: -200px 0 0 -200px; animation: r6la-rays 1.2s ease-out .75s both; }
  :root.land #overlay .r6la-rays > span { display: block; width: 400px; height: 400px; animation: r6la-spin 70s linear infinite; }
  :root.land #overlay .r6la-rays svg { display: block; }
  :root.land #overlay .r6la-halo { width: 200px; height: 200px; margin: -100px 0 0 -100px; box-sizing: border-box; border: 2px solid; border-radius: 50%; animation: r6la-halo 1.1s cubic-bezier(.2, .8, .2, 1) 1.12s both; }
  :root.land #overlay .r6la-parts { width: 0; height: 0; }
  :root.land #overlay .r6la-parts i { position: absolute; left: 0; top: 0; animation: r6la-burst 1.9s cubic-bezier(.15, .75, .3, 1) both; }
  :root.land #overlay .r6la-medal { all: unset; position: absolute; left: 50%; top: 52%; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; display: block; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; }
  :root.land #overlay .r6la-medal:focus-visible { outline: 2px solid #9FD182; outline-offset: 8px; }
  :root.land #overlay .r6la-m { position: relative; display: block; width: 200px; height: 200px; }
  :root.land #overlay .r6la-m svg { display: block; }
  :root.land #overlay .r6la-m.flip { animation: r6la-flip 1.15s linear .15s both; will-change: transform, opacity; }      /* v431: the turn drawn flat (see the keyframes) */
  :root.land #overlay .r6la-m.arrive { animation: r6la-arrive .9s cubic-bezier(.2, .85, .25, 1) .15s both; }
  @keyframes r6la-glow { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
  @keyframes r6la-rays { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
  @keyframes r6la-spin { to { transform: rotate(360deg); } }
  @keyframes r6la-halo { 0% { opacity: 0; transform: scale(.72); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(1.75); } }
  @keyframes r6la-burst { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.3); } 10% { opacity: 1; } 60% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
    100% { opacity: 0; transform: translate(calc(var(--x) * 1.08), calc(var(--y) + 60px)) rotate(calc(var(--r) * 1.7)) scale(.75); } }
  @keyframes r6la-flip { 0% { opacity: 0; transform: translateY(46px) scale(-0.45, 0.45); } 0.5% { opacity: 0.047; transform: translateY(44.8px) scale(-0.452, 0.466); } 1% { opacity: 0.094; transform: translateY(43.6px) scale(-0.426, 0.483); } 1.5% { opacity: 0.14; transform: translateY(42.3px) scale(-0.371, 0.499); } 2% { opacity: 0.186; transform: translateY(41.1px) scale(-0.288, 0.516); } 2.5% { opacity: 0.231; transform: translateY(39.9px) scale(-0.183, 0.532); } 3% { opacity: 0.275; transform: translateY(38.7px) scale(-0.061, 0.548); } 3.5% { opacity: 0.318; transform: translateY(37.6px) scale(0.071, 0.564); } 4% { opacity: 0.36; transform: translateY(36.4px) scale(0.205, 0.58); } 4.5% { opacity: 0.4; transform: translateY(35.2px) scale(0.334, 0.595); } 5% { opacity: 0.438; transform: translateY(34.1px) scale(0.449, 0.611); } 5.5% { opacity: 0.475; transform: translateY(33px) scale(0.544, 0.626); } 6% { opacity: 0.509; transform: translateY(31.8px) scale(0.613, 0.641); } 6.5% { opacity: 0.542; transform: translateY(30.8px) scale(0.654, 0.656); } 7% { opacity: 0.573; transform: translateY(29.7px) scale(0.663, 0.67); } 8% { opacity: 0.628; transform: translateY(27.6px) scale(0.592, 0.698); } 9% { opacity: 0.677; transform: translateY(25.6px) scale(0.418, 0.725); } 10% { opacity: 0.719; transform: translateY(23.8px) scale(0.178, 0.75); } 11% { opacity: 0.755; transform: translateY(22px) scale(-0.089, 0.774); } 12% { opacity: 0.786; transform: translateY(20.3px) scale(-0.343, 0.796); } 13% { opacity: 0.813; transform: translateY(18.8px) scale(-0.559, 0.816); } 14% { opacity: 0.837; transform: translateY(17.4px) scale(-0.721, 0.836); } 15% { opacity: 0.857; transform: translateY(16.1px) scale(-0.823, 0.853); } 16% { opacity: 0.875; transform: translateY(14.9px) scale(-0.87, 0.87); } 17% { opacity: 0.89; transform: translateY(13.7px) scale(-0.866, 0.885); } 19% { opacity: 0.916; transform: translateY(11.8px) scale(-0.751, 0.911); } 21% { opacity: 0.936; transform: translateY(10.1px) scale(-0.551, 0.934); } 23% { opacity: 0.951; transform: translateY(8.7px) scale(-0.322, 0.953); } 25% { opacity: 0.963; transform: translateY(7.4px) scale(-0.098, 0.97); } 29% { opacity: 0.98; transform: translateY(5.5px) scale(0.28, 0.996); } 33% { opacity: 0.991; transform: translateY(4.1px) scale(0.549, 1.015); } 41% { opacity: 0.999; transform: translateY(2.2px) scale(0.845, 1.04); } 49% { opacity: 1; transform: translateY(1.1px) scale(0.969, 1.055); } 57% { opacity: 1; transform: translateY(0.5px) scale(1.021, 1.063); } 65% { opacity: 1; transform: translateY(0.2px) scale(1.043, 1.067); } 73% { opacity: 1; transform: translateY(0px) scale(1.052, 1.07); } 81% { opacity: 1; transform: translateY(0px) scale(1.045, 1.055); } 89% { opacity: 1; transform: translateY(0px) scale(1.005, 1.005); } 97% { opacity: 1; transform: translateY(0px) scale(1, 1); } 100% { opacity: 1; transform: translateY(0px) scale(1, 1); } }
  @keyframes r6la-arrive { from { opacity: 0; transform: translateY(30px) scale(.82); } to { opacity: 1; transform: none; } }
  /* a sheen crosses the medal once */
  :root.land #overlay .r6la-sheen { animation: r6la-sheen .95s cubic-bezier(.45, 0, .2, 1) 1.2s both; }
  @keyframes r6la-sheen { from { transform: translateX(0) skewX(-16deg); } to { transform: translateX(340px) skewX(-16deg); } }
  /* each medal's one thing; the parts turn around their own box */
  :root.land #overlay .r6la-fb { transform-box: fill-box; }
  :root.land #overlay .r6la-rise { transform-origin: 50% 100%; animation: r6la-rise .6s cubic-bezier(.3, 1.4, .5, 1) 1.2s both; }
  @keyframes r6la-rise { from { transform: scaleY(0); } to { transform: none; } }
  :root.land #overlay .r6la-drop { animation: r6la-drop .7s cubic-bezier(.3, 1.5, .5, 1) 1.2s both; }
  @keyframes r6la-drop { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }
  :root.land #overlay .r6la-tick { transform-origin: 50% 50%; animation: r6la-tick .7s ease 1.22s both; }
  @keyframes r6la-tick { 25% { transform: rotate(-10deg); } 55% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } }
  :root.land #overlay :is(.r6la-draw, .r6la-seg) { stroke-dasharray: 1; }
  :root.land #overlay .r6la-draw { animation: r6la-draw .5s ease-out 1.5s both; }
  :root.land #overlay .r6la-seg { animation: r6la-draw .32s ease-out both; }
  @keyframes r6la-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  :root.land #overlay .r6la-wiggle { transform-origin: 50% 100%; animation: r6la-wiggle .7s ease 1.62s both; }
  @keyframes r6la-wiggle { 30% { transform: rotate(-6deg); } 60% { transform: rotate(5deg); } }
  :root.land #overlay .r6la-coin { animation: r6la-coin .6s cubic-bezier(.5, 0, .75, 0) 1.2s both; }
  @keyframes r6la-coin { 0% { opacity: 0; transform: translateY(-7px); } 25% { opacity: 1; } 85% { opacity: 1; transform: translateY(3.4px); } 100% { opacity: 0; transform: translateY(4px); } }
  :root.land #overlay .r6la-ring { transform-origin: 50% 0%; animation: r6la-ring 1s ease 1.2s both; }
  @keyframes r6la-ring { 15% { transform: rotate(16deg); } 35% { transform: rotate(-13deg); } 55% { transform: rotate(9deg); } 75% { transform: rotate(-5deg); } }
  :root.land #overlay .r6la-needle { transform-origin: 0% 100%; animation: r6la-needle .9s cubic-bezier(.3, 1.6, .5, 1) 1.2s both; }
  @keyframes r6la-needle { from { transform: rotate(-115deg); } to { transform: none; } }
  :root.land #overlay .r6la-sunup { animation: r6la-sunup 1.25s cubic-bezier(.16, 1, .3, 1) .75s both; }
  @keyframes r6la-sunup { from { transform: translateY(var(--rise)); } to { transform: none; } }
  :root.land #overlay .r6la-pole { transform-origin: 50% 100%; animation: r6la-rise .45s cubic-bezier(.2, .9, .25, 1) .7s both; }
  :root.land #overlay .r6la-cloth { transform-origin: 0% 50%; animation: r6la-cloth .65s cubic-bezier(.34, 1.4, .5, 1) 1.05s both; }
  @keyframes r6la-cloth { from { transform: scaleX(0) skewY(-12deg); } to { transform: none; } }
  :root.land #overlay .r6la-pop { transform-origin: 50% 50%; animation: r6la-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.45s both; }
  @keyframes r6la-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
  :root.land #overlay .r6la-open { transform-origin: 100% 100%; transform: translateY(-12px) rotate(-30deg); animation: r6la-open .85s cubic-bezier(.3, 1.3, .5, 1) 1.05s both; }
  /* v463: its end as its own transform too, so with the movement off (or once played) the shackle is open above the lock: the drawing's own
     rotate(-30 130 98) and this origin had added up, and it hung down at the side (owner: "el dibujo no está centrado") */
  @keyframes r6la-open { 0% { transform: none; } 55% { transform: translateY(-17px) rotate(-38deg); } 100% { transform: translateY(-12px) rotate(-30deg); } }
  :root.land #overlay .r6la-stamp { transform-origin: 50% 50%; animation: r6la-stamp .55s cubic-bezier(.3, 1.3, .5, 1) .62s both; }
  @keyframes r6la-stamp { 0% { opacity: 0; transform: scale(1.7) rotate(-22deg); } 70% { opacity: 1; transform: scale(.93) rotate(-6deg); } 100% { opacity: 1; transform: rotate(-8deg); } }
  :root.land #overlay .r6la-ribbon { animation: r6la-ribbon .5s cubic-bezier(.2, .9, .25, 1) 1.1s both; }
  @keyframes r6la-ribbon { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }

  /* the words, then the two buttons at the thumb */
  :root.land #overlay .r6la-words { flex: none; display: flex; flex-direction: column; align-items: center; padding: 0 24px; text-align: center; }
  :root.land #overlay .r6la-words > small:first-child { display: inline-flex; align-items: center; gap: 7px; color: rgba(239, 241, 246, .62); font-size: 14px; font-weight: 500; }
  :root.land #overlay .r6la-words h2 { margin: 12px 0 0; color: #EFF1F6; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; outline: none; }
  :root.land #overlay .r6la-words p { max-width: 300px; margin: 10px 0 0; color: rgba(239, 241, 246, .72); font-size: 15.5px; line-height: 1.45; }
  :root.land #overlay .r6la-n { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; margin-top: 18px; padding: 0 14px; border-radius: 999px; background: rgba(239, 241, 246, .07); font-size: 13.5px; font-weight: 500; }
  :root.land #overlay .r6la-n > span { display: block; width: 40px; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(239, 241, 246, .12); }
  :root.land #overlay .r6la-n i { display: block; height: 100%; border-radius: 3px; background: #9FD182; }
  :root.land #overlay .r6la-date { margin-top: 10px; color: rgba(239, 241, 246, .5); font-size: 13px; }
  :root.land #overlay .r6la-acts { flex: none; display: flex; gap: 10px; padding: 26px 20px calc(28px + var(--safe-b, 0px)); }
  :root.land #overlay .r6la-acts button { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; }
  :root.land #overlay .r6la-acts .r6la-done { background: rgba(26, 29, 29, .92); box-shadow: inset 0 0 0 1px rgba(239, 241, 246, .14), 0 8px 22px rgba(0, 0, 0, .45); color: #EFF1F6; }
  :root.land #overlay .r6la-acts .r6la-share { background: #9FD182; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); color: #101212; }
  :root.land #overlay .r6la-share svg { flex: none; stroke-width: 2.2; }
  :root.land #overlay .r6la-acts button:focus-visible { outline: 2px solid #9FD182; outline-offset: 3px; }
  :root.land #overlay .r6la-in { animation: r6la-in .42s cubic-bezier(.2, .9, .25, 1) both; }
  @keyframes r6la-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  /* a short phone: the stage a little smaller */
  @media (max-height: 700px) {
    :root.land #overlay .r6la-stage > :is(.r6la-medal, .r6la-halo, .r6la-rays, .r6la-glow) { scale: .8; }
    :root.land #overlay .r6la-words h2 { font-size: 23px; }
    :root.land #overlay .r6la-n { margin-top: 12px; }
    :root.land #overlay .r6la-acts { padding-top: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    :root.land #overlay .r6la *, :root.land #overlay .r6la { animation: none !important; }
    :root.land #overlay :is(.r6la-halo, .r6la-parts, .r6la-sheen, .r6la-coin) { display: none; }
  }
}
/* v450: the moment comes in with a short fade, over the page or over Your wins (still under it while it fades: r6-win-moment.js), and leaves the same
   way when it closes (before, the black came at once and went at once) */
@media (max-width: 920px) {
  :root.land #overlay.in .r6la, :root.land #overlay .r6la.r6la-enter { animation: r6la-show .26s ease-out both; }
  :root.land #overlay.out .r6la { animation: r6la-leave .2s ease-in both; }
  @keyframes r6la-show { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { :root.land #overlay .r6la { animation: none !important; } }
@media (max-width: 920px) { :root.land #overlay .r6la.r6la-leave:not(#r6la-x) { animation: r6la-leave .2s ease-in both; } }      /* leaving wins over coming in */
