☰

Just Dance Now Modern

An rebranded Just Dance Now Style

  1.    /*ha*/
  2. /* ==UserStyle==
  3. @name         Just Dance Now Modern
  4. @namespace    Pakar
  5. @version      130523.1.5.62
  6. @description  An rebranded Just Dance Now Style
  7. @author       Pakar
  8. @include      https://justdancenow.com/*
  9. ==/UserStyle== */
  10.  
  11. /*-fill*/
  12. @-moz-document domain("justdancenow.com") {
  13.     :root {
  14.         --pictobeat-color: #fff;
  15.         --test: #212121/*#coverflow, #players::before'*/
  16.     }
  17.     @font-face {
  18.         font-family: "Just Dance";
  19.         src: url('https://cdn.glitch.global/7781ee26-c563-4365-b245-ceb83156a174/Brother1816-Medium.ttf?v=1665251090937');
  20.     }
  21.     @font-face {
  22.         font-family: "OpenSans Regular";
  23.         src: url('https://cdn.glitch.global/7781ee26-c563-4365-b245-ceb83156a174/Brother1816-Regular.ttf?v=1665251058297') format('tff');
  24.     }
  25.     .footer,
  26.     .footer .copyright,
  27.     nav,
  28.     .footer__ubi-logo,
  29.     .footer .menu,
  30.     h1.landing-text__title,
  31.     .logo__inner,
  32.     h2.landing-text__subtitle,
  33.     .side-nav,
  34.     .landing-button::before,
  35.     .section.availability,
  36.     .section--vertical-content,
  37.     .section#how-it-works,
  38.     section#explore,
  39.     .menu__head,
  40.     .main::before,
  41.     .menu__legal,
  42.     .landing__video,
  43.     .info-panel,
  44.     #afterdance #players,
  45.     #afterdance.transition-in #crown-container,
  46.     .room-info__patch,
  47.     #afterdance .results .highScore.show,
  48.     .landing-patch,
  49.     .landing-circle,
  50.     .landing-arrow,
  51.     .dr-landing__icon-wrapper,
  52.     .landing-button.visible,
  53.     html.ftue ul.tabs::after,
  54.     html.ftue .playlist-grid .playlist::before,
  55.     html.ftue .playlist-grid .playlist::after,
  56.     #just-dance-now .tutorial img,
  57.     .danceroom__qr-code-wrapper,
  58.     #just-dance-now .danceroom__label,
  59.     .toggle::after,
  60.     .state-songselection .dancercard .player-exp,
  61.     .state-songselection .dancercard .player-flag,
  62.     .state-songselection #players .player .controller-coins,
  63.     #players::before,
  64.     .title-container .artist,
  65.     .connect-phone-info,
  66.     .modal__container::after,
  67.     .song-grid .song__difficulty,
  68.     .item::after,
  69.     .connect-phone-info--clickable .connect-phone-info__text::before,
  70.     .tabs--connect,
  71.     ul.tabs li.selected::before,
  72.     #racetrack .platform,
  73.     #crown-container .crown,
  74.     .highscore-display::after,
  75.     .vip .account,
  76.     .song-action__button::after,
  77.     #just-dance-now .tutorial::after,
  78.     .song-grid--details .song-grid--titleDetails .song-grid--duration,
  79.     #just-dance-now .tutorial::after,
  80.     .tutorial__image,
  81.     .state-tutorial .grid-container,
  82.     .coach-selection::after,
  83.     .state-coachselection #just-dance-now .views::before,
  84.     .state-dance #just-dance-now .views::before,
  85.     .video-preview--visible::after,
  86.     .playlist-img-container .playlist-title-details{
  87.         display: none !important;
  88.     }
  89.     .exit-btn--animate {
  90.         display: block!important;
  91.         visibility: visible!important;
  92.     }
  93.     .dr-landing .init-spinner__spinner {
  94.         fill: #fff;
  95.     }
  96.     .fullscreen-spinner {
  97.     background: #1d124091!important;
  98. }
  99.     .fullscreen-spinner .spinner, .video-preview::after{
  100.         fill: #1110!important;
  101.         background-image: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/1671596110099.png);
  102.         background-size: 100%;
  103.         animation: spin 0.65s linear 0s normal none infinite;
  104.     }
  105.     .dr-landing__room-number {
  106.         font-size: 25vh
  107.     }
  108.     .dr-landing {
  109.         top: 71vh;
  110.         position: absolute
  111.     }
  112.  
  113.     #coverflow,
  114.     #just-dance-now .tutorial {
  115.         padding-top: 0rem!important;
  116.     }
  117.     .main-header {
  118.         position: relative;
  119.         width: 100%;
  120.         height: 7rem;
  121.         background-image: none;
  122.         background-repeat: no-repeat;
  123.         background-size: cover;
  124.     }
  125.     .main-header:after {
  126.         content: "Just Dance Now Modern | Pre-Beta 1.56 \A Use JDNaCore For Better Experience!";
  127.         top: 0%;
  128.         left: 0%;
  129.         width: 47vw;
  130.         height: 5vh;
  131.         position: absolute;
  132.         margin-left: 50vw;
  133.         margin-top: 4vh;
  134.         font-size: 1rem;
  135.         letter-spacing: 0.03em;
  136.         text-align: right;
  137.         white-space: pre-wrap;
  138.     }
  139.     .anucore-hui .main-header:after {
  140.         content: "Just Dance Now Modern | Pre-Beta 1.56 ";
  141.     }
  142.     .main-header:before {
  143.         content: "Use Phone To Open The Game";
  144.         top: 87vh;
  145.         left: 0%;
  146.         width: 47vw;
  147.         height: 5vh;
  148.         position: absolute;
  149.         margin-left: 50vw;
  150.         margin-top: 4vh;
  151.         font-size: 1rem;
  152.         letter-spacing: 0.03em;
  153.         text-align: right;
  154.     }
  155.     .dr-landing {
  156.         color: #fff;
  157.     }
  158.     .dr-landing::before {
  159.         background: none;
  160.     }
  161.     .main,
  162.     #play,
  163.     .init-spinner--splash {
  164.         background: linear-gradient(180deg, #000000d4 0%, rgba(0, 0, 0, 0) 52.94%, #000000cf 100%), url(https://cdn.discordapp.com/attachments/878359711324463104/1032013855594917969/45563452348572437578342573427853.png);
  165.         background-position: center;
  166.         background-size: 100% 100%;
  167.         background-repeat: no-repeat;
  168.         image-rendering: high-quality !important;
  169.     }
  170.  
  171.     .spinner {
  172.         fill: #fff0!important
  173.     }
  174.     .connect-phone-info--visible {
  175.         display: flex!important
  176.     }
  177.  
  178.  
  179.     .danceroom__number {
  180.         text-shadow: 0px 0px 2px white;
  181.         z-index: 0;
  182.         font-size: 0.3em!important;
  183.         text-align: center;
  184.         line-height: 0.3rem;
  185.         font-family: "Just Dance";
  186.         letter-spacing: 1px;
  187.     }
  188.     #settings {
  189.         height: 6%;
  190.         top: .1rem;
  191.         right: .1rem;
  192.     }
  193.     .state-dance #settings,
  194.     .state-dance #room-info {
  195.         opacity: 0;
  196.         transition: opacity .9s;
  197.     }
  198.     .state-dance #settings:hover,
  199.     .state-dance #room-info:hover {
  200.         opacity: 1;
  201.         transition: opacity .1s;
  202.     }
  203.     .coverflow--container {
  204.         box-shadow: -6px 6px 9px #908f8f5e;
  205.     }
  206.     .modal {
  207.         width: 83%;
  208.         height: 100%;
  209.         border-radius: 1em!important
  210.     }
  211.  
  212.     .modal::before {
  213.         content: '';
  214.         background-color: black;
  215.         width: 200%;
  216.     }
  217.     #settings::before {
  218.         content: '';
  219.         height: 100%;
  220.         width: 100%;
  221.         position: absolute;
  222.         border: 0.02rem solid #8c8c8c70!important;
  223.         border-radius: .1rem;
  224.         color: #110920;
  225.         background: #110920;
  226.         opacity: 1;
  227.         z-index: 2222;
  228.     }
  229.     .toggle {
  230.         background: none;
  231.         transform: scale(0.8);
  232.         top: -3%;
  233.     }
  234.     .danceroom {
  235.         background: #110920;
  236.         border: 0.02rem solid #8c8c8c70;
  237.         border-radius: .1rem;
  238.         color: #212121;
  239.         width: 1.1rem;
  240.     }
  241.  
  242.     /*ADMIN MENU*/
  243.     #admin-menu .menu__body {
  244.         border-radius: 1em;
  245.         background-color: #110920;
  246.         position: relative;
  247.     }
  248.     #admin-menu {
  249.         width: 3.4rem;
  250.         height: 4.3rem;
  251.         top: 3em;
  252.         left: -2.67rem
  253.     }
  254.  
  255.     /*SONG SELECTION*/
  256.     .coverflow--container {
  257.         background: none;
  258.         box-shadow: -6px 6px 9px #908f8f00;
  259.     }
  260.     #just-dance-now .views,
  261.     .coach-selection__list::before {
  262.         background-image: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/images/Dw0eAxks.png), linear-gradient(20deg, #260a39, #0c0623, #0c0623, #1b1864);
  263.         background-position: 30%, center;
  264.         background-size: 50%, 100%
  265.     }
  266.     .coach-selection__list::after {
  267.         background-image: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/images/EXsN0kn.png), url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/images/QyP0S2sAU.png);
  268.  
  269.         background-position: center;
  270.         animation: AnimateCosmos2 60s linear infinite;
  271.     }
  272.     #just-dance-now .views::before {
  273.         content: '';
  274.         width: 100%;
  275.         height: 100%;
  276.         position: absolute;
  277.         top: 0;
  278.         background-position: center;
  279.         background-image: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/images/EXsN0kn.png), url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/images/QyP0S2sAU.png);
  280.         animation: AnimateCosmos2 60s linear infinite;
  281.     }
  282.     #coverflow {
  283.         display: block!important;
  284.         opacity: 1!important;
  285.     }
  286.     .state-songselection .connect-phone-info {
  287.         width: 19.3%;
  288.         height: 7%;
  289.         font-size: .16em;
  290.         color: #e8e8e8;
  291.         background: #110920;
  292.         border: 0.02rem solid #8c8c8c70;
  293.         border-radius: .1rem;
  294.         top: .5rem;
  295.         left: 8.18rem;
  296.     }
  297.     .state-songselection #players .player.controller {
  298.         opacity: 1 !important;
  299.         visibility: visible !important;
  300.         display: block !important;
  301.     }
  302.     .state-songselection #players {
  303.         left: 7.43rem;
  304.         top: .06rem;
  305.     }
  306.     .state-songselection #players .player {
  307.         opacity: 0;
  308.     }
  309.     .state-songselection .dancercard .player-color {
  310.         overflow: visible;
  311.         width: 1.3em!important;
  312.         left: 0.16em!important;
  313.         top: 0.6em;
  314.         height: 1.3em!important;
  315.     }
  316.     .state-songselection .dancercard .player-color::before {
  317.         content: '';
  318.         position: absolute;
  319.         left: -0.2em;
  320.         top: -0.06em;
  321.         width: 1.96rem!important;
  322.         height: .348rem;
  323.         border: 0.02rem solid #8c8c8c70!important;
  324.         border-radius: .1rem;
  325.         color: #e8e8e8e8;
  326.         background: #110920!important;
  327.         z-index: -1;
  328.     }
  329.     .state-songselection .dancercard .player-name {
  330.         top: .25rem;
  331.         left: 6em !important;
  332.         width: 95.5% !important;
  333.         text-align: left !important;
  334.         text-shadow: 0px 0px #0000 !important;
  335.         font-family: Just Dance;
  336.         color: #e8e8e8;
  337.     }
  338.     .state-songselection .dancercard .avatar-wrapper {
  339.         width: 51%;
  340.         position: absolute;
  341.         z-index: 22;
  342.         top: .4em;
  343.         left: 0.36em;
  344.     }
  345.     #room-info {
  346.         background: #fff0;
  347.         left: 8.1rem;
  348.         width: 1.4rem;
  349.         height: 0;
  350.         overflow: visible!important;
  351.         cursor: pointer!important
  352.     }
  353.     .state-songselection #section-tabs {
  354.         width: 1.1rem;
  355.         right: -7rem;
  356.         z-index: 99;
  357.     }
  358.     ul.tabs li .tabs--icon {
  359.         background-repeat: no-repeat;
  360.         background-size: contain;
  361.         background-position: center;
  362.         height: 0.2rem!important;
  363.         width: 0.2rem!important;
  364.         margin: 0!important;
  365.         bottom: .4em;
  366.         left: .3em;
  367.         position: absolute;
  368.     }
  369.     #section-playlist:has(.playlist-container[style*="block"]) .playlist-img-container {
  370.     display: block!important;
  371.         width: 110%;
  372.         height: 117%;
  373.         left: -0.3em;
  374.         top: -0.3em;
  375.         
  376. }
  377.     .playlist-img-container .playlist--banner__selected img {
  378.     object-fit: cover;
  379.         filter: blur(0.1em);
  380.             opacity: 0.2;
  381.         pointer-events: none
  382. }
  383.     .grid-container {
  384.     overflow: visible;
  385. }
  386.     .playlist-img-container .playlist--banner__selected {
  387.     width: 100%;
  388.     height: 100%;
  389.     margin: 0;
  390. }
  391.     
  392.     ul.tabs li .tabs--text {
  393.         margin-top: 0;
  394.         bottom: .6em;
  395.         left: 2.4em;
  396.         position: absolute;
  397.     }
  398.     ul.tabs li {
  399.         margin-bottom: .3em;
  400.         height: 1.8em;
  401.         top: .8em;
  402.         border: 0.02rem solid #8c8c8c70!important;
  403.         border-radius: .1rem;
  404.         color: #aaa;
  405.         background: #110920!important;
  406.     }
  407.     .section-grid-trainer {
  408.         top: 1em;
  409.     }
  410.  
  411.     .state-songselection #coverflow {
  412.         height: 5.78rem;
  413.         padding-top: 0rem;
  414.     }
  415.     .item-container {
  416.         width: 9999rem!important;
  417.         height: 0%!important;
  418.     }
  419.     .item-container,
  420.     .song--details {
  421.         scroll-snap-type: x mandatory !important
  422.     }
  423.  
  424.     .item-selected {
  425.         scroll-snap-align: center !important; opacity: 1!important;
  426.     }
  427.     .grid-container .item-container .item {
  428.         opacity: 0.7;
  429.     }
  430.     .songlist-grid,
  431.     .song-grid {
  432.         position: relative;
  433.         top: 3.4rem!important;
  434.         z-index: 999;
  435.         overflow-y: visible;
  436.         overflow-x: hidden
  437.     }
  438.     .song-grid--details {
  439.         height: 0.62rem;
  440.         top: 0.8em;
  441.     }
  442.     #section-songlist .song-grid--details {
  443.         left: .2rem
  444.     }
  445.     #section-playlist .song-grid--details {
  446.         left: .6rem
  447.     }
  448.     .song-grid--details .song-grid--close {
  449.         background-color: #4e2cdb;
  450.         left: -.4rem;
  451.     }
  452.     .state-songselection #preview {
  453.         right: 5.5rem;
  454.     }
  455.     .grid-container .item-container .item {
  456.         width: 2.2rem;
  457.         height: 1.27rem;
  458.     }
  459.     .grid-container .item-container .song__decoration {
  460.         height: 100%;
  461.         width: 100%;
  462.         border-radius: 8px;
  463.         overflow: hidden;
  464.         float: left;
  465.     }
  466.     .item .song__cover {
  467.         object-fit: cover;
  468.         object-position: 50% 20%;
  469.         height: 100%!important;
  470.     }
  471.     .item {
  472.         transform: scale(0.9);
  473.         padding: 0;
  474.         border: 0.03rem solid #fff0;
  475.         margin: 0rem!important;
  476.     }
  477.     .item-selected {
  478.         border: 0.03rem solid #fff;
  479.         border-radius: 0.5em;
  480.     }
  481.     .grid-container .item-container .item.item-selected .song__cover {
  482.         border: 0px solid;
  483.         border-radius: 0!important;
  484.     }
  485.     .grid-container .item-container .item:hover .song__cover,
  486.     .grid-container .item-container .item.item-selected .song__cover {
  487.         padding: 0%;
  488.     }
  489.     .item .song__decoration::before {
  490.         content: '';
  491.         width: 100%;
  492.         height: 100%;
  493.         position: absolute;
  494.         background-image: linear-gradient(to top, #000c, #0000 50%);
  495.         animation: none;
  496.         z-index: 1;
  497.         background-size: contain!important;
  498.         background-position: center!important;
  499.     }
  500.     .item .song__decoration::after {
  501.         content: '';
  502.         width: 100%;
  503.         height: 100%;
  504.         position: absolute;
  505.         transform: none;
  506.         top: 0;
  507.         left: 0;
  508.         animation: none;
  509.         z-index: 3;
  510.         background-image: linear-gradient(to top, #0000, #0000);
  511.         background-size: cover!important;
  512.         background-position: center!important;
  513.     }
  514.     .item .song__cover::after {
  515.         content: '';
  516.         width: 100%;
  517.         height: 100%;
  518.         position: absolute;
  519.         background-image: linear-gradient(to top, #0000, #0000);
  520.         background-size: contain!important;
  521.         background-position: center!important;
  522.     }
  523.  
  524.     .item .song__decoration {
  525.         content: '';
  526.         width: 100%;
  527.         height: 100%;
  528.     }
  529.     .grid-container .item-container .title-container {
  530.         position: absolute;
  531.         height: 100%;
  532.         width: 100%;
  533.         color: #fff;
  534.         display: flex;
  535.         flex-direction: column;
  536.         justify-content: flex-end;
  537.         z-index: 2;
  538.         top: 0;
  539.         padding: 2%;
  540.     }
  541.  
  542.     .song--details {
  543.         width: 100%;
  544.     }
  545.     .songlist-container {
  546.         overflow: visible;
  547.     }
  548.     .song-grid--details .song-grid--titleDetails {
  549.         width: 8.9rem;
  550.         height: 100%;
  551.         position: absolute;
  552.         color: #fff;
  553.         border-bottom: 0px solid #cecccc;
  554.         font-family: "OpenSans Regular";
  555.         letter-spacing: -1px;
  556.         bottom: 2%!important;
  557.     }
  558.     #preview .song-details {
  559.         height: 2.2rem;
  560.         width: 5rem;
  561.         background-image: none;
  562.         top: 1.1rem;
  563.         left: 5.67rem;
  564.         padding: 0.1rem 0.0rem 0.0rem 0.5rem;
  565.         text-align: right;
  566.         transition: opacity .8s;
  567.     }
  568.     .song__infos {
  569.         transition: opacity .2s ease-out;
  570.     }
  571.     .song__infos--hide {
  572.         opacity: 0;
  573.         transition: opacity .2s ease-out;
  574.     }
  575.     .song__infos--hide .song-detail__text {
  576.         transform: translateX(-50%)!important
  577.     }
  578.     .song-detail__text {
  579.         transform: translateX(0%)!important
  580.     }
  581.     #preview .song-details h2,
  582.     #preview .song-details h3 {
  583.         text-shadow: 0.03em 0.03em 0.01em #21212199;
  584.         padding: 0em 0.15rem!important;
  585.         color: #f0f0f0;
  586.     }
  587.     #preview .song-details h2 {
  588.         font-weight: 800!important;
  589.         font-family: "OpenSans Regular";
  590.         font-size: .2em;
  591.     }
  592.     #preview .song-details h3 {
  593.         width: max-content;
  594.         float: right;
  595.         margin-top: 9.6em;
  596.         margin-right: 0.03rem;
  597.         text-align: right;
  598.         border: solid #ffe8e836 .17em;
  599.         border-radius: 0.46em;
  600.         color: #fff;
  601.         background: #110920;
  602.     }
  603.     .song__reward {
  604.         width: 0.7rem;
  605.         height: 0.7rem;
  606.         margin-top: -0.02rem;
  607.         position: absolute;
  608.         top: 0.3em;
  609.         right: 3.8rem;
  610.     }
  611.     .score__number {
  612.         top: -62%;
  613.         font-family: "Just Dance", "OpenSans Regular", "Impact", "Arial Bold", Gadget, sans-serif;
  614.         position: relative;
  615.         padding: 0 0.1rem;
  616.         overflow: hidden;
  617.     }
  618.     .score__stars {
  619.         left: 10%;
  620.     }
  621.     .song-cover--hi-res {
  622.         width: 10.28rem;
  623.         height: 3.4rem;
  624.         left: -.65rem;
  625.         top: -.69rem;
  626.         background-size: cover;
  627.         background-position: 50%;
  628.         z-index: -111;
  629.         transition: background .2s;
  630.         background-color: #0000;
  631.         border: none;
  632.     }
  633.     .state-songselection .song-cover--hi-res {
  634.         background: none;
  635.     }
  636.     #preview .song-preview {
  637.         z-index: -1;
  638.     }
  639.     .song-grid::before {
  640.         width: 100%;
  641.         height: 2.18rem;
  642.         content: '';
  643.         position: absolute;
  644.         top: -0.1rem;
  645.         padding: 0rem .1rem;
  646.         border-top: 0.0123rem solid #8c8c8c70;
  647.     }
  648.     .state-songselection #preview .left-pane .video-preview {
  649.         width: 5.4rem;
  650.         height: 3.1rem;
  651.         left: -.32rem;
  652.         top: -.39rem;
  653.         background: #0000;
  654.         overflow: visible;
  655.         opacity: 1!important;
  656.         display: block!important;
  657.         visibility: visible!important
  658.     }
  659.         #preview .left-pane .video-preview::after {
  660.         content: '';
  661.         width: 0.6rem;
  662.         height: 0.6rem;
  663.         left:40%;
  664.         top: 40%;
  665.             position: absolute;
  666.             z-index: 3;
  667.     }
  668.     #preview .left-pane .video-preview::before {
  669.         content: '';
  670.         position: absolute;
  671.         width: 102%;
  672.         height: 100%;
  673.         left: -1%;
  674.         -webkit-mask: linear-gradient(to right, #000 70%, #0000 96%);
  675.         transition: .3s opacity;
  676.         background: #0c0623;
  677.         z-index: 3;
  678.     }
  679.     .video-preview__video {
  680.         width: 102%;
  681.         object-fit: cover;
  682.         object-position: -0.2em center;
  683.         -webkit-mask: linear-gradient(to right, #000 70%, #0000 96%);
  684.         transition: .3s opacity;
  685.     }
  686.     .state-songselection #preview .left-pane .song-cover--hi-res::before,
  687.     .state-songselection #preview .left-pane:hover .video-preview--visible .video-preview__video,
  688.     .dancerOfWeek-container, .state-songselection #preview  .video-preview--visible::before {
  689.         opacity: 0;
  690.     }
  691.     .song-preview .song__difficulty {
  692.     top: 2.85rem;
  693.         right: -3.5rem;
  694.     border-radius: 0.07em;
  695.     width: 0.4rem;
  696.         padding: 0.001em;
  697.     height: 0.22rem;
  698.     text-align: right;
  699.         background: #0000;
  700.         border: 0.019em solid #3a3259;
  701. }
  702.     .song-preview .song__difficulty .song__difficulty--level {
  703.     height: 75%;
  704.     width: 0.0365rem;
  705.     top: -0.725rem;
  706.     left: -0.26rem;
  707.         filter: saturate(0%) brightness(120%);
  708.         transition: .1s all;
  709. }
  710.     .song-preview .song__difficulty::after {
  711.     content: "Difficulty: " attr(data-text);
  712.     color: #fff;
  713.    text-align: right!important;
  714.         left: -2.1rem;
  715.         width: 2rem;
  716.         height: 1em;
  717.         font-size: 0.12rem;
  718.         
  719. }
  720.     .state-songselection #preview .left-pane:hover .song-cover--hi-res::before {
  721.         opacity: 1;
  722.     }
  723.     .song-cover--hi-res::before {
  724.         width: 3.95rem;
  725.         height: 2.22rem;
  726.         content: '';
  727.         top: 1.2rem;
  728.         left: 0.64rem;
  729.         position: absolute;
  730.         background-size: contain;
  731.         background-position: bottom;
  732.         background-repeat: no-repeat;
  733.         z-index: 999;
  734.         transform: scale3d(1.2, 1.2, 1);
  735.         transform-origin: bottom;
  736.         transition: background .2s;
  737.         -webkit-mask: linear-gradient(180deg, #000 95%, #0000 100%) !important;
  738.     }
  739.     .song-cover--hi-res::after {
  740.         width: 1.91rem;
  741.         height: 1.42rem;
  742.         content: '';
  743.         top: 1.4rem;
  744.         right: 0.2rem;
  745.         position: absolute;
  746.         padding: 0 0.02rem 1.2rem 0;
  747.         padding: 1.2rem 0.02rem 0 0;
  748.         border-radius: .07rem;
  749.         font-size: 0.15em;
  750.         color: #d7d7d796;
  751.         transition: background .2s;
  752.         transition-delay: .1s;
  753.         justify-content: center;
  754.         text-align: right;
  755.         background-size: contain;
  756.         background-repeat: no-repeat;
  757.         background-position: center 0;
  758.     }
  759.     .state-songselection .song-cover--low-res {
  760.         width: 10.32rem;
  761.         height: 5.8rem;
  762.         left: -.65rem;
  763.         top: -.69rem;
  764.         content: '';
  765.         color: #ffffff12;
  766.         -webkit-mask: linear-gradient(transparent 40%, rgba(0, 0, 0, .99));
  767.         position: absolute;
  768.         padding: 0rem .1rem;
  769.         border-radius: .1rem;
  770.         transition: background .2s;
  771.         background: #ffffff0d!important;
  772.     }
  773.     .song-action__button {
  774.         background: #11092066;
  775.         height: 100%;
  776.         width: 100%;
  777.         font-size: .14em;
  778.         text-align: right;
  779.         padding: 0 1em 0.1em 0em;
  780.         border-radius: 0.07rem;
  781.         color: #e8e8e8
  782.     }
  783.     .song-action__button::before {
  784.         height: 100%;
  785.         animation: none;
  786.         top: 0em;
  787.         background: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/images/0iewDeL.png);
  788.         background-size: 90%;
  789.         background-position: center;
  790.         transform: none;
  791.         filter: brightness(9000%) grayscale(100%);
  792.     }
  793.     .song-action {
  794.         height: 0.22rem;
  795.         width: 0.9em;
  796.         top: 0.2em;
  797.         left: 8.53em;
  798.     }
  799.     .song-grid {
  800.         padding-top: 0rem;
  801.         overflow: visible!important;
  802.     }
  803.     .coverflow--container {
  804.         width: 100%;
  805.         top: -5.91rem;
  806.         overflow: visible!important;
  807.     }
  808.     .dancerOfWeek-container {
  809.         color: #212121;
  810.         background: #110920!important;
  811.         border: 0.03rem solid #ffffff38;
  812.         width: 2rem;
  813.         height: 1.2rem;
  814.         border-radius: 14px;
  815.         padding: 0.05rem;
  816.         font-family: "OpenSans Regular";
  817.         position: absolute;
  818.         z-index: 1;
  819.         top: -5em;
  820.         left: 7.45rem;
  821.     }
  822.     .dancerOfWeek--title span {
  823.         background: #fff0;
  824.     }
  825.     .dancerOfWeek--title {
  826.         top: .27em;
  827.         font-size: .7em;
  828.         color: #FAFAFA;
  829.         font-family: Just Dance
  830.     }
  831.     .highscore-display {
  832.         text-shadow: 0.03em 0.03em 0.01em #21212199;
  833.         color: #f0f0f0;
  834.         background-color: #0000!important;
  835.         left: 3.56rem;
  836.         top: .5rem;
  837.         font-size: 0.25em
  838.     }
  839.     .score__stars {
  840.         transform: scale(1.2);
  841.         top: 12%;
  842.         left: 7%;
  843.     }
  844.     .dancerOfWeek--data .owner-name span {
  845.         color: #d5d5d5!important;
  846.         background: #0000;
  847.         font-size: 1.17em;
  848.         text-align: left!important;
  849.     }
  850.     .dancerOfWeek--data .owner-name {
  851.         top: 1.9em;
  852.         width: 123%;
  853.         text-align: left;
  854.     }
  855.     .dancerOfWeek--data .score__stars[data-stars="1"],
  856.     .dancerOfWeek--data .score__stars[data-stars="2"],
  857.     .dancerOfWeek--data .score__stars[data-stars="3"],
  858.     .dancerOfWeek--data .score__stars[data-stars="4"],
  859.     .dancerOfWeek--data .score__stars[data-stars="5"] {
  860.         left: 0.07rem!important;
  861.         top: 1.58em;
  862.     }
  863.     .dancerOfWeek .dancerOfWeek--avatar {
  864.         top: 18%!important;
  865.         left: -.4em;
  866.         position: absolute!important;
  867.     }
  868.     .dancerOfWeek .dancerOfWeek--data {
  869.         left: 2.6em;
  870.     }
  871.     .dancerOfWeek .dancerOfWeek--misc {
  872.         top: 1.6em;
  873.         left: -1.06em;
  874.         position: absolute;
  875.     }
  876.     .dancerOfWeek--data .score__number {
  877.         color: #9b9b9b;
  878.         font-size: 0.12rem;
  879.         text-align: left;
  880.         top: 4.81em;
  881.         left: 3em;
  882.     }
  883.     .state-songselection .pre-beat.odd .song-cover--low-res {
  884.         animation: bright .3s;
  885.     }
  886.     .state-songselection .pre-beat.even .song-cover--hi-res::before {
  887.         animation: PCoach .3s;
  888.     }
  889.     .state-songselection .pre-beat.odd .song-cover--hi-res::before {
  890.         animation: PCoach2 .3s;
  891.     }
  892.     @-webkit-keyframes bright {
  893.         0% {
  894.             filter: brightness(100%);
  895.         }
  896.         20% {
  897.             filter: brightness(105%);
  898.         }
  899.         100% {
  900.             filter: brightness(100%);
  901.         }
  902.     }
  903.     @-webkit-keyframes PCoach {
  904.         0% {
  905.             transform: scale3d(1.2, 1.2, 1)
  906.         }
  907.         20% {
  908.             transform: scale3d(1.17, 1.17, 1.1);
  909.             filter: brightness(120%)
  910.         }
  911.         100% {
  912.             transform: scale3d(1.2, 1.2, 1)
  913.         }
  914.     }
  915.     @-webkit-keyframes PCoach2 {
  916.         0% {
  917.             transform: scale3d(1.2, 1.2, 1)
  918.         }
  919.         20% {
  920.             transform: scale3d(1.19, 1.19, 1.1)
  921.         }
  922.         100% {
  923.             transform: scale3d(1.2, 1.2, 1)
  924.         }
  925.     }
  926.     @-webkit-keyframes PBack {
  927.         0% {
  928.             background-size: 118%;
  929.             filter: hue-rotate(140deg);
  930.         }
  931.         20% {
  932.             background-size: 123%;
  933.             filter: hue-rotate(140deg) brightness(105%);
  934.         }
  935.         100% {
  936.             background-size: 118%;
  937.             filter: hue-rotate(140deg);
  938.         }
  939.     }
  940.     @keyframes gotop {
  941.         0% {
  942.             padding-top: 0.1rem;
  943.         }
  944.         100% {
  945.             padding-top: 0.0rem;
  946.         }
  947.     }
  948.  
  949.     /* TRANSITION */
  950.     .state-tutorial #coverflow,
  951.     .state-tutorial #preview,
  952.     .state-tutorial .coverflow--container,
  953.     .state-tutorial #preview .song-preview,
  954.     .state-dance #coverflow {
  955.         display: block!important;
  956.         opacity: 1!important;
  957.         transition: 1s all;
  958.     }
  959.     .state-tutorial #coverflow,
  960.     .state-dance #coverflow {
  961.         background: none!important;
  962.         position: absolute;
  963.     }
  964.     .state-tutorial #preview {
  965.         top: 60%
  966.     }
  967.     #just-dance-now .tutorial {
  968.         background: none!important
  969.     }
  970.     .state-tutorial .song-cover--hi-res {
  971.         width: 7.52rem;
  972.         height: 3.4rem;
  973.         left: -4.5rem;
  974.         top: 2.5rem;
  975.         background-size: cover;
  976.         background-position: center;
  977.         z-index: -111;
  978.         transition: background .2s;
  979.         transition-delay: .2s;
  980.         background-color: #000;
  981.         transform: scale(0.9);
  982.         transform-origin: bottom;
  983.         animation: FadeIn 0.5s !important;
  984.         -webkit-mask: none;
  985.     }
  986.     .state-tutorial .song-cover--hi-res::before {
  987.         width: 100%;
  988.         height: 100%;
  989.         opacity: 1!important;
  990.         top: 0%;
  991.         left: 0%;
  992.     }
  993.     .state-tutorial .song-cover--hi-res::after,
  994.     .song-cover--low-res {
  995.         display: none
  996.     }
  997.     #dance-transition .dt2,
  998.     #dance-transition .dt3,
  999.     #dance-transition .dt4,
  1000.     #dance-transition .dt5,
  1001.     #dance-transition .dt6,
  1002.     #dance-transition .dt7,
  1003.     #dance-transition .dt8 #dance-transition {
  1004.         z-index: 9999999999999999999;
  1005.         background-image: none !important;
  1006.         background-color: #fff
  1007.     }
  1008.  
  1009.     #dance-transition .dt1 {
  1010.         top: 0!important;
  1011.         background-image: none !important;
  1012.         background-color: #0c0623
  1013.     }
  1014.  
  1015.     #dance-transition .dt,
  1016.     #dance-transition .dt-row,
  1017.     #dance-transition.animate .dt,
  1018.     #dance-transition.animate .dt-row,
  1019.     #dance-transition.animate.out .dt,
  1020.     #dance-transition.animate.out .dt-row {
  1021.         background-position: center!important;
  1022.         margin-top: 0!important;
  1023.         margin-bottom: 0;
  1024.         margin-left: 0;
  1025.         width: 100%;
  1026.         height: 100%;
  1027.         background-size: cover!important;
  1028.         -webkit-transform: none!important;
  1029.         transform: none!important;
  1030.         background-repeat: no-repeat!important;
  1031.         background-image: none !important;
  1032.         background-color: #fff0 !important
  1033.     }
  1034.  
  1035.     #dance-transition.in .dt,
  1036.     #dance-transition.in .dt-row {
  1037.         -webkit-transition-property: opacity!important;
  1038.         transition-property: opacity!important;
  1039.         background-image: none !important;
  1040.         background-color: #0c0623 !important
  1041.     }
  1042.  
  1043.     #dance-transition::before,
  1044.     #just-dance-now .tutorial::before {
  1045.         background-image: linear-gradient(85deg, #4e84ff 20%, #4e2cdb 100%);
  1046.         background-size: 140%!important;
  1047.         top: 45%;
  1048.         left: 37%;
  1049.         width: 25%;
  1050.         height: 10%;
  1051.         z-index: 1;
  1052.         border-radius: 0.1em;
  1053.         background-color: #fff0 !important
  1054.     }
  1055.  
  1056.     #dance-transition.in::before,
  1057.     #just-dance-now .tutorial::before {
  1058.         animation: FadeIn 2s, Mada 2s infinite linear!important;
  1059.         opacity: 1 !important;
  1060.         transition: opacity 0.8s, background 1s;
  1061.     }
  1062.  
  1063.     #dance-transition.out::before {
  1064.         animation: FadeOut 0.8s !important;
  1065.         transition: opacity 0.5s, background 1s;
  1066.     }
  1067.  
  1068.  
  1069.     #dance-transition.animate.out::before,
  1070.     #dance-transition.animate.out .dt-row {
  1071.         transition-timing-function: ease-in;
  1072.     }
  1073.     @keyframes FadeIn {
  1074.         0% {
  1075.             opacity: 0 !important
  1076.         }
  1077.  
  1078.         100% {
  1079.             opacity: 1 !important
  1080.         }
  1081.     }
  1082.     @keyframes Mada {
  1083.         0% {
  1084.             filter: hue-rotate(0deg);
  1085.         }
  1086.  
  1087.         100% {
  1088.             filter: hue-rotate(360deg);
  1089.         }
  1090.     }
  1091.  
  1092.     @keyframes FadeOut {
  1093.         0% {
  1094.             opacity: 1
  1095.         }
  1096.  
  1097.         100% {
  1098.             opacity: 0
  1099.         }
  1100.     }
  1101.     @keyframes animateShowCoach {
  1102.         0% {
  1103.             opacity: 0;
  1104.         }
  1105.         40% {
  1106.             opacity: 1;
  1107.             transform: translateX(0.2em);
  1108.         }
  1109.         70% {
  1110.             opacity: 1;
  1111.             transform: translateX(0.0em);
  1112.         }
  1113.     }
  1114.     @keyframes AnimateCosmos2 {
  1115.         0% {
  1116.             background-size: 90%, 80%;
  1117.             opacity: 0;
  1118.         }
  1119.         10%,
  1120.         90% {
  1121.             opacity: 0.7;
  1122.         }
  1123.         100% {
  1124.             background-size: 120%, 110%;
  1125.             opacity: 0;
  1126.         }
  1127.     }
  1128.  
  1129.  
  1130.  
  1131.     .racetrack-fill-players {
  1132.         border-radius: 0.05rem;
  1133.         width: 25%!important;
  1134.         background-image: linear-gradient(85deg, #4e84ff00 20%, #00000038 100%);
  1135.         transition: .2s ease-in transform !important;
  1136.         background-size: 100%;
  1137.     }
  1138.     .anucore-rcplus .racetrack-fill-players {
  1139.         transform-origin: bottom;
  1140.         transform: scaleY(var(--ReducedPst))!important;
  1141.         border-radius: 0.15rem 0.15rem 0 0;
  1142.     }
  1143.     #racetrack-fill-p2 {
  1144.         left: 25%!important;
  1145.     }
  1146.     #racetrack-fill-p3 {
  1147.         left: 50%!important;
  1148.     }
  1149.     #racetrack-fill-p4 {
  1150.         left: 75%!important;
  1151.     }
  1152.     .progress-background {
  1153.         background: #0000000c;
  1154.         background-size: 0% 320%!important;
  1155.         background-position: center;
  1156.         -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, .48) 57%, #f000 85%) !important;
  1157.     }
  1158.  
  1159.     
  1160.     #goldmove .layer.layer-1 {
  1161.         background-image: url(https://imgur.com/hZvwBAd.png);
  1162.     }
  1163.  
  1164.     #goldmove .layer.layer-2 {
  1165.         background-image: url(https://imgur.com/KEttRaP.png);
  1166.     }
  1167.  
  1168.     #goldmove .layer.layer-3 {
  1169.         background-image: url(https://imgur.com/m1EzLkZ.png), url(https://imgur.com/m1EzLkZ.png);
  1170.     }
  1171.     #goldmove {
  1172.         z-index: -1;
  1173.     }
  1174.     #lyrics {
  1175.         font-size: 0.169rem;
  1176.         left: 4.7%;
  1177.         font-family: "Just Dance";
  1178.         font-weight: 100!important;
  1179.     }
  1180.     #lyrics:before {
  1181.         content: "";
  1182.         position: absolute;
  1183.         width: 3.2rem;
  1184.         height: 0.9rem;
  1185.         bottom: -0.67rem!important;
  1186.         left: -12%;
  1187.         background: #00000059;
  1188.         filter: blur(0.28rem);
  1189.         border-radius: 0em;
  1190.     }
  1191.     #lyrics .fragment {
  1192.         font-weight: 100!important;
  1193.         -webkit-text-stroke: 0.035em #111;
  1194.         text-shadow: 0px 0px 0px #0000!important;
  1195.         
  1196.     }
  1197.     #lyrics .fragment .fill {
  1198.         -webkit-text-stroke: 0.025em #111;
  1199.         transition-timing-function: linear!important
  1200.     }
  1201.     #lyrics .line.current .fill {
  1202.         animation: gotop ease-out .2s .01s!important;
  1203.     }
  1204.     #lyrics .line.current,
  1205.     #lyrics .line.previous {
  1206.         color: #d9d9d9;
  1207.         margin-top: -0.0% !important;
  1208.         opacity: 1;
  1209.     }
  1210.     #lyrics .line {
  1211.         color: #d9d9d9;
  1212.         margin-top: 0.9% !important;
  1213.         opacity: 0.87;
  1214.         -webkit-animation: nextLineInf 0.16s linear;
  1215.         animation: nextLineInf 0.165s ease-out!important;
  1216.     }
  1217.     #lyrics .line.current {
  1218.         transform: translatey(-5%);
  1219.         transition: .162s all ease-out, .1s color !important;
  1220.         opacity: 1;
  1221.     }
  1222.  
  1223.  
  1224.     #lyrics .line.previous {
  1225.         transform: translatey(-5%) !important;
  1226.         transition: .05s opacity !important;
  1227.         transition-delay: .05s!important;
  1228.         opacity: .0;
  1229.     }
  1230.     @-webkit-keyframes nextLineInf {
  1231.         0%,
  1232.         20% {
  1233.             opacity: 0;
  1234.             -webkit-transform: perspective(0px) translateY(2.05em) rotateX(0deg);
  1235.             transform: perspective(0px) translateY(2.05em) rotateX(0deg);
  1236.         }
  1237.         100% {
  1238.             opacity: 1;
  1239.             -webkit-transform: translateY(1em) perspective(0px) rotateX(0deg);
  1240.             transform: translateY(1em) perspective(0px) rotateX(0deg);
  1241.         }
  1242.     }
  1243.     @keyframes nextLineInf {
  1244.         0%,
  1245.         20%{
  1246.             -webkit-transform: perspective(0px) translateY(2.15em) rotateX(0deg);
  1247.             transform: perspective(0px) translateY(2.15em) rotateX(0deg);
  1248.         }
  1249.         100% {
  1250.             opacity: 1;
  1251.             -webkit-transform: translateY(1em) perspective(0px) rotateX(0deg);
  1252.             transform: translateY(1em) perspective(0px) rotateX(0deg);
  1253.         }
  1254.     }
  1255.     @keyframes bounceP {
  1256.         0% {
  1257.             opacity: 0;
  1258.             -webkit-transform: scale3d(1, 1, 1);
  1259.             transform: scale3d(1, 1, 1)
  1260.         }
  1261.         15% {
  1262.             opacity: 1;
  1263.             -webkit-transform: scale3d(0.8, 0.8, 1);
  1264.             transform: scale3d(0.9, 0.9, 0.9)
  1265.         }
  1266.         24% {
  1267.             -webkit-transform: scale3d(1, 1, 1);
  1268.             transform: scale3d(1, 1, 1)
  1269.         }
  1270.  
  1271.         30% {
  1272.             opacity: 1;
  1273.             -webkit-transform: scale3d(0.8, 0.8, 1);
  1274.             transform: scale3d(0.8, 0.8, 0.8)
  1275.         }
  1276.  
  1277.         43% {
  1278.             opacity: 1;
  1279.             -webkit-transform: scale3d(0.95, 0.95, 1);
  1280.             transform: scale3d(0.95, 0.95, 1)
  1281.         }
  1282.         100% {
  1283.             opacity: 1;
  1284.             -webkit-transform: scale3d(1, 1, 1);
  1285.             transform: scale3d(1, 1, 1)
  1286.         }
  1287.     }
  1288.     #racetrack .star3,
  1289.     #racetrack .star2,
  1290.     #racetrack .star1 {
  1291.         margin-bottom: -2%;
  1292.     }
  1293.  
  1294.     #racetrack .star3 {
  1295.         bottom: 40%;
  1296.     }
  1297.  
  1298.     #racetrack .star2 {
  1299.         bottom: 24%;
  1300.     }
  1301.  
  1302.     #racetrack .star1 {
  1303.         bottom: 8%;
  1304.     }
  1305.  
  1306.     #beat .particle-system {
  1307.         display: none;
  1308.     }
  1309.     #beat {
  1310.         width: 0.86rem!important;
  1311.         height: 5% !important;
  1312.         bottom: -2.7% !important;
  1313.         left: -.86rem;
  1314.         background-color: #fff;
  1315.         /* background: linear-gradient(90deg,#000 50%, #fff, #000 51%); */
  1316.         border-radius: 20rem;
  1317.         -webkit-mask-position: center !important;
  1318.         border-bottom: none;
  1319.         opacity: 1!important;
  1320.         visibility: visible!important;
  1321.         display: block!important;
  1322.     }
  1323.         #pictos::after {
  1324.             content: '';
  1325.         width: 0.86rem!important;
  1326.         height: 1.1em !important;
  1327.         bottom: -2.7% !important;
  1328.         left: -.86rem;
  1329.         background-image: linear-gradient(to bottom, #0000, #fff6, #fff);
  1330.         /* background: linear-gradient(90deg,#000 50%, #fff, #000 51%); */
  1331.         -webkit-mask-position: center !important;
  1332.         border-bottom: none;
  1333.         opacity: 0.2;
  1334.         transform: scale(0.95);
  1335.         visibility: visible!important;
  1336.         display: block!important;
  1337.             position: absolute;
  1338.     }
  1339.     
  1340.     .hud.even #pictos:after {
  1341.         animation: lie 0.25s;
  1342.     }
  1343.  
  1344.     html:not(.ipad) .hud.beat > #pictos > #beat {
  1345.         -webkit-animation-name: BeatCoach !important;
  1346.         animation-name: BeatCoach !important;
  1347.     }
  1348.     #pictos {
  1349.         border-bottom: solid 0.019rem rgba(255, 255, 255, .55);
  1350.         box-shadow: 2px 4px 2px 0px rgba(0, 0, 0, 0);
  1351.         font-size: 1.13rem; /*fix pictosbar broken on 1080p device*/
  1352.     }
  1353.  
  1354.     .hud.odd .player:nth-child(1) .dancercard .avatar,
  1355.     .hud.odd .player:nth-child(3) .dancercard .avatar,
  1356.     .hud.even .player:nth-child(2) .dancercard .avatar,
  1357.     .hud.even .player:nth-child(4) .dancercard .avatar {
  1358.         animation: pictosa .3s !important;
  1359.     }
  1360.     .hud .dancercard .player-color{
  1361.         animation: none!important;
  1362.     }
  1363.         .hud.even .player:nth-child(1) .dancercard .player-color,
  1364.     .hud.even .player:nth-child(3) .dancercard  .player-color,
  1365.     .hud.odd .player:nth-child(2) .dancercard  .player-color,
  1366.     .hud.odd .player:nth-child(4) .dancercard  .player-color {
  1367.         animation: pictosabkg .3s !important;
  1368.     }
  1369.     .hud.beat #pictos {
  1370.         transition: .2s all !important;
  1371.     }
  1372.     html.androidApp #beat {
  1373.         display: none!important;
  1374.     }
  1375.     .hud.beat #pictos {
  1376.         border-bottom: solid 0.019rem rgba(255, 255, 255, .55)!important;
  1377.         box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .09)!important;
  1378.     }
  1379.     .hud #beat {
  1380.         opacity: 0;
  1381.     }
  1382.     .hud.beat #beat {
  1383.         opacity: 0;
  1384.     }
  1385.     .picto {
  1386.         background: linear-gradient(90deg, #323234 49%, #ffffff 50%, #323234 51%);
  1387.     }
  1388.     #pictos {
  1389.         width: 31% !important;
  1390.         top: 70.8% !important;
  1391.         transform-origin: bottom!important;
  1392.         transform: scaleY(1.01);
  1393.         font-size: 1.1rem;
  1394.     }
  1395.     @keyframes testa {
  1396.         0% {
  1397.             transform: scaleY(1);
  1398.         }
  1399.         3% {
  1400.             transform: scaleY(0.98);
  1401.         }
  1402.  
  1403.         19% {
  1404.             transform: scaleY(1.01);
  1405.         }
  1406.         100% {
  1407.             transform: scaleY(1);
  1408.         }
  1409.     }
  1410.  
  1411.     .hud.even #pictos {
  1412.         transform: scaleY(1.01);
  1413.     }
  1414.     #pictos {
  1415.         right: -0.5rem;
  1416.     }
  1417.     #pictos.multi-coach {
  1418.         right: 0.03rem;
  1419.     }
  1420.  
  1421.     .picto {
  1422.         left: -1.11rem !important;
  1423.         margin-bottom: 0.02em !important;
  1424.     }
  1425.     .picto.hiding {
  1426.            transition: .4s linear all,.35s ease-out opacity, .76s ease-out transform!important;}
  1427.  
  1428.     .multi-coach .picto {
  1429.         left: -1.392rem !important;
  1430.     }
  1431.  
  1432.     @keyframes BeatCoach {
  1433.         100% {
  1434.             opacity: 1!important;
  1435.             transform: scale3d(1., 1, 1);
  1436.         }
  1437.         10% {
  1438.             opacity: 1!important;
  1439.             transform: scale3d(1.12, 1, 1);
  1440.         }
  1441.         0% {
  1442.             opacity: 1!important;
  1443.             transform: scale3d(1., 1, 1);
  1444.         }
  1445.     }
  1446.     @keyframes BeatCoach2 {
  1447.         100% {
  1448.             opacity: 1!important;
  1449.             transform: scale3d(1., 1, 1);
  1450.         }
  1451.         10% {
  1452.             opacity: 1!important;
  1453.             transform: scale3d(1.12, 1, 1);
  1454.         }
  1455.         0% {
  1456.             opacity: 1!important;
  1457.             transform: scale3d(1., 1, 1);
  1458.         }
  1459.     }
  1460.     @keyframes lie {
  1461.         100% {
  1462.             opacity: 0.2;
  1463.         }
  1464.         10% {
  1465.             opacity: 1;
  1466.         }
  1467.         0% {
  1468.             opacity: 0.2
  1469.         }
  1470.     }
  1471.     @keyframes pictosa {
  1472.         0%,
  1473.         0% {
  1474.             transform: scale3d(1, 1, 1);
  1475.         }
  1476.         12% {
  1477.             transform: scale3d(.90, .90, 1) rotate(3deg);
  1478.         }
  1479.         100% {
  1480.             transform: scale3d(1, 1, 1);
  1481.         }
  1482.     }
  1483.         @keyframes pictosabkg {
  1484.         0%,
  1485.         0% {
  1486.             filter: brightness(100%);
  1487.  
  1488.         }
  1489.         12% {
  1490.             filter: brightness(130%)
  1491.         }
  1492.         100% {
  1493.             filter: brightness(100%)
  1494.         }
  1495.     }
  1496.     #racetrack {
  1497.         top: 20% !important;
  1498.         transform-origin: bottom;
  1499.     }
  1500.     #racetrack.superstar,
  1501.     #racetrack.megastar {
  1502.         animation: bounceP .7s!important;
  1503.     }
  1504.     #racetrack .progress-bar {
  1505.         right: -28%;
  1506.         width: 48%;
  1507.     }
  1508.  
  1509.     #racetrack.animate .platform {
  1510.         display: none;
  1511.     }
  1512.     #racetrack .star {
  1513.         left: 0.14rem;
  1514.         width: 0.55rem;
  1515.         height: 0.55rem;
  1516.         transform: none;
  1517.     }
  1518.     @keyframes racetrack-star-beat1 {
  1519.         20% {
  1520.             transform: scale(1.2)
  1521.         }
  1522.         0%,
  1523.         100% {
  1524.             transform: scale(1)
  1525.         }
  1526.     }
  1527.     .hud.beat > #racetrack.animate .star:not(.no-beat) {
  1528.         animation: racetrack-star-beat1 0.3s
  1529.     }
  1530.     .hud.beat.odd > #racetrack.animate .star1:not(.no-beat),
  1531.     .hud.beat.odd > #racetrack.animate .star3:not(.no-beat),
  1532.     .hud.beat.odd > #racetrack.animate .star5:not(.no-beat),
  1533.     .hud.beat.even > #racetrack.animate .star2:not(.no-beat),
  1534.     .hud.beat.even > #racetrack.animate .star4:not(.no-beat) {
  1535.         -webkit-animation: none;
  1536.         animation: none;
  1537.     }
  1538.     #racetrack {
  1539.         top: 18.3%;
  1540.         left: 0%;
  1541.         width: 7.0%;
  1542.         height: 58.2%;
  1543.     }
  1544.  
  1545.  
  1546.     @keyframes racetrack-star-beat {
  1547.         0% {
  1548.             transform: scale(0.8) rotate(11deg)!important
  1549.         }
  1550.         25% {
  1551.             transform: scale(0.9) rotate(11deg)!important
  1552.         }
  1553.         100% {
  1554.             transform: scale(0.8) rotate(11deg)!important
  1555.         }
  1556.     }
  1557.  
  1558.     @keyframes newStar {
  1559.         0% { opacity: 0; transform: scale(0.8) rotate(15deg);
  1560.         }
  1561.         32% { opacity: 1; transform: scale(1.25) rotate(15deg);
  1562.         }
  1563.         79% { opacity: 1; transform: scale(1.25) rotate(375deg);
  1564.         }
  1565.         100% { opacity: 1; transform: scale(0.8) rotate(375deg);
  1566.         }
  1567.     }
  1568.     .racetrack-empty {
  1569.         transition: none!important;
  1570.     }
  1571.  
  1572.     /*COACH SELECTION*/
  1573.     .coach-selection__bgImg {
  1574.         background: #212121;
  1575.         width: 102.3%;
  1576.         height: 126.8%;
  1577.         top: -24.4%;
  1578.         right: -1.1%;
  1579.         border-radius: .0rem;
  1580.         z-index: -2
  1581.     }
  1582.     .coach-selection__list::before,
  1583.     .coach-selection__list::after {
  1584.         content: '';
  1585.         width: 103%;
  1586.         height: 192%;
  1587.         position: absolute;
  1588.         left: -0.12rem;
  1589.         top: -2.1rem;
  1590.     }
  1591.     .coach-selection__list {
  1592.         z-index: -1;
  1593.         transform-style: preserve-3d;
  1594.         perspective: 800em;
  1595.         perspective-origin: left;
  1596.     }
  1597.     .coach::before {
  1598.         width: 84%;
  1599.         height: 91%;
  1600.         right: 0.08rem;
  1601.         top: -0.23rem;
  1602.         background: none;
  1603.         border-radius: 0.2em;
  1604.         box-shadow: 0px -2.8em 0.5em #006aff42, 0px 2.8em 0.5em #006aff42;
  1605.         border: solid 0.05em #fff;
  1606.         outline: 0.07em solid #006aff;
  1607.         transition: .3s all;
  1608.     }
  1609.     .coach:has(.coach__histogram .coach__player-list)::before {
  1610.         box-shadow: 0px -2.8em 0.5em #8b00ff42, 0px 2.8em 0.5em #8b00ff42;
  1611.         border: solid 0.05em #fff;
  1612.         outline: solid 0.1em #8b00ff;
  1613.     }
  1614.  
  1615.     .coach-selection__list--1::before,
  1616.     .coach-selection__list--1::after {
  1617.         -webkit-mask-image: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/coach1.png)!important;
  1618.         -webkit-mask-size: 100% 100%;
  1619.     }
  1620.     .coach-selection__list--2::before,
  1621.     .coach-selection__list--2::after {
  1622.         -webkit-mask-image: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/coach2.png)!important;
  1623.         -webkit-mask-size: 100% 100%;
  1624.     }
  1625.     .coach-selection__list--3::before,
  1626.     .coach-selection__list--3::after {
  1627.         -webkit-mask-image: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/coach3.png)!important;
  1628.         -webkit-mask-size: 100% 100%;
  1629.     }
  1630.     .coach-selection__list--4::before,
  1631.     .coach-selection__list--4::after {
  1632.         -webkit-mask-image: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/coach4.png)!important;
  1633.         -webkit-mask-size: 100% 100%;
  1634.     }
  1635.     .coach-selection__list--3 .coach[data-id="1"]::before,
  1636.     .coach-selection__list--4 .coach[data-id="1"]::before {
  1637.         transform: perspective(29em) rotateY(45deg) scale3d(1.46, 1.06, 2);
  1638.     }
  1639.     .coach-selection__list--3 .coach[data-id="3"]::before,
  1640.     .coach-selection__list--4 .coach[data-id="4"]::before {
  1641.         transform: perspective(29em) rotateY(-45deg) scale3d(1.46, 1.06, 2);
  1642.     }
  1643.  
  1644.     .coach-selection__bgImg img {
  1645.         height: 100%;
  1646.         width: 100%;
  1647.         object-fit: cover;
  1648.     }
  1649.  
  1650.     .coach-selection__back {
  1651.         background-color: #110920;
  1652.         top: 90.5%;
  1653.         right: 18%;
  1654.     }
  1655.  
  1656.     .coach__names-list {
  1657.         z-index: 2!important;
  1658.         right: 0.36rem;
  1659.     }
  1660.  
  1661.     .state-coachselection [data-id="2"] {
  1662.         z-index: 3!important;
  1663.     }
  1664.     .state-coachselection [data-id="3"] {
  1665.         z-index: 2!important;
  1666.     }
  1667.     .state-coachselection [data-id="4"] {
  1668.         z-index: 1!important;
  1669.     }
  1670.     .state-coachselection [data-id="1"] {
  1671.         z-index: 4!important;
  1672.     }
  1673.  
  1674.     .coach-selection__button {
  1675.         background: linear-gradient(to top, #91001e, #ff0064);
  1676.         border: 0.2em solid #fff;
  1677.         border-radius: 0.4em;
  1678.     }
  1679.     .coach-selection__button::after,
  1680.     .coach-selection__button::before {
  1681.         display: none
  1682.     }
  1683.  
  1684.  
  1685.     #coverflow,
  1686.     #players::before {
  1687.         background: transparent/*#9000FF*/
  1688.         !important;
  1689.     }
  1690.  
  1691.     .state-coachselection #players {
  1692.         display: none;
  1693.     }
  1694.  
  1695.     .state-coachselection .song-cover {
  1696.         display: initial;
  1697.         visibility: visible;
  1698.         z-index: 9999!important;
  1699.         right: 6.65rem;
  1700.         top: -0.7rem;
  1701.         height: 34%;
  1702.         width: 34%
  1703.     }
  1704.     .state-coachselection #coverflow {
  1705.         padding-top: 1.1rem!important
  1706.     }
  1707.     .state-coachselection #coverflow .coverflow--container {
  1708.         height: 80rem!important;
  1709.         top: -1.07rem;
  1710.         visibility: visible !important;
  1711.         display: block !important;
  1712.         opacity: 1 !important;
  1713.         z-index: 99999999999 !important;
  1714.         background: none !important;
  1715.         pointer-events: none !important;
  1716.     }
  1717.  
  1718.     .state-coachselection #preview .song-details,
  1719.     .state-coachselection #section-songlist,
  1720.     .state-coachselection .grid-container,
  1721.     .state-coachselection .video-preview--visible,
  1722.     .state-coachselection #preview .right-pane,
  1723.     .state-coachselection .song-cover--hi-res,
  1724.     .state-coachselection .highscore-display {
  1725.         display: none!important;
  1726.         visibility: hidden !important;
  1727.         opacity: 0 !important;
  1728.         z-index: -99999999999 !important;
  1729.     }
  1730.  
  1731.  
  1732.     .coach__player-list::before {
  1733.         transform: rotate(0deg);
  1734.         border-radius: 6%;
  1735.     }
  1736.  
  1737.     .state-coachselection [data-id="1"] .coach__img,
  1738.     .state-coachselection [data-id="3"] .coach__img {
  1739.         animation: CoachBeat3 var(--preview-duration) infinite alternate-reverse!important;
  1740.         transform-origin: bottom;
  1741.         top: -.2rem;
  1742.     }
  1743.  
  1744.     .state-coachselection [data-id="2"] .coach__img,
  1745.     .state-coachselection [data-id="4"] .coach__img {
  1746.         animation: CoachBeat3 var(--preview-duration) infinite alternate;
  1747.         transform-origin: bottom;
  1748.         top: -.2rem;
  1749.     }
  1750.  
  1751.     .coach-selection {
  1752.         -webkit-animation: fadeopda 0.9s;
  1753.         animation: fadeopda 0.9s;
  1754.     }
  1755.  
  1756.     @keyframes fadeopda {
  1757.         0% {
  1758.             transform: scale(1.05);
  1759.             opacity: 0;
  1760.         }
  1761.         55% {
  1762.             opacity: 1;
  1763.         }
  1764.         100% {
  1765.             filter: brightness(100%);
  1766.         }
  1767.     }
  1768.  
  1769.     .coach__names-list {
  1770.         top: -6%;
  1771.         left: 0.5%;
  1772.         transform: scale(0.85);
  1773.         width: 130%;
  1774.         height: 130%;
  1775.     }
  1776.  
  1777.     .coach__player-list {
  1778.         padding: 0.06rem 0.0rem 0.0rem 0.08rem;
  1779.         width: 1.5rem;
  1780.         height: 0.43rem;
  1781.         opacity: 1;
  1782.         color: #fff;
  1783.         background: #110920;
  1784.         font-weight: bolder;
  1785.         font-size: 0.96em;
  1786.         transition: all .3s
  1787.     }
  1788.     .coach__player-list::after {
  1789.         content: 'Just Dancer';
  1790.         color: #ffffff73;
  1791.         top: 1.8em;
  1792.         position: absolute;
  1793.         left: 0.4em;
  1794.         font-weight: normal;
  1795.         font-size: 0.91em;
  1796.     }
  1797.     .coach__img {
  1798.         width: auto;
  1799.         height: 90%;
  1800.         top: 0rem;
  1801.         left: -0.37rem;
  1802.     }
  1803.     .state-coachselection [data-id="1"],
  1804.     .state-coachselection [data-id="2"],
  1805.     .state-coachselection [data-id="3"],
  1806.     .state-coachselection [data-id="4"] {
  1807.         margin-left: 4%;
  1808.         margin-right: 4%;
  1809.         left: -0%;
  1810.         top: -10%;
  1811.         transform: scale(1.15);
  1812.     }
  1813.  
  1814.  
  1815.  
  1816.     .state-coachselection__list {
  1817.         animation: none !important;
  1818.     }
  1819.  
  1820.     .coach-selection__title {
  1821.         text-shadow: 1px 1px #000000c4;
  1822.     }
  1823.     .coach-selection__details .coach-selection__details-song {
  1824.         font-weight: bold;
  1825.         font-size: 0.185rem;
  1826.         padding: 0.3em 0 0.03rem 0.025rem;
  1827.     }
  1828.  
  1829.     .state-coachselection .song-cover--low-res {
  1830.         visibility: visible;
  1831.         display: inline;
  1832.         position: absolute;
  1833.         opacity: 1 !important;
  1834.         z-index: 99999999999999999999 !important;
  1835.         top: 4rem;
  1836.         left: -5.61rem;
  1837.         transform: scale(1.05);
  1838.         border-radius: .07em;
  1839.     }
  1840.     .coach-selection__details {
  1841.         width: 3.62em!important;
  1842.         top: 3.7rem;
  1843.         text-align: left;
  1844.         color: #fff;
  1845.         background: #11092000;
  1846.         border: 0.02rem solid #8c8c8c00;
  1847.         padding-left: 8%;
  1848.         height: 18%;
  1849.         left: 0.1em;
  1850.         transform: scale(1.05);
  1851.         border-radius: .12em;
  1852.     }
  1853.  
  1854.     .coach-selection__title {
  1855.         color: #ffffff;
  1856.         top: -3%;
  1857.     }
  1858.  
  1859.     @keyframes CoachBeat3 {
  1860.         0% {
  1861.             filter: brightness(120%);
  1862.             transform: scale3d(0.98, 0.98, 1.0)
  1863.         }
  1864.  
  1865.         14% {
  1866.             filter: brightness(100%);
  1867.             transform: scale3d(1.0, 1.0, 1.0)
  1868.         }
  1869.     }
  1870.     #players .star.star-1,
  1871.     #players .star.star-2,
  1872.     #players .star.star-3,
  1873.     #players .star.star-4,
  1874.     #players .star.star-5 {
  1875.         width: 0.4rem;
  1876.         height: 0.4rem;
  1877.         margin: 0 -0.10rem;
  1878.     }
  1879.     .player-master .player-master--icon {
  1880.         display: none;
  1881.     }
  1882.     .state-dance .dancercard .player-flag,
  1883.     .state-dance .dancercard .player-exp.player-exp-normal,
  1884.     .state-dance .connect-phone-info--visible {
  1885.         display: none;
  1886.     }
  1887.     .avatar-wrapper .avatar {
  1888.         right: 30%;
  1889.     }
  1890.  
  1891.     .dancercard .player-name {
  1892.         top: -3.5%;
  1893.         left: 0% !important;
  1894.         width: 95.5% !important;
  1895.         text-align: center !important;
  1896.         text-shadow: none !important;
  1897.         font-family: Just Dance;
  1898.         transform: scale(1.6) !important
  1899.     }
  1900.     .state-dance .controller .dancercard .player-name em {
  1901.         max-width: 2.1rem;
  1902.     }
  1903.     .state-dance .dancercard .player-name {
  1904.         background: rgba(255, 255, 255, 0);
  1905.         -webkit-mask: linear-gradient(90deg, rgba(255, 255, 255, 0) 22%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 1) 75%, rgba(255, 255, 255, 0) 84%)!important;
  1906.         left: -1%!important;
  1907.         bottom: 29%!important;
  1908.     }
  1909.     .dancercard .player-name em {
  1910.         text-shadow: 0px 0px 1px #000000 !important;
  1911.         font-family: "Just Dance"!important;
  1912.         overflow: visible!important;
  1913.         text-align: center !important;
  1914.     }
  1915.     .dancercard {
  1916.         margin-right: 110% !important;
  1917.     }
  1918.     .dancercard .player-color {
  1919.         border-radius: 8px 8px 8px 8px;
  1920.         width: 82%!important;
  1921.         height: 24%;
  1922.         top: 40%;
  1923.         margin-left: 9.6%;
  1924.         left: -1.5%;
  1925.     }
  1926.     .state-dance .dancercard .player-color {
  1927.         -webkit-mask-image: linear-gradient(to bottom, #000000c4, #00000017 80%, #0000)!important;
  1928.         transform: skew(8deg);
  1929.         border-radius: 8px 8px 8px 8px;
  1930.         width: 60%!important;
  1931.         height: 0.91rem;
  1932.         top: -0.45rem;
  1933.         margin-left: 9.6%;
  1934.         left: 8%;
  1935.         z-index: -88;
  1936.     }
  1937.     .state-dance #players {
  1938.         width: 120% !important;
  1939.         left: -2% !important;
  1940.         top: -2.0%;
  1941.     }
  1942.     .crown {
  1943.         top: 17% !important;
  1944.         left: -0% !important;
  1945.         transform: scale(1.5) rotate(-10deg) !important
  1946.     }
  1947.     .crown::before {
  1948.         background-image: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/images/pH3xc9A.png)!important;
  1949.     }
  1950.     .crown {
  1951.         background-image: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/images/pH3xc9A.png)!important;
  1952.     }
  1953.     #players .crown::before {
  1954.         -webkit-animation: CrownZoom 5s infinite !important;
  1955.         animation: Corona 5s infinite alternate;
  1956.         background-image: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/images/pH3xc9A.png)!important;
  1957.         background-color: transparent!important;
  1958.         border: none;
  1959.     }
  1960.     .blue .player-color,
  1961.     .racetrack-fill-players.blue,
  1962.     #afterdance .blue .color {
  1963.         background-color: #4e2cdb!important;
  1964.         background-image: linear-gradient(#1c8ae9, #192895);
  1965.     }
  1966.  
  1967.  
  1968.     .red .player-color,
  1969.     .racetrack-fill-players.red,
  1970.     #afterdance .red .color {
  1971.         background-color: #ff7824!important;
  1972.         background-image: linear-gradient(#ebb21b, #e34900);
  1973.     }
  1974.  
  1975.  
  1976.     .green .player-color,
  1977.     .racetrack-fill-players.green,
  1978.     #afterdance .green .color {
  1979.         background-color: #65d81a!important;
  1980.         background-image: linear-gradient(#77ec00, #008422);
  1981.     }
  1982.  
  1983.  
  1984.     .purple .player-color,
  1985.     .racetrack-fill-players.purple,
  1986.     #afterdance .purple .color {
  1987.         background-color: #83099a!important;
  1988.         background-image: linear-gradient(#ba01fd, #800077);
  1989.     }
  1990.  
  1991.  
  1992.     .pink .player-color,
  1993.     .racetrack-fill-players.pink,
  1994.     #afterdance .pink .color {
  1995.         background-color: #ff01a5!important;
  1996.         background-image: linear-gradient(#e410a7, #ca006e);
  1997.     }
  1998.  
  1999.  
  2000.     .aqua .player-color,
  2001.     .racetrack-fill-players.aqua,
  2002.     #afterdance .aqua .color {
  2003.         background-color: #4adea8!important;
  2004.         background-image: linear-gradient(#1fe7e9, #22b4f4);
  2005.     }
  2006.     /*----------HUD----------*/
  2007.     #players .feedback-badgold {
  2008.         animation: ParticlePerfect 0.5s ease-out !important;
  2009.         width: 60%;
  2010.         height: 60%;
  2011.         left: 16%;
  2012.         top: 49%;
  2013.     }
  2014.  
  2015.     #players .feedback-bad {
  2016.         animation: ParticlePerfect 0.5s ease-out !important;
  2017.         width: 70%;
  2018.         height: 70%;
  2019.         left: 16%;
  2020.         top: 49%;
  2021.     }
  2022.     #players .feedback {
  2023.         height: 100%;
  2024.         top: 0.9em;
  2025.         background-position: center;
  2026.         transition: .2s background !important;
  2027.     }
  2028.     #players .feedback-none {
  2029.         background-position: center;
  2030.         background-image: radial-gradient(at top, #f000 0%, #0000 76%);
  2031.         transition: .2s background !important;
  2032.     }
  2033.     .feedback-perfect:after {
  2034.         content: "";
  2035.         position: absolute;
  2036.         width: 300%;
  2037.         height: 130%;
  2038.         top: -10%;
  2039.         left: -99%;
  2040.         background-image: url(https://imgur.com/VyCwYpU.png);
  2041.         background-size: contain;
  2042.         background-position: center;
  2043.         background-repeat: no-repeat;
  2044.         opacity: 1;
  2045.         animation: feedlabel .7s!important
  2046.     }
  2047.     .feedback-good:after {
  2048.         content: "";
  2049.         position: absolute;
  2050.         width: 300%;
  2051.         height: 130%;
  2052.         top: -10%;
  2053.         left: -99%;
  2054.         background-image: url(https://imgur.com/pQaUCXJ.png);
  2055.         background-size: contain;
  2056.         background-position: center;
  2057.         background-repeat: no-repeat;
  2058.         opacity: 1;
  2059.         animation: feedlabel .7s!important
  2060.     }
  2061. .hud.odd #players.animate .player:nth-child(1) .feedback,
  2062.     .hud.odd #players.animate .player:nth-child(3) .feedback,
  2063.     .hud.even #players.animate .player:nth-child(2) .feedback
  2064.     .hud.even #players.animate .player:nth-child(4) .feedback{
  2065.     -webkit-animation: feedlabel2 1s;
  2066.     animation: feedlabel2 1s;
  2067. }
  2068.     .feedback-ok:after {
  2069.         content: "";
  2070.         position: absolute;
  2071.         width: 200%;
  2072.         height: 130%;
  2073.         top: -10%;
  2074.         left: -49%;
  2075.         background-image: radial-gradient(#6e21d7d6 10%, #0000 20%);
  2076.         background-size: contain;
  2077.         background-position: center;
  2078.         background-repeat: no-repeat;
  2079.         opacity: 1;
  2080.         animation: feedlabel .7s!important
  2081.     }
  2082.     .feedback-yeah:after {
  2083.         content: "";
  2084.         position: absolute;
  2085.         width: 300%;
  2086.         height: 130%;
  2087.         top: -10%;
  2088.         left: -99%;
  2089.         background-image: url(https://imgur.com/VyCwYpU.png), radial-gradient(#37ca1b69 0%, #0000 50%);
  2090.         background-size: 60%, contain;
  2091.         background-position: center;
  2092.         background-repeat: no-repeat;
  2093.         filter: brightness(180%) hue-rotate(330deg);
  2094.         opacity: 1;
  2095.         animation: feedlabel .7s!important
  2096.     }
  2097.     #players .feedback {
  2098.         background-image: none!important;
  2099.         overflow: visible!important;
  2100.     }
  2101.  
  2102.     #players .feedback-yeah {
  2103.         overflow: visible !important;
  2104.     }
  2105.     #players .stars {
  2106.         top: 62% !important;
  2107.         transform: scale(0.75);
  2108.         left: -26%;
  2109.     }
  2110.     /*----------HUD----------*/
  2111.     #players .player .controller-coins {
  2112.         bottom: 20%;
  2113.     }
  2114.     .hud.beat #players .feedback-label {
  2115.         background-repeat: no-repeat;
  2116.         background-image: url(https://raw.githubusercontent.com/ibratabian17/JDNAssets/JDNModern/images/QyGm2AS.png);
  2117.         animation: feedlabel .7s!important
  2118.     }
  2119.     .hud.beat #players .feedlabel-perfect,
  2120.     .hud.beat #players .feedlabel::after {
  2121.         animation: feedlabelP .7s!important
  2122.     }
  2123.  
  2124.     #players .feedback-badgold {
  2125.         width: 60%;
  2126.         height: 60%;
  2127.         left: 16%;
  2128.         top: 49%;
  2129.     }
  2130.  
  2131.     #players .feedlabel-bad {
  2132.         width: 70%;
  2133.         height: 70%;
  2134.         left: 16%;
  2135.         top: 49%;
  2136.     }
  2137.  
  2138.     #players .feedlabel-ok {
  2139.         width: 55%;
  2140.         height: 55%;
  2141.         left: 23.6%;
  2142.         top: 52%;
  2143.     }
  2144.  
  2145.     #players .feedlabel-good {
  2146.         width: 55%;
  2147.         height: 55%;
  2148.         left: 23.1%;
  2149.         top: 52%;
  2150.     }
  2151.  
  2152.     #players .feedlabel-perfect {
  2153.         width: 100%;
  2154.         height: 100%;
  2155.         top: 42%;
  2156.     }
  2157.  
  2158.     #players .feedlabel-yeah {
  2159.         width: 100%;
  2160.         height: 100%;
  2161.         left: -3%;
  2162.         top: 18%;
  2163.     }
  2164.     @keyframes NewFeedback2 {
  2165.         0% {
  2166.             opacity: 1;
  2167.             -webkit-filter: brightness(350%);
  2168.             filter: brightness(350%);
  2169.             -webkit-transform: scale(0.7);
  2170.             transform: scale(0.7);
  2171.         }
  2172.         70% {
  2173.             opacity: .3;
  2174.             -webkit-filter: brightness(150%);
  2175.             filter: brightness(150%);
  2176.         }
  2177.         100% {
  2178.             opacity: 0;
  2179.             -webkit-transform: scale(1.02);
  2180.             transform: scale(1.02);
  2181.             -webkit-filter: brightness(100%);
  2182.             filter: brightness(100%);
  2183.         }
  2184.     }
  2185.     @keyframes NewFeedback5 {
  2186.         0% {
  2187.             opacity: 1;
  2188.             -webkit-filter: brightness(150%);
  2189.             filter: brightness(150%);
  2190.             -webkit-transform: scale(0.7);
  2191.             transform: scale(0.7);
  2192.         }
  2193.         100% {
  2194.             opacity: 0;
  2195.             -webkit-transform: scale(1.02);
  2196.             transform: scale(1.02);
  2197.             -webkit-filter: brightness(100%);
  2198.             filter: brightness(100%);
  2199.         }
  2200.     }
  2201.     @keyframes NewFeedback {
  2202.         0% {
  2203.             opacity: 1;
  2204.             -webkit-filter: brightness(160%);
  2205.             filter: brightness(160%);
  2206.             -webkit-transform: scale(1.0);
  2207.             transform: scale(1.0);
  2208.         }
  2209.  
  2210.         100% {
  2211.             opacity: 0;
  2212.             -webkit-transform: scale(1.2);
  2213.             transform: scale(1.2);
  2214.             -webkit-filter: brightness(100%);
  2215.             filter: brightness(100%);
  2216.         }
  2217.     }
  2218.     @keyframes NewFeedback4 {
  2219.         0% {
  2220.             opacity: .5;
  2221.             transform: translateY(0%) translateX(0%);
  2222.         }
  2223.  
  2224.         20% {
  2225.             opacity: .3;
  2226.             transform: translateY(0%) translateX(-0%) scale(1.0);
  2227.         }
  2228.         50% {
  2229.             opacity: .9;
  2230.             transform: translateY(18%) translateX(-0%) scale(1.2);
  2231.         }
  2232.  
  2233.         100% {
  2234.             opacity: 0;
  2235.  
  2236.             transform: translateY(15%) translateX(5%) scale(1.2);
  2237.         }
  2238.     }
  2239.     @keyframes feedback {
  2240.         0% {
  2241.             opacity: 0;
  2242.             transform: scale3d(0.2, 1.2, 0.96)
  2243.         }
  2244.         10% {
  2245.             opacity: 1;
  2246.             -webkit-transform: scale3d(1, 1.2, 1);
  2247.             transform: scale3d(1.2, 1.2, 1)
  2248.         }
  2249.         100% {
  2250.             opacity: 0;
  2251.             -webkit-transform: scale3d(1, 1.2, 1);
  2252.             transform: scale3d(1, 1.2, 0.96)
  2253.         }
  2254.     }
  2255.  
  2256.     @keyframes feedlabelP {
  2257.         0% {
  2258.             opacity: 0;
  2259.             -webkit-transform: scale3d(1, 1, 1);
  2260.             transform: scale3d(1, 1, 1)
  2261.         }
  2262.         15% {
  2263.             opacity: 1;
  2264.             -webkit-transform: scale3d(0.8, 0.8, 1);
  2265.             transform: scale3d(1.2, 1.2, 1.2)
  2266.         }
  2267.         24% {
  2268.             -webkit-transform: scale3d(1, 1, 1);
  2269.             transform: scale3d(1, 1, 1)
  2270.         }
  2271.  
  2272.         30% {
  2273.             opacity: 1;
  2274.             -webkit-transform: scale3d(0.8, 0.8, 1);
  2275.             transform: scale3d(1.1, 1.1, 1.1)
  2276.         }
  2277.  
  2278.         43% {
  2279.             opacity: 1;
  2280.             -webkit-transform: translate3d(0, 0, 0);
  2281.             transform: translate3d(0, 0, 0)
  2282.         }
  2283.         100% {
  2284.             opacity: 0;
  2285.             -webkit-transform: translate3d(0, 5px, 0) scale3d(0.95, 0.95, 1);
  2286.             transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1)
  2287.         }
  2288.     }
  2289.     @keyframes feedlabel {
  2290.         0% {
  2291.             opacity: 0;
  2292.             -webkit-transform: scale3d(1, 1, 1);
  2293.             transform: scale3d(1, 1, 1)
  2294.         }
  2295.         15% {
  2296.             opacity: 1;
  2297.             -webkit-transform: scale3d(0.8, 0.8, 1);
  2298.             transform: scale3d(1.2, 1.2, 1.2)
  2299.         }
  2300.         26% {
  2301.             -webkit-transform: scale3d(1.1, 1.1, 1.1);
  2302.             transform: scale3d(1.1, 1.1, 1.1)
  2303.         }
  2304.         50% {
  2305.             opacity: 1;
  2306.         }
  2307.         100% {
  2308.             opacity: 0;
  2309.             -webkit-transform: translate3d(0, 5px, 0) scale3d(0.95, 0.95, 1);
  2310.             transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1)
  2311.         }
  2312.     }
  2313.         @keyframes feedlabel2 {
  2314.         0% {
  2315.             opacity: 0;
  2316.             -webkit-transform: scale3d(1, 1, 1) rotate(180deg) translateY(-10%);
  2317.             transform: scale3d(1, 1, 1)  rotate(180deg) translateY(-10%);
  2318.         }
  2319.         15% {
  2320.             opacity: 1;
  2321.             -webkit-transform: scale3d(0.8, 0.8, 1);
  2322.             transform: scale3d(1.2, 1.2, 1.2)  rotate(180deg) translateY(-10%);
  2323.         } 
  2324.         26% {
  2325.             -webkit-transform: scale3d(1.1, 1.1, 1.1);
  2326.             transform: scale3d(1.1, 1.1, 1.1)  rotate(180deg) translateY(-10%);
  2327.         }
  2328.         50% {
  2329.             opacity: 1;
  2330.         }
  2331.         100% {
  2332.             opacity: 0;
  2333.             -webkit-transform: translate3d(0, 5px, 0) scale3d(0.95, 0.95, 1)rotate(180deg) translateY(-10%);
  2334.             transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1) rotate(180deg)  translateY(-10%)
  2335.         }
  2336.     }
  2337.  
  2338.     /*afterdance*/
  2339.     #afterdance::before {
  2340.         background-color: #0000;
  2341.     }
  2342.     #afterdance .avatarFlag {
  2343.         width: 0.6rem;
  2344.         height: 100%;
  2345.         float: left;
  2346.         position: relative;
  2347.         margin: 0 auto;
  2348.     }
  2349.     .exit-btn--play-again {
  2350.         left: 8.0rem;
  2351.     }
  2352.     #afterdance .player-content {
  2353.         float: left;
  2354.         width: 72%;
  2355.         height: 0.4rem;
  2356.         background: none;
  2357.         border-radius: 12px;
  2358.         padding: 0.05rem 0.15rem 0.05rem 0.1rem;
  2359.         margin: 0.065rem 0 0 -0.03rem;
  2360.         position: relative;
  2361.     }
  2362.  
  2363.     #afterdance .img--afterDance {
  2364.         width: .95rem;
  2365.         height: 0.9rem;
  2366.         top: 4.7rem;
  2367.         left: 0rem;
  2368.         z-index: 0;
  2369.         position: absolute;
  2370.         margin: 2% 2% 2% 2%;
  2371.     }
  2372.  
  2373.     #afterdance .img--afterDance .coach {
  2374.         width: 70%;
  2375.         height: 70%;
  2376.         border-radius: 10%;
  2377.     }
  2378.  
  2379.     #afterdance .song-info {
  2380.         position: absolute;
  2381.         color: #212121;
  2382.         width: 3rem;
  2383.         right: -3rem;
  2384.         bottom: 0.5rem;
  2385.     }
  2386.  
  2387.     #afterdance .players {
  2388.         width: 11.5rem;
  2389.         right: 40%;
  2390.         top: -10%;
  2391.         max-height: 100%;
  2392.     }
  2393.     #afterdance .img--afterDance::before {
  2394.         content: "";
  2395.         position: absolute;
  2396.         display: block;
  2397.         top: -4.85rem;
  2398.         height: 5.65em;
  2399.         left: -0.1rem;
  2400.         width: 10.1em;
  2401.         transform: scale(1);
  2402.         border-radius: 0.05rem;
  2403.         z-index: -99999999999 !important;
  2404.     }
  2405.     #afterdance {
  2406.         height: 100%;
  2407.         margin: 0 0 0 0;
  2408.         padding: 1rem 0.1rem 0.15rem 0.1rem;
  2409.         background: #6500ff00
  2410.     }
  2411.     #afterdance::after {
  2412.         content: 'CONGRATULATIONS!';
  2413.         transition: opacity 3s linear;
  2414.         letter-spacing: -.02rem;
  2415.         font-size: 30%;
  2416.         text-align: left;
  2417.         position: absolute;
  2418.         display: block;
  2419.         width: 43%;
  2420.         left: -2.9%;
  2421.         height: 9%;
  2422.         top: 4%;
  2423.         padding: 1% 2% .9% 8%;
  2424.         background: #6500ff00;
  2425.         border-radius: 10px;
  2426.     }
  2427.     exit-btn--continue,
  2428.     .exit-btn--continue {
  2429.         border-radius: 40px;
  2430.         padding: 1% 0% 0% 0%;
  2431.         width: 16%;
  2432.         height: 7%;
  2433.         background: #6500ff!important;
  2434.         color: #fff;
  2435.     }
  2436.     #afterdance .results .player .score.superstar::after,
  2437.     #afterdance .results .player .score.megastar::after {
  2438.         filter: drop-shadow(1px 1px 1px #000);
  2439.         top: .24rem;
  2440.         left: 1.92rem;
  2441.         transform: scale(1.2);
  2442.     }
  2443.     .exit-btn--play-again {
  2444.         border-radius: 40px;
  2445.         padding: 1% 0% 0% 0%;
  2446.         width: 16%;
  2447.         left: 80%;
  2448.         height: 7%;
  2449.         bottom: 12%;
  2450.         background: #70f!important;
  2451.         color: #fff;
  2452.     }
  2453.     .exit-btn--continue::before,
  2454.     .exit-btn--play-again::before {
  2455.         display: none;
  2456.     }
  2457.     #afterdance .color {
  2458.         left: -.1%;
  2459.         width: 100%;
  2460.         height: 0.5rem;
  2461.         z-index: -1!important;
  2462.         position: absolute;
  2463.         text-align: left!important;
  2464.         padding: 0 0 0 2%
  2465.     }
  2466.     #afterdance .player:nth-child(1) .color {
  2467.         left: -.1%;
  2468.         height: 3.19rem;
  2469.     }
  2470.     #afterdance .player:nth-child(1) {
  2471.         position: absolute;
  2472.         width: 2.9rem;
  2473.         height: 2rem;
  2474.         left: -3.4rem;
  2475.     }
  2476.     #afterdance .player-solo .player:nth-child(1) {
  2477.         position: absolute;
  2478.         width: 2.9rem;
  2479.         height: 2rem;
  2480.         left: 3.2rem;
  2481.         top: 0;
  2482.     }
  2483.     #afterdance .player.player:nth-child(1) .player-content .score {
  2484.         font-size: 28%;
  2485.         width: 100%;
  2486.         height: 100%;
  2487.         display: block;
  2488.         position: absolute;
  2489.         top: 2.7rem!important;
  2490.         right: .0rem;
  2491.     }
  2492.     #afterdance .player:nth-child(1) .player-content {
  2493.         width: 100%;
  2494.         position: relative;
  2495.     }
  2496.     #afterdance .player:nth-child(1) .name {
  2497.         width: 100%;
  2498.         text-align: center;
  2499.         font-family: "Just Dance";
  2500.     }
  2501.     #afterdance .player:nth-child(1) .avatarFlag .avatar-wrapper {
  2502.         width: 2rem;
  2503.         height: 2rem;
  2504.         display: block;
  2505.         display: flex;
  2506.         margin: 0
  2507.     }
  2508.     #afterdance .player:nth-child(1) .avatar-wrapper .avatar {
  2509.         transform: translate(50%, 25%);
  2510.     }
  2511.     #afterdance .player {
  2512.         position: relative;
  2513.     }
  2514.     .scrollContainer {
  2515.         position: relative;
  2516.         width: 6rem;
  2517.         right: -3.4rem;
  2518.     }
  2519.     .scrollArea {
  2520.         overflow: hidden;
  2521.         height: 3.2rem;
  2522.     }
  2523.     #afterdance .player-content,
  2524.     #afterdance .avatarFlag {
  2525.         left: 4%;
  2526.     }
  2527.     #afterdance .player-content .name {
  2528.         color: #fff!important;
  2529.     }
  2530.     .state-afterdance #coverflow {
  2531.         z-index: -20!important;
  2532.         position: absolute;
  2533.     }
  2534.     .state-afterdance #players {
  2535.         display: none;
  2536.     }
  2537. }
  2538.  
  2539. @-moz-document domain("justdancenow.com") {
  2540.     .ThereforeIAm::after {
  2541.         background-image: url(https://vignette.wikia.nocookie.net/justdance/images/1/1e/Thereforeiam_Title.png)
  2542.     }
  2543. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址