@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');
:root {
  --accent: #d01e62;
  --accent75: rgba( 208, 30, 98, 0.75 );
  --accent50: rgba( 208, 30, 98, 0.5 );
  --accentDark: #610c2c;
  --white: #ffffff;
  --white75: rgba( 255, 255, 255, 0.75 );
  --black: #000000;
  --black75:  rgba( 0, 0, 0, 0.75 );
}
* {
    box-sizing: border-box;
    
    scrollbar-color: var(--accent) var(--white25);
    scrollbar-width: thin;
}
html,
body,
article {
    font-family: 'Roboto', sans-serif;
    scrollbar-color: var(--accent) var(--white);
    scrollbar-width: thin;
}
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--white25);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--accent);
}
.full-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.over-screen {
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
}
.intro-screen {
    background-color: var(--black75);
    backdrop-filter: blur(4px);
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
        translate: 0 4%;
    animation: 0.25s intro-screen-enter ease 1 both;
}
.intro-screen-bg ~ p {
    font-size: 2.5rem;
        margin-top: -4rem;
    margin-bottom: 5rem;
}
section.intro-screen-instructions {
    display: flex;
    width: 1720px;
    height: 484px;
    /* align-items: center; */
    /*border: 2px solid red;*/
    justify-content: center;
    gap: 24px;
}
section.intro-screen-instructions-options {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    font-size: 1.15rem;
    justify-content: space-between;
    width: calc(100% / 6);
}
button.intro-screen-faq-button {
    border: 2px solid var(--white);
    border-radius: 2rem;
    background: transparent;
    color: var(--white);
    font-size: 1.5rem;
    width: max-content;
    margin: 0 auto;
    padding: 0.25rem 1rem;
    cursor: pointer;
}
button.intro-screen-faq-button:hover {
    border: 2px solid var(--white);
    background: var(--white);
    color: var(--black);
}
button.intro-screen-faq-exit {
    border: 3px solid var(--accent);
    border-radius: 2rem;
    background: var(--accent);
    color: var(--white);
    font-size: 2rem;
    width: max-content;
    margin: 0 auto;
    padding: 0.5rem 2rem;
    cursor: pointer;
    position: absolute;
    top: 75.5%;
    left: 50%;
    translate: -50% -50%;
}

button.intro-screen-faq-exit:hover {
    border: 3px solid var(--accent);
    background:var(--white);
    color: var(--accent);
}
.intro-screen.exit {
    animation: 0.25s intro-screen-exit ease 1 both;
}
@keyframes intro-screen-enter {
    from    {opacity: 0;}
    to    {opacity: 1;}
}
@keyframes intro-screen-exit {
    from    {opacity: 1;}
    to    {opacity: 0;}
}
.intro-screen h2 {
    font-size: 5rem;
    margin-bottom: 4rem;
    text-transform: uppercase;
        position: absolute;
    left: 50%;
    translate: -50% -50%;
    top: 25%;
}
.intro-screen h2 strong {
    background: var(--accent);
    border-radius: 1rem;
    padding: 0 1.5rem 0 1.5rem;
}
.intro-screen input[type=text],.intro-screen input[type=email] {
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-style: italic;
  font-weight: normal;
  width: 50rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 1.75rem 1.25rem;
  font-size: 2.5rem;
  border-radius: 6rem;
  text-align: center;
}
.intro-screen label {
  font-size: 1.5rem;
  margin-bottom: 3rem;
}
.intro-screen .intro-screen-button,
.intro-screen .intro-screen-button:active {
    width: min-content;
    margin: 0 auto;
    font-size: 2rem;
    color: var(--accent);
    border: 3px solid var(--accent);
    background: var(--white);
    border-radius: 4rem;
    padding: 0.5rem 3rem;
    font-weight: bold;
    transition: all 0.25s ease;
}
button#intro-screen-button-continue-1 {
    margin-top: 500px;
}
button#intro-screen-button-continue-2 {
    position: absolute;
    left: 50%;
    translate: -50% -50%;
    top: 67%;
}
.intro-screen .intro-screen-button:hover {
    background: var(--accent);
    border: 3px solid var(--accent);
    color: var(--white);
}
#choose-avatar {
    width: 1025px;
    margin: 2rem auto 6rem auto;
    position: relative;
    height: 475px;
        position: absolute;
    height: 475px;
    left: 50%;
    translate: -50% 0;
    top: 28%;
}
img.intro-screen-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    pointer-events: none;
}
div#resilience-box-1 {
    /* margin-top: 190px; */
    position: absolute;
    left: 50%;
    translate: -50% 0;
    width: 100%;
    top: 43%;
}

div#resilience-box-2 {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    width: 100%;
    top: 54%;
}
.avatar-coin {
    background-image: url(../images/avatars/avatar0.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.avatar-coin[data-avatar="00"] {background-image: url(../images/avatars/avatar00.png);}
.avatar-coin[data-avatar="0"] {background-image: url(../images/avatars/avatar0.png);}
.avatar-coin[data-avatar="1"] {background-image: url(../images/avatars/avatar1.png);}
.avatar-coin[data-avatar="2"] {background-image: url(../images/avatars/avatar2.png);}
.avatar-coin[data-avatar="3"] {background-image: url(../images/avatars/avatar3.png);}
.avatar-coin[data-avatar="4"] {background-image: url(../images/avatars/avatar4.png);}
.avatar-coin[data-avatar="5"] {background-image: url(../images/avatars/avatar5.png);}
.avatar-coin[data-avatar="6"] {background-image: url(../images/avatars/avatar6.png);}
.avatar-coin[data-avatar="7"] {background-image: url(../images/avatars/avatar7.png);}
.avatar-coin[data-avatar="8"] {background-image: url(../images/avatars/avatar8.png);}
#choose-avatar button.avatar-coin {
    position: absolute;
    width: 200px;
    translate: -50% -50%;
    aspect-ratio: 1/1;
    background-color: transparent;
    border-radius: 50%;
    border: 0px solid var(--white);
    transition: all 0.25s ease; 
}
#choose-avatar .avatar-coin[data-avatar="1"],
#choose-avatar .avatar-coin[data-avatar="2"],
#choose-avatar .avatar-coin[data-avatar="3"],
#choose-avatar .avatar-coin[data-avatar="4"] {
    top: 100px;
}
#choose-avatar .avatar-coin[data-avatar="5"],
#choose-avatar .avatar-coin[data-avatar="6"],
#choose-avatar .avatar-coin[data-avatar="7"],
#choose-avatar .avatar-coin[data-avatar="8"] {
    top: 375px;
}
#choose-avatar .avatar-coin[data-avatar="1"],
#choose-avatar .avatar-coin[data-avatar="5"] {
    left: 100px;
}
#choose-avatar .avatar-coin[data-avatar="2"],
#choose-avatar .avatar-coin[data-avatar="6"] {
    left: 375px;
}
#choose-avatar .avatar-coin[data-avatar="3"],
#choose-avatar .avatar-coin[data-avatar="7"] {
    left: 650px;
}
#choose-avatar .avatar-coin[data-avatar="4"],
#choose-avatar .avatar-coin[data-avatar="8"] {
    left: 925px;
}
#choose-avatar .avatar-coin.selected {
    border: 4px solid var(--accent);
    scale: 1.1;
}
#choose-avatar.choosen .avatar-coin {
    animation: choose-avatar-disappear 1s cubic-bezier(0.36, 0, 0.66, -0.56) 1 both;
}
@keyframes choose-avatar-disappear {
    from        {scale: 1;}
    to        {scale: 0;}
}
#choose-avatar.choosen .avatar-coin.selected {
    top: 50%;
    left: 50%;
    border: 0px solid var(--accent);
    scale: 1;
    animation: none;
    transition: top 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 1s, left 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) 1s;
}
#choose-avatar.choosen {
    transition: all 1s ease 1s;
    width: 200px;
    height: 200px;
}

.resilience-not {
  color: #d7786f;
  font-weight: bold;
  position: absolute;
  left: 1290px;
  translate: -50%;
  font-size: 1.5rem;
      bottom: 40px;
}
.resilience-yes {
  color: #96cf48;
  font-weight: bold;
  position: absolute;
  right: 1290px;
  translate: 50%;
  font-size: 1.5rem;
      bottom: 40px;
}
.resilience-not::after,
.resilience-yes::after {
  content: " ";
  height: 1rem;
  border: 1px solid var(--white);
  width: 1px;
  position: absolute;
  left: 50%;
  top: 2.25rem;
}
#resilience-text,
#resillience-post-message,
#resillience-post-message-2 {
  font-size: 1.5rem;
}
#resilience-text b,
#resillience-post-message b,
#resillience-post-message-2 b {
  font-size: 2rem;
}
#resillience-post-message-2 {
    margin-top: 6rem;
}

#resillience-range {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 15rem;
  padding: 0;
  height: 2rem;
  margin: 4rem auto 5rem auto;;
  width: 850px;
  border: none;
  background: var(--white75);
    border-radius: 1rem;
    overflow: visible;
    position: relative;
    margin-top: 80px;
}
#resillience-range:after {
    content: " ";
    width: 4rem;
    aspect-ratio: 1/1;
    background-image: url( ../images/tutorial-resillience-slide.png);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    position: absolute;
    top: 3rem;
    left: 50%;
    opacity: 0;
    animation: 6s tutorial-resillience-slide ease 2s both 1;
}
@keyframes tutorial-resillience-slide {
    0%       {opacity: 0;}
    5%       {opacity: 1;}
    10%      {translate: 0;translate:0;}
    30%      {translate: -100%;}
    40%      {translate: -100%;}
    60%      {translate: 200%;} 
   70%      {translate: 200%;}
    90%      {translate: -175%;}
    95%      {opacity: 1;translate: -175%;}
    100%     {opacity: 0;}
}
#games-bg {
  position: absolute;
  top: -25%;
  left: -25%;
  width: 200%;
  height: 200%;
  background-image: url(../images/bg-games.svg);
  background-color: var(--white);
  background-size: 260px;
  background-position: center;
  animation: 1s games-bg-slide ease-out both 1;
}
@keyframes games-bg-slide {
    from    {translate: 0 100%;}
    to    {translate: 0 0;}
}
#games-bg {
  position: absolute;
  top: -25%;
  left: -25%;
  width: 200%;
  height: 200%;
  background-image: url(../images/soundwarning-bg.png);
  background-color: var(--white);
  background-size: cover;
  background-position: center;
  animation: 1s games-bg-slide ease-out both 1;
}

#games-bg.td-games-bg {
    
  animation: 1s games-bg-slide ease-out both 1;
}
@keyframes games-bg-slide {
    from    {opacity: 0;}
    to    {opacity: 1;}
}
/* #resillience-progress{
    width: 75%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--accent);
    height: 2rem;
    border-radius: 1rem 0 0 1rem;
} */
.resillience-progress{
    -webkit-appearance: none;
    margin-right: 15px;
    width: 850px;
    height: 33px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 25px;
    background-image: linear-gradient(var(--accent),var(--accent));
    background-size: 75% 100%;
    background-repeat: no-repeat;
}

.resillience-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 45px;
    width: 45px;
    border: 8px solid var(--accent);
    border-radius: 50%;
    background: white;
    cursor: ew-resize;
    /* box-shadow: 0 0 2px 0 #555;
    transition: background .3s ease-in-out; */
}

.resillience-progress::-moz-range-thumb {
    -webkit-appearance: none;
    height: 45px;
    width: 45px;
    border: 8px solid var(--accent);
    border-radius: 50%;
    background: white;
    cursor: ew-resize;
    /* box-shadow: 0 0 2px 0 #555;
    transition: background .3s ease-in-out; */
}

.resillience-progress::-webkit-slider-runnable-track  {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.resillience-progress::-moz-range-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

#resillience-marker {
    border: 8px solid var(--accent);
    background: var(--white);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 75%;
    translate: -50% -50%;
    height: 2.5rem;
    width: 2.5rem;
}
#resilience-bar {
    position: relative;
}
#resilience-bar.picked #resillience-range:after {
    margin: -4rem auto 4rem auto;
    animation: none;
    opacity: 0 !important;
}
#resilience-bar.picked #resillience-marker:after {
    content: " ";
    width: 2.5rem;
    aspect-ratio: 1/1;
    background-image: url(../images/tutorial-marker-arrow.png);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    position: absolute;
    top: 2.5rem;
    left: 50%;
    translate: -50%;
}
#instruction-window article {
    height: 100%;
    overflow: scroll;
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden;
    padding-right: 2rem;
}
section#instruction-window {
        width: 1280px;
    height: 720px;
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 4rem 1rem 4rem 4rem;
    translate: -50% -50%;
    border: none;
    overflow: hidden;
    overflow: visible;
    padding: 2rem;
    z-index: 100;
    background: var(--white);
    box-shadow: 0 0 0 60vw rgb(0 0 0 / 75%);
}
section#instruction-window h2,
section#instruction-window h3,
section#instruction-window h4 {
    font-weight: bold;
}
section#instruction-window h4 {
    color: var(--accent);
    cursor: pointer;
    font-weight: normal;
    font-size: 1.25rem;
}
section#instruction-window section {
  padding-left: 3rem;
  margin-bottom: 1rem;
  position: relative;
}
section#instruction-window h4.opened::after {
    content: "-";
}
section#instruction-window h4::after {
  content: "+";
  position: absolute;
  top: -0.1rem;
  left: 0;
  font-weight: bold;
  color: var(--accent);
  font-size: 1.5rem;
  border-radius: 50%;
  border: 3px solid var(--accent);
  width: 2.1rem;
  height: 2.1rem;
  text-align: center;
}
button.instruction-window-exit {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    background-image: url(../images/icon-exit-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: 0.25s ease;
}
button.instruction-window-exit:hover {
    transition: 0.25s ease;
    scale: 1.05;
}
.city-carroussel {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    perspective: 500px;
}

.city {
    position: absolute;
    top: 50%;
    top: 40%;
    left: 50%;
    width: 1563px;
    height: 1334px;
    translate: -50% -50%;
    scale: 3.5;
    scale: 3.25;
    scale: 2.75;
    transition: 1s all ease;
}
video.city-video {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.city-bg,
.city-fg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.city-inactive {
    pointer-events: none;
    filter: grayscale(100%);
}
.city-available {
    animation: 3s city-glow 1s infinite;
}
@keyframes city-glow {
    0%      {filter: drop-shadow(0px 0px 8px #ffffff);}
    10%     {filter: drop-shadow(0px 0px 45px #ffffff);}
    50%     {filter: drop-shadow(0px 0px 45px #ffffff);}
    60%     {filter: drop-shadow(0px 0px 8px #ffffff);}
    100%    {filter: drop-shadow(0px 0px 8px #ffffff);}
}
.city-building {
    position: absolute;
    bottom: 383px;
    cursor: pointer;
    transition: filter 0.25s ease;
}
.city-building:hover {
    filter: drop-shadow(0px 0px 32px #ffffff) brightness(110%) !important;
}
.city-1 .city-building-5 {left: 880px;}
.city-1 .city-building-6 {left: 230px;}
.city-1 .city-building-4 {left: 840px;}
.city-1 .city-building-3 {left: 700px;}
.city-1 .city-building-2 {left: 380px;}
.city-1 .city-building-1 {left: 537px;}

.city-2 .city-building-5 {left: 240px;}
.city-2 .city-building-6 {left: 910px;}
.city-2 .city-building-4 {left: 410px;}
.city-2 .city-building-3 {left: 700px;}
.city-2 .city-building-2 {left: 530px;}
.city-2 .city-building-1 {left: 937px;}

.city-3 .city-building-6 {left: 710px;}
.city-3 .city-building-4 {left: 848px;}
.city-3 .city-building-3 {left: 240px;}
.city-3 .city-building-2 {left: 371px;}
.city-3 .city-building-5 {left: 570px;}
.city-3 .city-building-1 {left: 1098px;}

.city-4 .city-building-5 {left: 520px;}
.city-4 .city-building-6 {left: 380px;}
.city-4 .city-building-4 {left: 1140px;}
.city-4 .city-building-3 {left: 230px;}
.city-4 .city-building-2 {left: 970px;}
.city-4 .city-building-1 {left: 729px;}

.city-5 .city-building-5 {left: 241px;}
.city-5 .city-building-6 {left: 850px;}
.city-5 .city-building-4 {left: 700px;}
.city-5 .city-building-3 {left: 384px;}
.city-5 .city-building-2 {left: 520px;}
.city-5 .city-building-1 {left: 1017px;}

/*.city-carroussel[data-city="1"] .city-1 {top: 50%;left: 50%;}
.city-carroussel[data-city="1"] .city-2 {top: 55%;left: 120%;}
.city-carroussel[data-city="1"] .city-3 {top: 150%;left: 200%;}
.city-carroussel[data-city="1"] .city-4 {top: 150%;left: -120%;}
.city-carroussel[data-city="1"] .city-5 {top: 55%;left: -20%;}

.city-carroussel[data-city="2"] .city-2 {top: 50%;left: 50%;}
.city-carroussel[data-city="2"] .city-3 {top: 55%;left: 120%;}
.city-carroussel[data-city="2"] .city-4 {top: 150%;left: 200%;}
.city-carroussel[data-city="2"] .city-5 {top: 150%;left: -120%;}
.city-carroussel[data-city="2"] .city-1 {top: 55%;left: -20%;}

.city-carroussel[data-city="3"] .city-3 {top: 50%;left: 50%;}
.city-carroussel[data-city="3"] .city-4 {top: 55%;left: 120%;}
.city-carroussel[data-city="3"] .city-5 {top: 150%;left: 200%;}
.city-carroussel[data-city="3"] .city-1 {top: 150%;left: -120%;}
.city-carroussel[data-city="3"] .city-2 {top: 55%;left: -20%;}

.city-carroussel[data-city="4"] .city-4 {top: 50%;left: 50%;}
.city-carroussel[data-city="4"] .city-5 {top: 55%;left: 120%;}
.city-carroussel[data-city="4"] .city-1 {top: 150%;left: 200%;}
.city-carroussel[data-city="4"] .city-2 {top: 150%;left: -120%;}
.city-carroussel[data-city="4"] .city-3 {top: 55%;left: -20%;}

.city-carroussel[data-city="5"] .city-5 {top: 50%;left: 50%;}
.city-carroussel[data-city="5"] .city-1 {top: 55%;left: 120%;}
.city-carroussel[data-city="5"] .city-2 {top: 150%;left: 200%;}
.city-carroussel[data-city="5"] .city-3 {top: 150%;left: -120%;}
.city-carroussel[data-city="5"] .city-4 {top: 55%;left: -20%;}*/

.city-button {
      position: absolute;
    height: 20rem;
    left: -10rem;
    top: calc(50% - 10rem);
    width: 20rem;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    outline: none;
  border-radius: 50%;
    background-image: url(../images/cities/map_arrow_previous.png);
    background-repeat: no-repeat;
    background-position: calc(90% - 2rem) center;
    cursor: pointer;
    transition: all 1s ease;
    background-size: 4rem;
}
.city-button:hover {
  /*left: -14%;*/
  outline: none;
  background-color: rgba(255, 255, 255, 0.75);
}
.city-button.city-button-next {
  border-radius: 50%;
  background-image: url(../images/cities/map_arrow_next.png);
  left: initial;
  right: -10rem;
  background-position: calc(10% + 2rem) center;
}
.city-button.city-button-next:hover {
  left: initial;
  right: -8rem;
  outline: none;
    
}
.city-sky {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 125%;
}
.hud {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
}
.hud-themes {
  display: flex;
  flex-wrap: wrap;
}
.hud .hud-themes h3 {
  color: var(--white);
  font-weight: bold;
  width: 100%;
  margin-top: 1rem;
}
.hud-icon {
    /*border: 2px solid red;*/
    width: 3rem;
height: 3rem;
margin: 0 0.25rem;
    background-image: url(../images/hud/progress.png), url(../images/hud/icons.png);
    background-size: 100%, calc(5 * 100%);
    background-position-y: calc(0 * 100%), calc(1 * 100%);
    background-position-x: calc(0 * 100%);
}

.hud-icon[data-theme="1"] {background-position-x: calc(5 * 100%);}
.hud-icon[data-theme="2"] {background-position-x: calc(4 * 100%);}
.hud-icon[data-theme="3"] {background-position-x: calc(3 * 100%);}
.hud-icon[data-theme="4"] {background-position-x: calc(2 * 100%);}
.hud-icon[data-theme="5"] {background-position-x: calc(1 * 100%);}

.hud-icon[data-complete="0"] {background-position-y: calc(-0 * 100%), calc(1 * 100%);}
.hud-icon[data-complete="1"] {background-position-y: calc(-1 * 100%), calc(1 * 100%);}
.hud-icon[data-complete="2"] {background-position-y: calc(-2 * 100%), calc(1 * 100%);}
.hud-icon[data-complete="3"] {background-position-y: calc(-3 * 100%), calc(1 * 100%);}
.hud-icon[data-complete="4"] {background-position-y: calc(-4 * 100%), calc(1 * 100%);}
.hud-icon[data-complete="5"] {background-position-y: calc(-5 * 100%), calc(1 * 100%);}
.hud-icon[data-complete="6"] {background-position-y: calc(-6 * 100%), calc(1 * 100%);}
.hud-icon[data-complete="7"] {background-position-y: calc(-7 * 100%), calc(1 * 100%);}
.hud-icon[data-complete="8"] {background-position-y: calc(-8 * 100%), calc(1 * 100%);}
.hud-icon[data-complete="9"] {background-position-y: calc(-9 * 100%), calc(1 * 100%);}
.hud-icon[data-complete="10"] {background-position-y: calc(-10 * 100%), calc(1 * 100%);}

.hud-icon.active[data-complete="0"] {background-position-y: calc(-0 * 100%), calc(0 * 100%);}
.hud-icon.active[data-complete="1"] {background-position-y: calc(-1 * 100%), calc(0 * 100%);}
.hud-icon.active[data-complete="2"] {background-position-y: calc(-2 * 100%), calc(0 * 100%);}
.hud-icon.active[data-complete="3"] {background-position-y: calc(-3 * 100%), calc(0 * 100%);}
.hud-icon.active[data-complete="4"] {background-position-y: calc(-4 * 100%), calc(0 * 100%);}
.hud-icon.active[data-complete="5"] {background-position-y: calc(-5 * 100%), calc(0 * 100%);}
.hud-icon.active[data-complete="6"] {background-position-y: calc(-6 * 100%), calc(0 * 100%);}
.hud-icon.active[data-complete="7"] {background-position-y: calc(-7 * 100%), calc(0 * 100%);}
.hud-icon.active[data-complete="8"] {background-position-y: calc(-8 * 100%), calc(0 * 100%);}
.hud-icon.active[data-complete="9"] {background-position-y: calc(-9 * 100%), calc(0 * 100%);}
.hud-icon.active[data-complete="10"] {background-position-y: calc(-10 * 100%), calc(0 * 100%);}

.hud-avatar.avatar-coin {
    width: 180px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: none;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
}
.hud-1 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    height: 160px;
    border-radius: 80px;
    background-color: var(--accent);
    z-index: 9;
    width: 650px;
    padding: 1rem 90px 1rem 200px;
    color: var(--white);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

.hud-2 {
  position: absolute;
  bottom: 10px;
  left: 580px;
  left: 110px;
border-radius: 0 80px 80px 0;
  height: 160px;
  width: 550px;
  background: var(--accent50);
  backdrop-filter: blur(4px);
  padding: 1rem 90px 1rem 100px;
color: var(--white);
z-index: 1; 
display: flex;
flex-wrap: wrap;
justify-content: space-between;
    align-items: stretch;
    transition: all 0.5s ease;
}
.hud.expand .hud-2 {
    left: 580px;
}
.hud h3 {
  font-weight: bold;
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
}   

.hud-points-box,
.hud-challenges-box {
  background: var(--white);
  color: var(--accent);
  padding: 0px 16px;
  font-size: 1.25rem;
  font-weight: bold;
  border-radius: 0px 20px 20px 20px;
  width: 150px;
  text-align: center;
}

.hud-jokers-box,
.hud-superjokers-box,
.hud-keys-box {
  background: var(--white);
  color: var(--accent);
  padding: 0px 16px;
  font-size: 1.25rem;
  font-weight: bold;
  border-radius: 0px 20px 20px 20px;
  width: 100px;
  text-align: right;
  background-size: 27px;
background-image: url(../images/hud/icon-joker.png);
background-position: 0.75rem center;
background-repeat: no-repeat;
margin-right: -40px;
}

.hud-superjokers{
    padding-left: 32px;
}
.hud-superjokers-box {
background-image: url(../images/hud/icon-superjoker.png);
}
.hud-keys-box {
  background-size: 18px;
background-image: url(../images/hud/icon-key.png);
}
.hud-point-text,
.hud-challenges-text,
.hud-jokers-indicator,
.hud-superjokers-indicator,
.hud-keys-indicator {
  font-size: 1rem;
  font-weight: normal;
  text-transform: lowercase;
}
.hud-resillience {
  width: 100%;
}
.hud-resillience-bar {
  width: 364px;
background: var(--accentDark);
border-radius: 12px;
height: 24px;
position: absolute;
}
.hud-resillience-bar-progress {
  background: var(--white);
  color: var(--accent);
  height: 24px;
  position: absolute;
  border-radius: 12px;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 1rem;
  padding: 3px 6px;
  justify-content: flex-end;
}

.member-profile.active .hud-keys-box,.member-profile.active .hud-jokers-box{
    margin-right: unset;
}

.notification{
    opacity: 0;
    width: 22%;
    min-width: 250px;
        width: max-content;
    min-width: 370px;
    margin-left: -125px;
    background-color: rgba(0, 0, 0, 0.52);
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    padding-right: 25px;
    /*position: fixed;*/
    z-index: 1;
    /*right: 2%;*/
    /*top: 30px;*/
    font-size: 15px;
    font-size: 1.25rem;
    border-radius: 6px;
    z-index: 9999 !important;
    backdrop-filter: blur(16px);
        margin-bottom: 1rem;
}

.hud-expand-button {
    background: none;
      background-repeat: repeat;
      background-image: none;
      background-size: auto;
    border: none;
    background-image: url(../images/hud/button-expand-hud.png);
    background-size: contain;
    width: 3rem;
    height: 3rem;
    background-repeat: no-repeat;
    position: absolute;
    top: calc(50% - 1.5rem);
    right: 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    transform: rotate(180deg);
}
.hud.expand .hud-expand-button {
    transform: rotate(0deg);
}
.hud-expand-button:hover {
    scale: 1.05;
}

.hud-logo {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 1;
}
.hud-exit,
.hud-audio,
.hud-faq {
    position: absolute;
    right: 0rem;
    top: 1rem;
    width: 7rem;
    height: 7rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 1000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
} 
.hud-exit {
    background-image: url(../images/hud/icon-exit.png);
}
.hud-audio-on {
    background-image: url(../images/hud/icon-audio-on.png);
}
.hud-audio-off {
    display: none;
    background-image: url(../images/hud/icon-audio-off.png);
}
.hud-faq {
    background-image: url(../images/hud/icon-faq.png);
}
.hud-audio {
  right: calc(0rem + 5rem);
}
.hud-faq {
  right: calc(0rem + 5rem + 5rem);
}
.hud-exit:hover,
.hud-audio:hover,
.hud-faq:hover {
    scale: 1.05;
}


.team-button {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 10rem;
    height: 10rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 1000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/hud/button-team.png);
} 
.exit-game-button {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 10rem;
    height: 10rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 100000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../images/hud/button-exit.png);
} 
.team-screen {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -25%;
  left: -25%;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    transition: all 0.5s ease;
}
.team-screen.active {
    pointer-events: all;
    opacity: 1;
}

button.team-exit {
    position: absolute;top: 1.5rem;
right: 1.5rem;
width: 2.5rem;
height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    background-image: url(../images/icon-exit-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: 0.25s ease;
}
button.team-exit:hover {
    transition: 0.25s ease;
    scale: 1.05;
}
.team-manager {
  position: absolute;
  right: -100%;
  bottom: 48px;
  border-radius: 2rem;
  background: var(--white);
  width: calc(100% / 3);
  width: 540px;
  padding: 3rem;
  height: calc(100% - 48px - 48px);
  z-index: 1000;
    transition: all 1s ease;
    overflow: hidden;
}

.team-manager.active {
  right: 48px;
    
}
.team-manager h3 {
    color: var(--accent);
    font-weight: bold;
}

.team-resillience {
  width: 100%;
}
.team-resillience-bar {
  width: 454px;
background: #d5d5d5;
border-radius: 12px;
height: 24px;
position: absolute;
}
.team-resillience-bar-progress {
  color: var(--white);
  background: var(--accent);
  height: 24px;
  position: absolute;
  border-radius: 12px;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 1rem;
  padding: 3px 6px;
  justify-content: flex-end;
}
.team-resillience h4 {
  font-weight: bold;
  font-size: 1.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
}
.team-resillience {
  margin-top: 2rem;
  margin-bottom: 4rem;
}
.team-list {
    height: 760px;
overflow: auto;
border-radius: 2rem;
}   
.team-avatar {
  width: 120px;
  aspect-ratio: 1/1;
  float: left;
}
.team-member {
  height: 120px;
  width: 400px;
  margin: 1rem 0;
  display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
cursor: pointer;
border-radius: 60px;
}
.team-member:hover {
background: #d5d5d5;
}
.team-member h4 {
    width: calc(400px - 1rem - 150px);
  margin-left: 1rem;
  color: #606060;
  font-weight: bold;
}
.team-member p {
  width: calc(400px - 1rem - 150px);
  margin-left: 1rem;
  color: #606060;
}
.member-profile {
  position: absolute;
  background: var(--accent);
  width: 100%;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 50%;
  transition: all 1s ease;
  padding: 2rem;
  color: var(--white);
  display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.member-profile.active {
  bottom: 0;
}
.member-profile .team-member h4,
.member-profile .team-member p,
.member-profile .team-manager h3{
    color: var(--white);
}

.member-profile .hud-challenges h4,
.member-profile .hud-jokers h4,
.member-profile .hud-keys h4,
.member-profile .actions-send h4,
.member-profile .actions-request h4 {
    font-size: 1rem;
margin-bottom: 0;
}
.member-profile .team-member {
  pointer-events: none;
}
.member-profile .team-member:hover {
  background: transparent;
}
button.team-profile-exit {
    position: absolute;top: 1.5rem;
right: 1.5rem;
width: 2rem;
height: 2rem;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    background-image: url(../images/hud/button-exit-profile.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: 0.25s ease;
}
button.team-profile-exit:hover {
    transition: 0.25s ease;
    scale: 1.05;
}

.member-profile .team-resillience-bar{
    background: var(--accentDark);
}
.member-profile .team-resillience-bar-progress{
    color: var(--accent);
    background: var(--white);
}

.member-profile .team-resillience {
  margin-top: 0rem;
  margin-bottom: 3rem;
}
.actions-send,
.actions-request {
    margin-top: 2rem;
}
.actions-send-box,
.actions-request-box {
background: var(--white);
color: var(--accent);
padding: 0px 16px;
font-size: 1.25rem;
font-weight: bold;
border-radius: 0px 2.5rem 2.5rem 2.5rem;
min-width: 150px;
text-align: center;
padding: 0.5rem 1rem;
}
.actions-button {
width: 4rem;
height: 4rem;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    background-image: url(../images/hud/button-alert.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: 0.25s ease;
}

.actions-button.actions-send-alert {background-image: url(../images/hud/button-alert.png);}
.actions-button.actions-send-joker {background-image: url(../images/hud/button-joker.png);}
.actions-button.actions-send-key {background-image: url(../images/hud/button-key.png);}
.actions-button.actions-request-joker {background-image: url(../images/hud/button-joker.png);}
.actions-button.actions-request-key {background-image: url(../images/hud/button-key.png);}
.actions-button.inactive {
    opacity: 0.5;
    pointer-events: none;
}
.actions-button:hover {
    transition: 0.25s ease;
    scale: 1.05;
}

.actions-send-message {
  position: absolute;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  width: 100%;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 50%;
  transition: all 1s ease;
  padding: 2rem;
  color: var(--white);
  display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.actions-send-message.active {
  bottom: 0;
}

.actions-send-message-icon {
  width: 7rem;
  height: 7rem;
  background-image: url(../images/hud/icon-message-alert.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  margin: 0 auto;
}
.actions-send-message-alert .actions-send-message-icon {background-image: url(../images/hud/icon-message-alert.png);}
.actions-send-message-joker .actions-send-message-icon {background-image: url(../images/hud/icon-key-joker.png);}
.actions-send-message-key .actions-send-message-icon {background-image: url(../images/hud/icon-message-key.png);}

.action-send-message-box {
  color: #606060;
  background: var(--white);
  border-radius: 2rem;
  padding: 2rem 4rem 0rem 4rem;
  text-align: center;
  font-size: 1.25rem;
  position: relative;
}
.action-send-message-box h4 {
    font-weight: bold;
}
.actions-send-message-send {
	position: absolute;
	bottom: 0;
	width: 50%;
	right: 0;
	border: none;
	border-top-color: currentcolor;
	border-top-style: none;
	border-top-width: medium;
	border-right-color: currentcolor;
	border-right-style: none;
	border-right-width: medium;
	background: no-repeat;
	font-size: 1.5rem;
	font-weight: bold;
	padding: 0.5rem 1rem;
	color: #606060;
	border-top: 2px solid #606060;
	border-left: 1px solid #606060;
        border-radius: 0 0 2rem 0 ;
}
.actions-send-message-cancel {
	position: absolute;
	bottom: 0;
	width: 50%;
	left: 0;
	border: none;
	background: no-repeat;
	font-size: 1.5rem;
	font-weight: bold;
	padding: 0.5rem 1rem;
	color: #606060;
	border-top: 2px solid #606060;
	border-right: 1px solid #606060;
        border-radius: 0 0 0 2rem;
}
.actions-send-message-send:hover,
.actions-send-message-cancel:hover {
	background: #606060;
        color: var(--white);
}
.points-added {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    color: var(--accent);
    color: #60e036;
     text-shadow: 0 0 16px #ffffff;
     font-size: 10rem;
     animation: points-pop-in 2.5s 1;
     z-index: 1000;
     pointer-events: none;
}
.resilience-added {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    color: var(--accent);
    color: #8d6eda;
     text-shadow: 0 0 16px #ffffff;
     font-size: 10rem;
     animation: points-pop-in 2.5s 1;
     z-index: 1000;
     pointer-events: none;
}
.wrong-added {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    color: var(--accent);
     text-shadow: 0 0 16px #ffffff;
     font-size: 10rem;
     animation: points-pop-in 2s 1;
     width: 30rem;
     height: 30rem;
     background-image: url(../images/wrong.png);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center center;
     z-index: 1000;
     pointer-events: none;
     filter: drop-shadow(0 0 16px #ffffff);
}
@keyframes points-pop-in {
    0%      {scale: 0;animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);translate: -50% -50%;}
    15%     {scale: 1;translate: -50% -50%;}
    85%     {scale: 1;animation-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56);translate: -50% -50%;}
    100%    {scale: 0;translate: -237% 117%;}
}
#timer {
  background-image: url(../images/timer.png);
  width: 10rem;
  height: 11rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 2.75rem;
  padding: 2rem 0 0 0;
  font-weight: bold;
  position: absolute;
  top: 48px;
  left: 96px;
  z-index: 100;
  animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 1s;
}
#timer span {
  font-weight: normal;
  font-size: 2rem;
  margin-top: 10px;
}
.game-instruction {
  position: absolute;
  font-size: 1.5rem;
  left: 48px;
  top: 230px;
  width: 260px;
  text-align: center;
  animation: fade-in 1s ease both 1s 1;
}
@keyframes fade-in {
    from    {opacity: 0;}
    to    {opacity: 1;}
}
.swipe-game {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 1s;
}
@keyframes pop-in {
    from    {scale:0;}
    to      {scale:1;}
}
.swipe-screen {
 position: absolute;
    box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 10%);
    background: var(--white);
    padding: 6rem 2rem 3rem 2rem;
    width: 604px;
    height: 850px;
    border-radius: 2rem;
    top: 42%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: space-between;
    text-align: center;
    background-image: url(../images/games/swipe-game/swipe-bg-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
div#swipe-game-bg {
    position: absolute;
    top: 42%;
    left: 54%;
    animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 1s;
    translate: -50% -50%;
    width: 1510px;
        height: 1280px;
        background-image: url(../images/games/swipe-game/swipe-bg-2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.swipe-screen.right {
  border: 2px solid var(--right);
  background-image: url(../images/games/swipe-game/swipe-bg-1-right.png);
}
.swipe-screen.wrong {
  border: 2px solid var(--wrong);
  background-image: url(../images/games/swipe-game/swipe-bg-1-wrong.png);
}
.swipe-screen[data-swipe="10"] {z-index:1;}
.swipe-screen[data-swipe="9"] {z-index:2;}
.swipe-screen[data-swipe="8"] {z-index:3;}
.swipe-screen[data-swipe="7"] {z-index:4;}
.swipe-screen[data-swipe="6"] {z-index:5;}
.swipe-screen[data-swipe="5"] {z-index:6;}
.swipe-screen[data-swipe="4"] {z-index:7;}
.swipe-screen[data-swipe="3"] {z-index:8;}
.swipe-screen[data-swipe="2"] {z-index:9;}
.swipe-screen[data-swipe="1"] {z-index:10;}
.swipe-screen[data-swipe="0"] {z-index:11;}
img.swipe-image {
    margin-bottom: 2rem;
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.1) inset;
}
.swipe-screen h3 {
  font-size: 2.25rem;
  font-weight: bold;
  margin-bottom: auto;
  color: var(--accent);
  /*margin: 1rem 2rem 2rem 2rem;*/
}
.swipe-screen p {
  font-size: 1.5rem;
  color: var(--black);
  margin: 0;
  /*margin: 1rem 2rem 2rem 2rem;*/
}
.swipe-btn-group {
  margin-top: auto;
}
.swipe-btn {
  border: none;
  background: transparent;
    background-repeat: repeat;
    background-image: none;
    background-size: auto;
  margin: 1rem;
  width: 5rem;
  height: 5rem;
  cursor: pointer;
  background-image: url(../images/games/swipe-game/swipe-false.png);
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.25s ease;
}
.swipe-btn-true {background-image: url(../images/games/swipe-game/swipe-true.png);}
.swipe-btn:hover {
    scale: 1.05;
}
.swipe-screen.answered {
    transition: all 0.5s cubic-bezier(0.36, 0, 0.66, -0.56), background-image 0s ease;
    pointer-events: none;
}
.swipe-screen.answered.answer-1 {
    translate: 0% -50%;
    opacity: 0;
}
.swipe-screen.answered.answer-0 {
    translate: -100% -50%;
    opacity: 0;
}

.key-screen{
    opacity: 0;
    pointer-events: none;
    transition: all 1s ease;
}

.key-screen.active{
    transition: none;
    pointer-events: all;
    animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 1s;
    opacity: 1;
}

.game-over,
.start-screen,
.key-screen{
    display: none;
    position: absolute;
    width: 200%;
    height: 200%;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    z-index: 100;
    top: -50%;
    left: -50%;
}
.game-over-box,
.key-screen-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.start-screen-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.start-screen-video {
  width: 100%;
  margin-bottom: 3rem;
}
.game-over h2,
.start-screen h2,
.key-screen h2 {
    font-size: 5rem;
    margin-bottom: 4rem;
    text-transform: uppercase;
    color: var(--white);
    
}

.start-screen {
    flex-direction: row;
flex-wrap: wrap;
}

.start-screen h2 {
width: 100%;
text-align: center;
margin-top: auto;
}
.start-screen h2 span,
.key-screen h2 span {
        font-size: 2rem;
    max-width: 1460px;
    display: inline-block;
    margin-top: 3rem;
}
.game-over h2 strong,
.start-screen h2 strong,
.key-screen h2 strong {
    background: var(--accent);
    border-radius: 1rem;
    padding: 0 1.5rem 0 1.5rem;
}
.game-over-icon {
  width: 20rem;
  margin: 2rem;
}
.key-screen-icon {
  width: 15rem;
    margin: 2rem;
    margin-bottom: 4rem;
    animation: key-glow 1s ease infinite;
}
@keyframes key-glow {
    0%  {filter: drop-shadow( 0px 0px 0px white);}
    50%  {filter: drop-shadow( 0px 0px 16px white);}
    100%  {filter: drop-shadow( 0px 0px 0px white);}
}
.game-over h3 {
  color: var(--white);
  font-size: 1.5rem;
}
.game-over p {
  color: var(--white);
  font-size: 2rem;
}
.start-screen h3,
.key-screen h3 {
    margin-top: 2rem;
    color: var(--white);
    font-size: 2.5rem;
    background: var(--accent);
    width: max-content;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    margin-left: -1rem;
        font-weight: bold;
}
.start-screen h3:first-child {
    margin-top: 0;
}
.start-screen p,
.key-screen p {
  color: var(--white);
  font-size: 2rem;
}
.start-screen-left {
width: 20%;

    margin-top: -2rem;
    margin-right: 4rem;
    padding: 3rem;
    margin-bottom: auto;
    display: flex;
    border-radius: 2rem;
    flex-direction: column;
    /* align-items: center; */
    justify-content: space-between;
    background: var(--black);
    filter: drop-shadow(2px 2px 0px white) drop-shadow(-2px 2px 0px white) drop-shadow(2px -2px 0px white) drop-shadow(-2px -2px 0px white);
}
section.start-screen-left:after {
    content: "";
    width: 3rem;
    height: 4rem;
    /* background: var(--black); */
    position: absolute;
    left: 100%;
    top: 50%;
    translate: 0 -50%;
    border-left: 3rem solid var(--black);
    border-bottom: 3rem solid transparent;
    border-top: 3rem solid transparent;
}
.start-screen-right {
  width: 20%;
padding-left: 2rem;
margin-bottom: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.start-screen-clock {
  height: 4rem;
  margin-top: 1rem;
  margin-bottom: 0rem;
  margin: 2rem 1rem -1rem 0;
  translate: 0 -1.5rem;
}
.game-over-button,
.game-over-button:active,
.start-screen-button,
.start-screen-button:active,
.key-screen-button,
.key-screen-button:active {
    width: max-content;
    margin: 0 auto;
    font-size: 2rem;
    color: var(--accent);
    border: 3px solid var(--accent);
    background: var(--white);
    border-radius: 4rem;
    padding: 0.5rem 3rem;
    font-weight: bold;
    margin: 0 1rem;
}
.game-over-button:hover,
.start-screen-button:hover ,
.key-screen-button:hover {
    background: var(--accent);
    border: 3px solid var(--accent);
    color: var(--white);
}
button.start-screen-button.start-screen-return,
button.start-screen-button.start-screen-return:active {
    position: absolute;
    top: 28%;
    right: 28%;
    width: 4rem;
    text-align: center;
    padding: 0.5rem;
    height: 4rem;
    border-radius: 2rem;
    border: 3px solid var(--white);
    color: var(--white);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
button.start-screen-button.start-screen-return:hover {
    background: var(--white);
    border: 2px solid var(--white);
    color: #000000;
}
#truth-dare-choose-category {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
    animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 1s;
        background-size: 55%;
    background-repeat: no-repeat;
    background-image: url(../images/games/td/TD_bg.png);
    background-position: center;
}
button.truth-dare-option.joker {
    opacity: 0;
}
button.truth-dare-option.selected.right {
    border: 3px solid #5baf3f;
    background: #5baf3f;
	color: var(--white);
}
button.truth-dare-option.right {
    border: 3px solid #5baf3f;
    background: var(--white);
	color: #5baf3f;
}
button.truth-dare-option.selected.wrong {
    border: 3px solid var(--accent);
    background: var(--accent);
	color: var(--white);
}
button.truth-dare-option.wrong {
    border: 3px solid var(--accent);
    background: var(--white);
	color: var(--accent);
}
.truth-dare-continue-button,
.truth-dare-continue-button:active {
    width: max-content;
    margin: 0 auto;
    font-size: 2rem;
    color: var(--accent);
    border: 3px solid var(--accent);
    background: var(--white);
    border-radius: 4rem;
    padding: 0.5rem 3rem;
    font-weight: bold;
    margin-top: 3rem;
}
.truth-dare-continue-button:hover {
    background: var(--accent);
    border: 3px solid var(--accent);
    color: var(--white);
}
.truth-dare-btn {
 width: 30rem;
    height: 30rem;
    margin: 1rem;
    border: none;
    background: transparent;
    color: var(--white);
    border-radius: 50%;
    font-size: 4rem;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    background-image: url(../images/games/td/TD_button.png);
    background-size: 200%;
    box-shadow: 0 0 0 100rem rgb(208 30 98 / 0%);
    transition: box-shadow 1s ease;
}
.truth-dare-btn:hover {
      background-position-x: -100%;
    color: var(--accent);
        box-shadow: 0 0 0 100rem rgb(208 30 98 / 50%);
}
#truth-dare-truth {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  
    animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 1 1s;
}

#truth-dare-question {
    color: #606060;
    font-size: 2rem;
    width: 800px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2rem;
    z-index: 1000;
}
#truth-dare-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#truth-dare-options.answered {
    pointer-events: none;
}
.truth-dare-option {
  width: 800px;
  font-size: 1.75rem;
  min-height: 100px;
    padding: 0.25rem 0.5rem;
       
        width: 900px;
    padding: 0.75rem 2rem;
  border-radius: 5rem;
  margin-bottom: 1rem;
  border: 3px solid #606060;
  background: var(--white);
  color: #606060;
  /*font-weight: bold;*/
}

.truth-dare-option:hover,
.truth-dare-option:focus,
.truth-dare-option.selected {
  border: 3px solid var(--accent);
  background: var(--accent);
  color: var(--white);
}

#dare-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  flex-direction: column;
  font-weight: bold;
  padding: 20%;
    animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
div#dare-screen hr {
    width: 50%;
    border: 4px var(--accent) solid;
    opacity: 1;
}
.td-triangle {
    width: 3rem;
    height: 2rem;
    border-top: 2rem var(--accent) solid;
    border-left: 2rem transparent solid;
    border-right: 2rem transparent solid;
    margin: 1rem;
}
div#dare-screen p strong{
        font-size: 2.25rem;
    color: var(--accent);
}
.truth-dare-continue-button,
.truth-dare-continue-button:active {
        width: max-content;
    margin: 0 auto;
    font-size: 2rem;
    color: var(--accent);
    border: 3px solid var(--accent);
    background: var(--white);
    border-radius: 4rem;
    padding: 0.5rem 3rem;
    font-weight: bold;
    margin: 0 1rem;
    position: absolute;
    z-index: 1000;
    left: 50%;
    translate: -50% -50%;
    top: 75%;
}
.truth-dare-continue-button:hover {
    background: var(--accent);
    border: 3px solid var(--accent);
    color: var(--white);
}
#dare-screen {
    position: absolute;
    width: 1280px;
    height: 590px;
    top: 40%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    padding: 3rem;
    animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 2rem;
    background: var(--white);
    box-shadow: 0 0 32px rgb(0 0 0 / 25%);
}
section#notifications-list {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 100;
}
.notification{
    opacity: 0;
    width: 22%;
    min-width: 250px;
        width: max-content;
    min-width: 370px;
    margin-left: -125px;
    background-color: rgba(0, 0, 0, 0.52);
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    padding-right: 25px;
    /*position: fixed;*/
    z-index: 1;
    /*right: 2%;*/
    /*top: 30px;*/
    font-size: 15px;
    font-size: 1.25rem;
    border-radius: 6px;
    z-index: 9999 !important;
}

.notification.show{
    opacity: 1;
}

.notification.INFO {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}

.notification.BEST_BUDDY {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.BEST_BUDDY_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.SO_QUICKLY {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.SO_QUICKLY_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.ALWAYS_THERE {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.ALWAYS_THERE_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.WAKE_UP {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.WAKE_UP_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.WAKE_UP {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.WAKE_UP_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.THIRTY_THIRTY {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.THIRTY_THIRTY_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.KEY_LOCATION {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.KEY_LOCATION_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.GIFT_KEY {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.GIFT_KEY_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.GIFT_JOKER {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.GIFT_JOKER_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.WOW {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.WOW_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}
.notification.WIN_JOKER {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.WIN_JOKER_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}
.notification.REQUEST_JOKER {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.REQUEST_JOKER_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.REQUEST_KEY {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.REQUEST_KEY_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.SAD {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.SAD_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.UPS {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.UPS_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.RESILIENCE_PILL {
    -webkit-animation: fade 10s linear forwards;
    animation: fade 10s linear forwards;
}
.notification.RESILIENCE_PILL_PERSISTENT {
    -webkit-animation: fadeIn 3s linear forwards;
    animation: fadeIn 3s linear forwards;
}

.notification.success {background-color: #04AA6D;}
.notification.info {background-color: #2196F3;}
.notification.warning {background-color: #ff9800;}

.notification-closebtn {
    float: right;
    cursor: pointer;
    transition: 0.3s;
}

.notification-closebtn:hover {
    color: black;
}

.notification-title{
    font-weight: bold;
    color: white;
    position: absolute;
    left: 22%;
    top: 10%;
}

.notification-text{
    margin-top: 8%;
    max-width: 250px;
    padding-left: 10%;
    text-align: start;
    line-height: 20px;
    padding-bottom: 15%;
    margin-left: 10%;
    margin-top: 16%;
    max-width: 320px;
    padding-left: 10%;
    text-align: start;
    line-height: 20px;
    padding-bottom: 23%;
    margin-left: 10%;
}

.notification-icon{
    border-radius: 6px;
    top: 34%;
    position: absolute;
    width: 36px;
    height: 36px;
}

.notification-btn1{
    border: 2px solid white;
    width: 24%;
    border-radius: 20px;
    position: absolute;
    bottom: 10%;
    left: 30%;
    cursor: pointer;
}

.notification-btn1:hover{
    font-weight: bold;
}

.notification-btn2{
    border: 2px solid white;
    width: 24%;
    border-radius: 20px;
    position: absolute;
    bottom: 10%;
    right: 20%;
    cursor: pointer;
}

.notification-btn2:hover{
    font-weight: bold;
}

.notification-btnCentered{
    border: 2px solid white;
    width: max-content;
    border-radius: 20px;
    position: absolute;
    bottom: 10%;
    right: 50%;
    padding: 0 1rem;
    cursor: pointer;
    translate: 50%;
    min-width: 40%;
}

.notification-btnCentered:hover{
    /*font-weight: bold;*/
    border: 2px solid white;
    background: white;
    color: black;
    
}

.notification-icon.BEST_BUDDY, .notification-icon.BEST_BUDDY_PERSISTENT{
    background-color: rgb(135, 185, 212);
    background-image: url(../images/notif/notif_best_buddy.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.notification-icon.SO_QUICKLY, .notification-icon.SO_QUICKLY_PERSISTENT{
    background-color: rgb(238, 219, 0);
    background-image: url(../images/notif/notif_so_quickly.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.notification-icon.ALWAYS_THERE, .notification-icon.ALWAYS_THERE_PERSISTENT{
    background-color: rgb(28, 255, 81);
    background-image: url(../images/notif/notif_always_there.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.notification-icon.WAKE_UP, .notification-icon.WAKE_UP_PERSISTENT{
    background-color: rgb(255, 200, 0);
    background-image: url(../images/notif/notif_alert.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.notification-icon.THIRTY_THIRTY, .notification-icon.THIRTY_THIRTY_PERSISTENT{
    background-color: rgb(0, 68, 171);
    background-image: url(../images/notif/notif_30_30.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.notification-icon.KEY_LOCATION, .notification-icon.KEY_LOCATION_PERSISTENT{
    background-color: rgb(225, 0, 101);
    background-image: url(../images/notif/notif_key.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.notification-icon.GIFT_KEY, .notification-icon.GIFT_KEY_PERSISTENT{
    background-color: rgb(0, 255, 200);
    background-image: url(../images/notif/notif_key.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.notification-icon.GIFT_JOKER, .notification-icon.GIFT_JOKER_PERSISTENT{
    background-color: purple;
    background-image: url(../images/notif/notif_joker.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.notification-icon.REQUEST_JOKER, .notification-icon.REQUEST_JOKER_PERSISTENT{
    background-color: purple;
    background-image: url(../images/notif/notif_joker.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.notification-icon.WIN_JOKER, .notification-icon.WIN_JOKER_PERSISTENT{
    background-color: purple;
    background-image: url(../images/notif/notif_joker.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.notification-icon.REQUEST_KEY, .notification-icon.REQUEST_KEY_PERSISTENT{
    background-color: purple;
    background-image: url(../images/notif/notif_key.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.notification-icon.WOW, .notification-icon.WOW_PERSISTENT{
    background: rgb(255,136,0);
    background: -moz-linear-gradient(145deg, rgba(255,136,0,1) 0%, rgba(161,0,241,1) 46%, rgba(255,0,146,1) 87%);
    background: -webkit-linear-gradient(145deg, rgba(255,136,0,1) 0%, rgba(161,0,241,1) 46%, rgba(255,0,146,1) 87%);
    background: linear-gradient(145deg, rgba(255,136,0,1) 0%, rgba(161,0,241,1) 46%, rgba(255,0,146,1) 87%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff8800",endColorstr="#ff0092",GradientType=1); 
    background-image: url(../images/notif/notif_wow.png);
    background-size: contain;
}

.notification-icon.SAD, .notification-icon.SAD_PERSISTENT{
    background-color: red;
    background-image: url(https://www.freeiconspng.com/uploads/free-icon-png-17.png);
    background-size: contain;
}

.notification-icon.UPS, .notification-icon.UPS_PERSISTENT{
    background-color: rgb(0, 68, 171);
    background-image: url(https://www.freeiconspng.com/uploads/free-icon-png-17.png);
    background-size: contain;
}

.notification-icon.RESILIENCE_PILL, .notification-icon.RESILIENCE_PILL,
.notification-icon.RESILIENCE_PILL, .notification-icon.RESILIENCE_PILL_PERSISTENT{
    background: var(--accent);
    background-image: url(../images/notif/notif_resiliencepill.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

@-webkit-keyframes fade {
    0%,100% {opacity: 0;}
    30%, 80% {opacity: 1;}
}

@keyframes fade {
    0%,100% {opacity: 0;}
    30%, 80% {opacity: 1;}
  }

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    20%, 50%, 80%, 100% {opacity: 1;}
}

@keyframes fadeIn {
    0% {opacity: 0;}
    20%, 50%, 80%, 100% {opacity: 1;}
  }


/* END NOTIFICATIONS */

/* PAIRS GAME */
.pairs-grid {
    max-width: 960px;
    max-width: calc(5 * 200px);
    margin: 0 auto;
   display: grid;
    perspective: 1000px;
    position: absolute;
    top: 40%;
    left: 50%;
        transform: translate(-50%, -50%) scale(1.2) ;
    grid-template-areas:
        "a b c d e" 
        "f g x h i" 
        "j k l m n";
    background-image: url(../images/logo.png);
background-repeat: no-repeat;
background-position: center;
background-size: 200px;
animation: pop-in-pairs 1s cubic-bezier(0.34, 1.56, 0.64, 1) both 1 1s;
  }
  @keyframes pop-in-pairs {
      from  {transform: translate(-50%, -50%) scale(0) ;}
      to    {transform: translate(-50%, -50%) scale(1.2) ;}
  }
.pairs-message {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1280px;
    height: 640px;
    background: rgba(255,255,255,0.9);
    
    background: var(--white);
    z-index: 1000;
    border-radius: 2rem;
    box-shadow: 0 0 2rem rgba(0,0,0,0.25);
    translate: -50% -50%;
    backdrop-filter: blur(8px);
    scale: 0;
    display: flex;
flex-direction: column;
padding: 4rem;
align-items: center;
justify-content: center;
  }
  
.pairs-message.active {
    animation: pairs-message-pop-in 1s cubic-bezier(0.34, 1.56, 0.64, 1) both 1;
    z-index: 10000
}
  @keyframes pairs-message-pop-in {
      from {scale: 0;}
      to {scale: 1;}
  }
.pairs-message-bg-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 150%;
    height: 150%;
    backdrop-filter: blur(16px);
    background: rgba(0,0,0,0.75);
    opacity: 0;
    z-index: 999;
    transition: 0.25s all ease;
    pointer-events: none;
}
.pairs-message.active ~ .pairs-message-bg-screen {
    opacity: 1;
    pointer-events: all;
}
  .pairs-message h2 {
color: var(--accent);
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
    text-transform: uppercase;
}
  .pairs-message p {
 color: #606060;
font-weight: normal;
font-size: 1.5rem;
text-align: center;
}
  .pairs-message-image {
  aspect-ratio: 1/1;
  width: 15rem;
  height: auto;
  border-radius: 2rem;
  background: var(--accent);
  margin: 2rem;
}
  .pairs-card {
    position: relative;
    transition: all .4s linear;
    transform-style: preserve-3d;
    margin: 10px;
  }
  .pairs-card[data-area="0"] { grid-area: a;}
  .pairs-card[data-area="1"] { grid-area: b;}
  .pairs-card[data-area="2"] { grid-area: c;}
  .pairs-card[data-area="3"] { grid-area: d;}
  .pairs-card[data-area="4"] { grid-area: e;}
  .pairs-card[data-area="5"] { grid-area: f;}
  .pairs-card[data-area="6"] { grid-area: g;}
  .pairs-card[data-area="7"] { grid-area: h;}
  .pairs-card[data-area="8"] { grid-area: i;}
  .pairs-card[data-area="9"] { grid-area: j;}
  .pairs-card[data-area="10"] { grid-area: k;}
  .pairs-card[data-area="11"] { grid-area: l;}
  .pairs-card[data-area="12"] { grid-area: m;}
  .pairs-card[data-area="13"] { grid-area: n;}
  
  .pairs-card,
  .pairs-back,
  .pairs-front {
    height: 180px;
    width: 180px;
    
  }
  
  .pairs-back,
  .pairs-front {
    position: absolute;
    backface-visibility: hidden;
  }
  .pairs-front {
    z-index: 2;
    /*background: #FAB942 url('../images/games/pairs-game/front.gif') no-repeat center center / contain;*/
    background: #b0b0b0;
    background: var(--white);
border-radius: 0.5rem;
box-shadow: 0 0 1rem rgba(0,0,0,0.25);
  }
  
  .pairs-back {
    transform: rotateY(180deg);
    background-color: var(--accent);
    
border-radius: 0.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
  
    .pairs-card.pairs-selected {
    transform: rotateY(180deg);
  }
  
  .pairs-match .pairs-front {
    /* background: #6589F9 !important; */
    background: var(--accent)
  }
  
  
button.pairs-message-exit {
    position: absolute;
    top: 1.5rem;
right: 1.5rem;
width: 3.5rem;
height: 3.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    background-image: url(../images/icon-exit-1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: 0.25s ease;
}
button.pairs-message-exit:hover {
    transition: 0.25s ease;
    scale: 1.05;
}
  /* END PAIRS GAME */

  /* Click on the element game */
.gs-target {
    position: absolute;
    width: 200px;
    height: 200px;
    /* background-color: #ffb115; */
    cursor: crosshair;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    animation: shooting-gallery 10s linear infinite;
    /* animation: shooting-gallery 4s linear infinite; */
    display: none;
    transition: transform 0.25s ease;
    /* border-radius: 50%; */
    background-image: url(../images/games/coe-game/bg.png);
    background-repeat: no-repeat;
    background: var(--accent);
    background-size: contain;
    border-radius: 2rem;
    background-position: center;
}
.gs-shooting-area {
  position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  animation: pop-in;
  width: 1600px;
  height: 400px;
  display: none;
}

/*@keyframes shooting-gallery {
    0%    {top: 0%; left: 0%;}
    40%   {top: 0%; left: 100%;}
    50%   {top: 100%; left: 100%;}
    90%   {top: 100%; left: 0%;}
    100%  {top: 0%; left: 0%;}
}*/
@keyframes shooting-gallery {
    0%    {top: 0%; left: 3%;}
    40%   {top: 0%; left: 97%;}
    45%   {top: 50%; left: 100%;}
    50%   {top: 100%; left: 97%;}
    90%   {top: 100%; left: 3%;}
    95%   {top: 50%; left: 0%;}
    100%  {top: 0%; left: 3%;}
}
.gs-target:hover, .gs-target.shot:hover {
    transform: translate(-50%, -50%) scale(1.1);
}
.gs-target:active, .gs-target.shot:active {
    transform: translate(-50%, -50%) scale(1.5) rotate(5deg);
}
.gs-shooting-area.stop .gs-target {
    animation-play-state: paused;
    pointer-events: none;
}
.gs-target.shot[data-correct="true"] {
    background-color: #5bad41;
}
.gs-target.shot[data-correct="false"] {
    opacity: 0;
    pointer-events: none;
}
.gs-shooting-area:after {
    content: "";
    background-image: url(../images/games/coe-game/track.png);
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    scale: 1.25;
}
/*  .gs-target:nth-child(1) {
    animation-delay: -2.2s;
}
.gs-target:nth-child(2) {
    animation-delay: -3.3s;
}
.gs-target:nth-child(3) {
    animation-delay: -4.4s;
}
.gs-target:nth-child(4) {
    animation-delay: -5.5s;
}
.gs-target:nth-child(5) {
    animation-delay: -6.6s;
}
.gs-target:nth-child(6) {
    animation-delay: -7.7s;
}
.gs-target:nth-child(7) {
    animation-delay: -8.8s;
}*/

.gs-message {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1800px;
    height: 660px;
    background: rgba(255,255,255,0.9);
    z-index: 1000;
    border-radius: 2rem;
    box-shadow: 0 0 2rem rgb(0 0 0 / 25%);
    translate: -50% -50%;
    backdrop-filter: blur(8px);
    scale: 0;
    opacity: 0;
    display: flex;
    flex-direction: column;
    padding: 4rem;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
    
}
  
.gs-message.active {
    scale: 1;
    opacity: 1;
    pointer-events: all;
    transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}
  @keyframes pairs-message-pop-in {
      from {scale: 0;}
      to {scale: 1;}
  }
  .gs-message h2 {
color: var(--accent);
    font-weight: bold;
    font-size: 2.5rem;
    text-transform: uppercase;
}
  .gs-message p {
 color: #606060;
font-weight: normal;
font-size: 2rem;
text-align: center;
}
  .gs-message-image {
  aspect-ratio: 1/1;
  width: 15rem;
  height: auto;
  border-radius: 2rem;
  background: var(--accent);
  margin: 2rem;
}
button.gs-message-exit {
    width: max-content;
    margin: 0 auto;
    font-size: 2rem;
    color: var(--accent);
    border: 3px solid var(--accent);
    background: var(--white);
    border-radius: 4rem;
    padding: 0.5rem 3rem;
    font-weight: bold;
    margin: 0 1rem;
}

button.gs-message-exit:hover {
    background: var(--accent);
    border: 3px solid var(--accent);
    color: var(--white)
}
/* END Click on the element game */

/* What's UP Game */
div#wup-game-bg {
    position: absolute;
    top: 42%;
    left: 54%;
    animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 1s;
    translate: -50% -50%;
    width: 1510px;
    height: 1280px;
    background-image: url(../images/games/wup-game/bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.wup-section{
    display: none;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    justify-content: flex-end;
    /*margin-bottom: 2rem;*/
    min-height: 100%;
overflow: visible;
align-items: center;
    padding-top: 9rem;
        padding-bottom: 2rem;
}
.wup-section.active {
    display: flex;
}
.wup-section.answered {
    display: flex;
min-height: auto;
}
.wup-chat-group {
  width: calc(5 * 200px);
}
h2.wup-question-title {
   width: 100%;
    padding: 0.5rem;
    position: absolute;
    text-transform: uppercase;
    text-align: left;
    /* background: var(--accent); */
    /* background: #3e8f38; */
    color: var(--white);
    top: 4rem;
    font-size: 2.5rem;
    font-weight: bold;
    /* border-radius: 2rem 2rem 0 0; */
    /* filter: drop-shadow(0 0.5rem 0 rgba(0,0,0,0.25));*/
}
img.wup-question-img {
        width: 4rem;
    height: 4rem;
    margin: 0 1rem;
    border-radius: 50%;
    background: white;
}
.wup-question,
.wup-feedback {
  background: var(--accent);
    color: var(--white);
    font-size: 1.9rem;
    font-size: 1.5rem;
    padding: 1rem 2rem;
    border-radius: 2rem 2rem 2rem 0;
    position: relative;
    width: max-content;
    margin: 1rem;
    /*margin-bottom: auto;*/
    margin-right: auto;
    max-width: 650px;
    transform: translateX(-400px);
    /*filter: drop-shadow(0.5rem 0.5rem 0 rgba(0,0,0,0.25));*/
    animation: message-fade-in 1s ease both 1 0.5s;
}
.wup-feedback-right,
.wup-feedback-wrong {
    display: none;
    animation: message-fade-in 1s ease both 1 1s;
}
.wup-feedback-details {
    display: none;
    animation: message-fade-in 1s ease both 1 3s;
}
.wup-section-1 .wup-question-1 {
    animation-delay: 2.5s;
}
.wup-section.answered .wup-question {
    margin-bottom: 1rem;
}
.wup-question::before,
.wup-feedback::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(-2rem + 1px);
    width: 0;
    border-right: 2rem solid var(--accent);
    /* border-left: 20px solid transparent; */
    border-top: 2rem solid transparent;
}
.wup-section h2  {
  font-weight: bold;
  font-size: 1.5rem;
margin: 0;
}
.wup-btn,
.wup-continue {
    background: var(--white);
    border: 2px solid #a370b6;
    color: #a370b6;
    font-size: 2rem;
    font-size: 1.9rem;
    font-size: 1.5rem;
    padding: 1rem 2rem;
    border-radius: 2rem;
    position: relative;
    margin-left: auto;
    width: max-content;
    text-align: right;
    margin: 0 1rem 1rem auto;
    max-width: 650px;
    /* margin-top: 1rem; */
    /* margin-bottom: 1rem; */
    animation: message-fade-in 1s ease both 1 2s;
    transform: translateX(400px);
    /*translate: 400px 0;*/
    /*filter: drop-shadow(-0.5rem 0.5rem 0 rgba(0,0,0,0.25));*/
}
.wup-btn:hover,
.wup-continue:hover {
    background: #a370b6;
    border: 2px solid #a370b6;
    color: var(--white);
}
.wup-continue {
    display: none;
        transform: translateX(100px);
    cursor: pointer;
}
.wup-section.answered .wup-continue {
    display: block;
    animation: message-fade-in 1s ease both 1 4s;
}
.wup-section-1 .wup-answers-1 {
    animation-delay: 4.5s;
}
.wup-btn:hover,
.wup-btn:focus {
    outline: none;
}
.wup-feedback img {
    width: 3rem;
    margin: 0 0.25rem;
}
.wup-answer-1.right.selected ~ .wup-feedback-right.wup-feedback-1 {
    display: block;
}
.wup-answer-2.right.selected ~ .wup-feedback-right.wup-feedback-2 {
    display: block;
}
.wup-answer-3.right.selected ~ .wup-feedback-right.wup-feedback-3 {
    display: block;
}

.wup-answer-1.wrong.selected ~ .wup-feedback-wrong.wup-feedback-1 {
    display: block;
}
.wup-answer-2.wrong.selected ~ .wup-feedback-wrong.wup-feedback-2 {
    display: block;
}
.wup-answer-3.wrong.selected ~ .wup-feedback-wrong.wup-feedback-3 {
    display: block;
}

.wup-answer-1.selected ~ .wup-feedback-details.wup-feedback-1 {
    display: block;
}
.wup-answer-2.selected ~ .wup-feedback-details.wup-feedback-2 {
    display: block;
}
.wup-answer-3.selected ~ .wup-feedback-details.wup-feedback-3 {
    display: block;
}
@keyframes message-fade-in {
    from    {opacity: 0;translate: 0 50px;}
    to      {opacity: 1;translate: 0 0px; }
}
#wup-notification {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: 0;
  transition: all 0.5s ease;
}
#wup-notification.active {
  pointer-events: all;
  opacity: 1;
}
#wup-exit {
  position: absolute;
  top: 1rem;
  right: 1em;
  width: 5rem;
  height: 5rem;
  background-image: url(../images/icon-exit-1.png);
  background-size: contain;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}
.wup-section.answered .wup-answer {
    display: none;
}
#wup-notification-message {
  color: var(--white);
  padding: 2rem;
  position: absolute;
  bottom: 0em;
  font-size: 2rem;
  width: 100%;
}
.wup-section.answered .wup-answer.selected {
    display: block;
    margin-bottom: 2rem;
        border-radius: 2rem 2rem 0 2rem;
        pointer-events: none;
    background: #a370b6;
    border: 0px solid #a370b6;
    color: var(--white);
}
.wup-answer-1 {
    margin-top: 2rem;
}
.wup-section.answered .wup-btn.wup-answer::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: calc(-2rem + 1px);
    width: 0;
    border-bottom: 2rem solid #a071b8;
    border-right: 2rem solid transparent;
  /*border-right: 20px solid transparent;*/
}

.wup-btn.wup-answer h2  {
  font-weight: bold;
  font-size: 1.5rem;
margin: 0;
}
#wup-phone {
position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    /* border: 1rem solid var(--black); */
    width: 500px;
    height: 979px;
    /* background: #abe1fb; */
    padding: 0;
    border-radius: 3rem;
    display: flex;
    justify-content: space-between;
    /* border: 1rem solid black; */
    animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 1.5s;
    background-image: url(../images/games/wup-game/wup-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
img.wup-question-img {
    
}
#wup-window {
    width: 100%;
    height: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column;
padding: 0;
border-radius: 2rem;
overflow: auto;
overflow: visible;
}
/* END What's UP Game */


/* Roullete Game */
.rolling-roleta {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 720px;
    height: 720px;
    translate: -50% -50%;
    filter: drop-shadow(0px 0px 16px rgba(0,0,0,0.25));
    animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 1s;

}

#rolling-roleta-roda {
    position: absolute;
    transition: transform 0s ease;
    width: 720px;
}

#rolling-roleta-roda.active {
    transition: transform 5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: transform 5s cubic-bezier(.14,1.4,.62,1);

}

#rolling-roleta-centro {
    position: absolute;
    z-index: 1000;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    cursor: pointer;
        animation: rolling-glow 2.5s ease infinite 2s;
}
@keyframes rolling-glow {
    0%      {filter: drop-shadow(0px 0px 0px white);}
    50%      {filter: drop-shadow(0px 0px 16px white);}
    100%      {filter: drop-shadow(0px 0px 0px white);}
}
#rolling-roleta-centro.dead {

    pointer-events: none;

}



.rolling-bg {
/*background: var(--white);*/
background-image: url(../images/games/roullete-game/bg.png);
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
pointer-events: none;
z-index: -1;
translate: -50% -50%;
background-size: 30%;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 1s;
}


.rolling-bg-2 {
/*background: var(--white);*/
    filter: brightness(10);
background-image: url(../images/games/roullete-game/bg2.png);
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
pointer-events: none;
z-index: -1;
translate: -50% -50%;
background-size: 40%;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both 1s;
}


#rolling-theme-alert {

    position: absolute;

    width: 200%;

    top: 100px;

    height: calc(100% - 100px);

    left: -50%;

    padding: 0 50% 15% 50%;

    transition: all 1s ease-out;

    background: var(--white);

    color:  var(--white);

    background: rgba(0,0,0,0.9);

    /*backdrop-filter: blur(16px);*/

    opacity: 0;

    pointer-events: none;

    transition: all 0.5s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}

img.rolling-theme-img {

    /*background: var(--colorA);*/

    border-radius: 50%;

    /*padding: 64px;*/

    width: 240px;

}

#rolling-theme-alert.active {

    opacity: 1;

    pointer-events: initial;

}



#rolling-questions {
  position: absolute;
    width: 150%;
    top: 44%;
    height: 150%;
    left: 50%;
    translate: -50% -50%;
    padding: 0;
    transition: all 1s ease-in;
    display: flex;
    background: rgba(255,255,255,0.5);
    color: var(--colorA);
    /* box-shadow: 0 0 32px var(--colorA); */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /*backdrop-filter: blur(8px);*/
    color: #606060;
    opacity: 0;
        pointer-events: none;
}
#rolling-questions {
    position: absolute;
    width: 1040px;
    top: 50%;
    height: 1040px;
    left: 50%;
    border-radius: 50%;
    translate: -50% -55%;
    padding: 0;
    transition: all 1s ease-in;
    display: flex;
    /*background: rgba(255,255,255,0.9);*/
    color: var(--colorA);
    /* box-shadow: 0 0 32px var(--colorA); */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: transparent;
    /*backdrop-filter: blur(8px);*/
    color: #606060;
    /*box-shadow: 0px 0px 32px rgb(0 0 0 / 50%);*/
    opacity: 0;
    pointer-events: none;
}
#rolling-questions.active {
    pointer-events: all;
    transition: all 1s ease-out;
    opacity: 1;

}



#rolling-theme-alert h3 {

    width: 50%;

    text-align: center;

}



.rolling-layout-bt.rolling-alert-go {

    background-color: var(--colorA);

    background-color: transparent;

    color: var(--white);

    border: 5px solid var(--white);

    padding: 4px 8px;

    border-radius: 8px;

    position: absolute;

    bottom: 100px;

    cursor: pointer;

    text-transform: none;

    font-weight: bold;

}



.rolling-layout-bt.rolling-alert-go:hover {color: black;background-color: var(--white);border: 5px solid var(--white);}

.rolling-question {

    padding: 0 calc(25% + 16px);

    margin-top: 30px;

    margin-bottom: 30px;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: flex-start;

    color: var(--white);

}





.rolling-question-number {

    font-size: 3.5rem;

    font-weight: bold;

    height: 60px;

    max-width: 70px;

    padding: 40px 0;

    /*border-right: 3px solid var(--white);*/

    display: flex;

    align-items: center;

    justify-content: flex-start;

}

.rolling-question-text {
color: #606060;
    font-size: 3rem;
    font-size: 2rem;
    font-weight: bold;
    max-width: 720px;
    text-align: center;
        width: max-content;
}




.rolling-answers {

    padding: 0 calc(25% + 16px);

}

.rolling-answer {

      width: 800px;
  font-size: 1.75rem;
  min-height: 100px;
    padding: 0.25rem 0.5rem;
        width: 900px;
    padding: 0.75rem 2rem;
  border-radius: 5rem;
  margin-bottom: 1rem;
  border: 3px solid #606060;
  background: var(--white);
  color: #606060;
  /*font-weight: bold;*/
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
text-align: center;
}
.rolling-answer:hover{
  border: 3px solid #606060;
  color: var(--white);
  background: #606060;
}
.roulette-continue {
        width: max-content;
    margin: 0 auto;
    font-size: 1.75rem;
    color: var(--accent);
    border: 3px solid var(--accent);
    background: var(--white);
    border-radius: 4rem;
    padding: 0.5rem 3rem;
    font-weight: bold;
    margin: 0 auto;
    transition: all 0.25s ease;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
}
.roulette-continue.active {
    opacity: 1;
    pointer-events: all;
}
.roulette-continue:hover {
    background: var(--accent);
    border: 3px solid var(--accent);
    color: var(--white);
}
.roulette-continue.active:hover {
    background: var(--accent);
    border: 3px solid var(--accent);
    color: var(--white);
}




.rolling-answer.solved {

    pointer-events: none;

}

.rolling-answer.selected {
  border: 3px solid #606060;
  color: var(--white);
  background: #606060;
}

.rolling-answer.solved.wrong {
  border: 3px solid  var(--accent);
  background: var(--white);
  color:  var(--accent);
}

.rolling-answer.solved.wrong.selected {
  border: 3px solid var(--accent);
  color: var(--white);
  background: var(--accent);
}

.rolling-answer.solved.right {
  border: 3px solid #5baf3f;
  background: var(--white);
  color: #5baf3f;
}

.rolling-answer.solved.right.selected {
  border: 3px solid #5baf3f;
  color: var(--white);
  background: #5baf3f;
}







#rollingClock {

    position: absolute;

    bottom: 9rem;

    left: 50%;

    /*background: red;*/

    width: 175px;

    height: 175px;

    transform: translateX(-50%);

}



.rollingClockNumbers {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    font-weight: bold;

    color: var(--white);

}

#rollingClockCircle {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    

}


.rolling-points-gain {

    /*color: #1AC38B;*/

    color: var(--white);

    font-size: 4rem;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 1000;

    animation: 2s rollings-points both 1;

    text-align: center;

    width: 90%;

    /*text-shadow: 0px 0px 16px #1AC38B;*/

    color: #fb5e29;   

    color :#2ecc71;   

    text-shadow: 1px 1px 1px rgba(0,0,0,0.7);

}

.rolling-points-lose {

    color: #d6241a;

    /*color: var(--white);*/

    font-size: 4rem;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 1000;

    animation: 2s rollings-points both 1;

    text-align: center;

    width: 50%;

    /*text-shadow: 0px 0px 16px #F26956;*/

    text-shadow: 1px 1px 1px rgba(0,0,0,0.7);

}



@keyframes rollings-points {

    0%      {transform: translate(-50%, -50%) scale(0);animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);}

    25%      {transform: translate(-50%, -50%) scale(1);}

    75%     {transform: translate(-50%, -50%) scale(1);top: 50%;left: 50%;opacity: 1;animation-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56);}

    100%    {top: 100px;left: 100px;opacity: 0;transform: translate(-50%, -50%) scale(0);}

    

}





#rolling-score-star {

    height: 18px;

}

.rolling-score-text {

    color: var(--white);

    animation: initial;

}

.rolling-score-text.pop-it {

    display: inline-block;

    /*animation: 0.25s ease backwards pop-in 1;*/

    animation: 0.25s ease backwards gold-it 1;

}

@keyframes gold-it {

    0% {color: var(--white);}

    50%{color: #f7a504;}

    100%{color: var(--white);}

}



#rolling-lives {

    margin-left: auto;

    margin-right: 30px;

}

.rolling-score-life {

    height: 18px;

    margin: 0 4px;

}



#rolling-progress {

    max-height: 60px;

    display: flex;

    flex-direction: row;

}



.rolling-progress-icon {

    /*background: red;*/

    width: 60px;

    height: 60px;

    background-image: url(../images/progresso.webp);

    background-size: 660px;

}





.rolling-progress-icon-0 {background-position-y: -0px; }

.rolling-progress-icon-1 {background-position-y: -60px; }

.rolling-progress-icon-2 {background-position-y: -120px; }

.rolling-progress-icon-3 {background-position-y: -180px; }

.rolling-progress-icon-4 {background-position-y: -240px; }

.rolling-progress-icon-5 {background-position-y: -300px; }

.rolling-progress-icon-6 {background-position-y: -360px; }

.rolling-progress-icon-7 {background-position-y: -420px; }

.rolling-progress-icon-8 {background-position-y: -480px; }

.rolling-progress-icon-9 {background-position-y: -540px; }

.rolling-progress-icon-10 {background-position-y: -600px; }



.rolling-progress-icon[data-progress="0"] {background-position-x: -0px; }

.rolling-progress-icon[data-progress="1"] {background-position-x: -60px; }

.rolling-progress-icon[data-progress="2"] {background-position-x: -120px; }

.rolling-progress-icon[data-progress="3"] {background-position-x: -180px; }

.rolling-progress-icon[data-progress="4"] {background-position-x: -240px; }

.rolling-progress-icon[data-progress="5"] {background-position-x: -300px; }

.rolling-progress-icon[data-progress="6"] {background-position-x: -360px; }

.rolling-progress-icon[data-progress="7"] {background-position-x: -420px; }

.rolling-progress-icon[data-progress="8"] {background-position-x: -480px; }

.rolling-progress-icon[data-progress="9"] {background-position-x: -540px; }

.rolling-progress-icon[data-progress="10"] {background-position-x: -600px; }









#rolling-results {

    position: absolute;

    width: 200%;

    top: 150%;

    height: calc(100% - 100px);

    left: -50%;

    padding: 0 calc(50% + 16px);

    transition: all 1s ease-in;

    /*background: var(--white);*/

    background: rgba(0,0,0,0.9);

    /*color: var(--colorA);*/

    color: var(--white);

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}

#rolling-results.active {

    top: 100px;

    transition: all 1s ease-out;

}

#rolling-results h2 {

    text-transform: none;

    text-align: center;

}

.rolling-results-life {

    width: 48px;

    margin: 0px 5px 20px 5px;

    

}

.rolling-results-image {

    width: 170px;

    margin-bottom: 50px;

    

}

.rolling-results-podium {

    width: 550px;

    margin-top: 20px;

}



.rolling-results-podium-score {

    color: var(--colorB);

    font-size: 2rem;

    font-weight: bold;

    margin-bottom: 50px;

}



.rolling-results-podium-score-0 {transform: translateX(205px);}

.rolling-results-podium-score-1 {transform: translateX(65px);}

.rolling-results-podium-score-2 {transform: translateX(-65px);}

.rolling-results-podium-score-3 {transform: translateX(-205px);}





.rolling-intro-buttons {

    width: 100%;

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    position: absolute;

    bottom: -40px;

}



.rolling-intro-buttons .rolling-layout-bt {

    margin: 5px;

}



.rolling-layout-bt {

    background-color: var(--colorB);

    color: var(--white);

    border: 5px solid var(--colorB);

    padding: 4px 8px;

    border-radius: 8px;

    text-transform: none;

    margin: 10px auto;

    cursor: pointer;

    

    width: 8rem;

    text-align: center;

    font-weight: bold;

}



.rolling-layout-bt.reverse {

    color: var(--colorB);

    background-color: var(--white);

    border: 5px solid var(--colorB);

}



.rolling-layout-bt:hover {color: var(--colorB);background-color: var(--white);border: 5px solid var(--colorB);}

.rolling-layout-bt.reverse:hover {background-color: var(--colorB);color: var(--white);border: 5px solid var(--colorB);}



.rolling-results-end-bt {

    background-color: transparent;

    color: var(--white);

    border: 5px solid var(--white);

    width: 10rem;

}

.rolling-results-end-bt:hover {background-color: var(--white);color: black;border: 5px solid var(--white);}



.rolling-results-start-bt {

    background-color: transparent;

    color: var(--colorB);

    border: 5px solid var(--colorB);

    padding: 4px 8px;

    border-radius: 8px;

    text-transform: none;

    margin: 10px auto;

    cursor: pointer;

    animation: pop-in 0.5s ease both 1 0.1s, pulse 1s ease forwards infinite 1s;

    width: 10rem;

    text-align: center;

    font-weight: bold;

}



.rolling-results-start-bt:hover {background-color: var(--colorB);color: var(--white);border: 5px solid var(--colorB);}



#rolling-leaderboard {

    position: absolute;

    width: 200%;

    top: 100px;



    height: calc(100% - 100px);

    left: -50%;

    padding: 0 calc(50% + 16px);

    transition: all 0.5s ease-in;

    background: var(--white);

    color: var(--colorA);

    opacity: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    pointer-events: none;

}

#rolling-leaderboard.active {

    opacity: 1;

    pointer-events: initial;

    transition: all 0.5s ease-out;

}



#leaderboard-temp {

    display: none;

    opacity: 0;

}



#leaderboard-list {

    /*width: 400px;*/

}

#leaderboard-list ul li {

    font-size: 1rem;

    margin: 20px 0;

    display: flex;

    flex-direction: row;

    justify-content: flex-start;

}



#leaderboard-list ul li .first-part {

    width: 3rem;

}jjjj



#leaderboard-list ul li .middle-part {

    /*margin-right: auto;*/

}



#leaderboard-list ul li .second-part {

    margin-left: 3rem;

    text-align: left;

}



.iconLeaderboardPodium {

    width: 170px;

    margin-bottom: 50px;

}



#leaderboard-points {

    text-transform: none;

    font-weight: bold;

    text-align: center;

    font-size: 1.25rem;

}





.rolling-results-life-score {

    background: var(--colorB);

    border-radius: 8px;

    font-size: 1.5rem;

    color: var(--white);

    padding: 4px 32px;

    display: block;

    width: min-content;

    font-weight: bold;

    margin: 20px auto;

}



#leaderboard-points .leaderboard-red.red-text {

    background: var(--colorB);

    border-radius: 8px;

    font-size: 1.5rem;

    color: var(--white);

    padding: 4px 32px;

    display: block;

    width: min-content;

    font-weight: bold;

    margin: 20px auto;

}



#leaderboard-position {

    text-transform: none;

    font-weight: bold;

    text-align: center;

    font-size: 1.25rem;

}

#leaderboard-position .leaderboard-red.red-text {

    background: var(--colorB);

    border-radius: 8px;

    font-size: 1.5rem;

    color: var(--white);

    padding: 4px 32px;

    display: block;

    width: min-content;

    font-weight: bold;

    margin: 20px auto;

}

#leaderboard-list .leaderboard-red.red-text {

    color: var(--colorB);

    font-weight: bold;

}



sub {

    font-size: 0.75rem;

}





#rolling-intro {

    position: absolute;

    width: 200%;

    top: 150%;

    height: calc(100% - 100px);

    left: -50%;

    padding: 0 calc(50% + 16px);

    transition: all 0.5s ease-in;

    background: var(--white);

    color: var(--colorA);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    z-index: 1000;

        background-image: url(../images/bg.png);



}

#rolling-intro.active {

    top: 100px;

    transition: all 0.5s ease-out;

}



.rolling-page {

    position: absolute;

    /*display: none;*/

    top: 0;

    left: calc(25% + 16px);

    width: calc(50% - 32px);

    height: 90%;

    display: flex;

    opacity: 0;

    z-index: 1000;

    pointer-events: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding-top: 8rem;

    justify-content: flex-start;

    text-align: center;

    /*background: var(--white);*/

    transition: all 0.5s ease;

    /*background-image: url(../images/bg.png);*/

}



.rolling-page.active {

    opacity: 1;

    pointer-events: initial;

}

img.intro-logo {

    width: 100%;

    margin: 50px 0;

}

div#rolling-intro h2 {

    font-size: 2rem;

    font-weight: bold;

    /*font-family: 'Roboto-Bold', sans-serif;*/

    color: var(--colorB);

}

.intro-image {

    width: 70%;

}

.intro-image-small {

    width: 20%;

}

.intro-icon {

    width: 64px;

}

.intro-icon-big {

    width: 196px;

}

.intro-icon-very-big {

    width: 340px;

}

#rolling-intro p {

    width: 80%;

}



.intro-icon-list  {

    width: 60%;

    display: flex;

    flex-direction: row;

    align-items: center;

    font-weight: bold;

    /* justify-content: center; */

}



.intro-icon-list .intro-icon {

    margin-right: 16px;

    margin-left: calc(50% - 64px);

}



.rolling-main-screen-bt {

/*    position: absolute;

    bottom: 50px;

    left: 50%;

    transform: translateX(-50%);

    z-index: -1;*/

    font-size: 0.85rem;

    color: white;

    background-color: #de3c20;

    border: 3px solid #de3c20;

    text-transform: none;

    width: 9rem;

    padding: 10px;

}

.rolling-main-screen-bt.hover {

    background-color: white;

    color: #de3c20;

    border: 3px solid #de3c20;

}

.rolling-main-screen-bt img {

    width: 64px;

    filter: drop-shadow(0px 0px 2px var(--colorB));

}



.rolling-start-messages {

    z-index: -1;

    color: var(--colorB);

    position: absolute;

    top: 240px;

    font-weight: bold;

    font-size: 2rem;

    left: 50%;

    transform: translate(-50%);

    text-align: center;

    width: 80%;

}

.rolling-start-messages span {

    font-size: 1rem;

    color: var(--colorA);

}

.rolling-start-messages-continue {

    display: none;

}

.rolling-start-messages.down {

    top: initial;

    bottom: 205px;

}

div#rolling-intro h2.big-text {

    margin: 1rem 0;

    font-size: 3.5rem;

}



#aviso-som {

    width: 400%;

    position: absolute;

    left: -50%;

    background-image: url(../images/aviso-som.png);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: contain;

    background-color: #e53317;

}



div#rolling-bottom-bar {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    background-color: #e6e6e6;

    z-index: -1;

    padding: 5px;

}



#rolling-theme-alert h2 {

    text-align: center;

    margin-top: 5rem;

}



.rolling-complicated-score {

    font-size: 2.5rem;

}

.rolling-complicated-score .small {

    font-size: 1rem;

}



.rolling-results-image-lose {

    width: 200px;

}





.roleta-sample {

    width: 400px;

    height: 400px;

    position: relative;

    margin: 30px 0;

}

.roleta-sample-roda {

    width: 100%;

    /*animation: 20s you-spin-me both 1 cubic-bezier(0.34, 1.56, 0.64, 1) 3s;*/

    position: absolute;

    top: 0;

    left: 0;

}

.roleta-sample-roda-mask-1,

.roleta-sample-roda-mask-2,

.roleta-sample-roda-mask-3,

.roleta-sample-roda-mask-4,

.roleta-sample-roda-mask-5,

.roleta-sample-roda-mask-6,

.roleta-sample-roda-mask-7 {

    width: 100%;

    /*animation: 20s you-spin-me both 1 cubic-bezier(0.34, 1.56, 0.64, 1) 3s;*/

    position: absolute;

    top: 0;

    left: 0;

    opacity: 0;

    filter: blur(8px);

}

.rolling-page.active > .roleta-sample > .roleta-sample-roda {

    /*width: 100%;*/

    animation: 20s you-spin-me both 1 cubic-bezier(0.34, 1.56, 0.64, 1) 1s;

}

.rolling-page.active > .roleta-sample > .roleta-sample-roda-mask-1 {

    animation: 20s you-spin-me-mask-1 both 1 cubic-bezier(0.34, 1.56, 0.64, 1) 1s;

}

.rolling-page.active > .roleta-sample > .roleta-sample-roda-mask-2 {

    animation: 20s you-spin-me-mask-2 both 1 cubic-bezier(0.34, 1.56, 0.64, 1) 1s;

}

.rolling-page.active > .roleta-sample > .roleta-sample-roda-mask-3 {

    animation: 20s you-spin-me-mask-3 both 1 cubic-bezier(0.34, 1.56, 0.64, 1) 1s;

}

.rolling-page.active > .roleta-sample > .roleta-sample-roda-mask-4 {

    animation: 20s you-spin-me-mask-4 both 1 cubic-bezier(0.34, 1.56, 0.64, 1) 1s;

}

.rolling-page.active > .roleta-sample > .roleta-sample-roda-mask-5 {

    animation: 20s you-spin-me-mask-5 both 1 cubic-bezier(0.34, 1.56, 0.64, 1) 1s;

}

.rolling-page.active > .roleta-sample > .roleta-sample-roda-mask-6 {

    animation: 20s you-spin-me-mask-6 both 1 cubic-bezier(0.34, 1.56, 0.64, 1)   1s;

}

.rolling-page.active > .roleta-sample > .roleta-sample-roda-mask-7 {

    animation: 20s you-spin-me-mask-7 both 1 cubic-bezier(0.34, 1.56, 0.64, 1)   1s;

}

.roleta-sample-centro {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 120px;

}



div#rolling-intro h2.titulo {

    font-size: 3rem;

    color: #a7a7a7;

    margin: 20px 0;

    font-family: 'Roboto-Regular', sans-serif;

    

    position: absolute;

    top: 2rem;

}



@keyframes you-spin-me {

    0%      {transform: rotate(0deg);}

    5%      {transform: rotate(0deg);}

    10%      {transform: rotate(-51.43deg);}

    20%      {transform: rotate(-51.43deg);}

    25%      {transform: rotate(-102.86deg);}

    35%      {transform: rotate(-102.86deg);}

    40%      {transform: rotate(-154.28deg);}

    50%      {transform: rotate(-154.28deg);}

    55%      {transform: rotate(-205.71deg);}

    65%      {transform: rotate(-205.71deg);}

    70%      {transform: rotate(-257.14deg);}

    80%      {transform: rotate(-257.14deg);}

    85%      {transform: rotate(-308.57deg);}

    95%      {transform: rotate(-308.57deg);}

    100%      {transform: rotate(-360deg);}

}

@keyframes you-spin-me-mask-1 {

    0%      {transform: rotate(0deg);}

    5%      {transform: rotate(0deg);opacity:0;}

    10%      {transform: rotate(-51.43deg);opacity:1;}

    20%      {transform: rotate(-51.43deg);opacity:1;}

    25%      {transform: rotate(-102.86deg);opacity:0;}

    35%      {transform: rotate(-102.86deg);}

    40%      {transform: rotate(-154.28deg);}

    50%      {transform: rotate(-154.28deg);}

    55%      {transform: rotate(-205.71deg);}

    65%      {transform: rotate(-205.71deg);}

    70%      {transform: rotate(-257.14deg);}

    80%      {transform: rotate(-257.14deg);}

    85%      {transform: rotate(-308.57deg);}

    95%      {transform: rotate(-308.57deg);}

    100%      {transform: rotate(-360deg);}

}

@keyframes you-spin-me-mask-2 {

    0%      {transform: rotate(0deg);}

    5%      {transform: rotate(0deg);}

    10%      {transform: rotate(-51.43deg);}

    20%      {transform: rotate(-51.43deg);opacity:0;}

    25%      {transform: rotate(-102.86deg);opacity:1;}

    35%      {transform: rotate(-102.86deg);opacity:1;}

    40%      {transform: rotate(-154.28deg);opacity:0;}

    50%      {transform: rotate(-154.28deg);}

    55%      {transform: rotate(-205.71deg);}

    65%      {transform: rotate(-205.71deg);}

    70%      {transform: rotate(-257.14deg);}

    80%      {transform: rotate(-257.14deg);}

    85%      {transform: rotate(-308.57deg);}

    95%      {transform: rotate(-308.57deg);}

    100%      {transform: rotate(-360deg);}

}

@keyframes you-spin-me-mask-3 {

    0%      {transform: rotate(0deg);}

    5%      {transform: rotate(0deg);}

    10%      {transform: rotate(-51.43deg);}

    20%      {transform: rotate(-51.43deg);}

    25%      {transform: rotate(-102.86deg);}

    35%      {transform: rotate(-102.86deg);opacity:0;}

    40%      {transform: rotate(-154.28deg);opacity:1;}

    50%      {transform: rotate(-154.28deg);opacity:1;}

    55%      {transform: rotate(-205.71deg);opacity:0;}

    65%      {transform: rotate(-205.71deg);}

    70%      {transform: rotate(-257.14deg);}

    80%      {transform: rotate(-257.14deg);}

    85%      {transform: rotate(-308.57deg);}

    95%      {transform: rotate(-308.57deg);}

    100%      {transform: rotate(-360deg);}

}

@keyframes you-spin-me-mask-4 {

    0%      {transform: rotate(0deg);}

    5%      {transform: rotate(0deg);}

    10%      {transform: rotate(-51.43deg);}

    20%      {transform: rotate(-51.43deg);}

    25%      {transform: rotate(-102.86deg);}

    35%      {transform: rotate(-102.86deg);}

    40%      {transform: rotate(-154.28deg);}

    50%      {transform: rotate(-154.28deg);opacity:0;}

    55%      {transform: rotate(-205.71deg);opacity:1;}

    65%      {transform: rotate(-205.71deg);opacity:1;}

    70%      {transform: rotate(-257.14deg);opacity:0;}

    80%      {transform: rotate(-257.14deg);}

    85%      {transform: rotate(-308.57deg);}

    95%      {transform: rotate(-308.57deg);}

    100%      {transform: rotate(-360deg);}

}

@keyframes you-spin-me-mask-5 {

    0%      {transform: rotate(0deg);}

    5%      {transform: rotate(0deg);}

    10%      {transform: rotate(-51.43deg);}

    20%      {transform: rotate(-51.43deg);}

    25%      {transform: rotate(-102.86deg);}

    35%      {transform: rotate(-102.86deg);}

    40%      {transform: rotate(-154.28deg);}

    50%      {transform: rotate(-154.28deg);}

    55%      {transform: rotate(-205.71deg);}

    65%      {transform: rotate(-205.71deg);opacity:0;}

    70%      {transform: rotate(-257.14deg);opacity:1;}

    80%      {transform: rotate(-257.14deg);opacity:1;}

    85%      {transform: rotate(-308.57deg);opacity:0;}

    95%      {transform: rotate(-308.57deg);}

    100%      {transform: rotate(-360deg);}

}

@keyframes you-spin-me-mask-6 {

    0%      {transform: rotate(0deg);}

    5%      {transform: rotate(0deg);}

    10%      {transform: rotate(-51.43deg);}

    20%      {transform: rotate(-51.43deg);}

    25%      {transform: rotate(-102.86deg);}

    35%      {transform: rotate(-102.86deg);}

    40%      {transform: rotate(-154.28deg);}

    50%      {transform: rotate(-154.28deg);}

    55%      {transform: rotate(-205.71deg);}

    65%      {transform: rotate(-205.71deg);}

    70%      {transform: rotate(-257.14deg);}

    80%      {transform: rotate(-257.14deg);opacity:0;}

    85%      {transform: rotate(-308.57deg);opacity:1;}

    95%      {transform: rotate(-308.57deg);opacity:1;}

    100%      {transform: rotate(-360deg);opacity:0;}

}


.fade-in-fade-out {

    animation: 3s fade-in-fade-out both ease 1;

}



@keyframes fade-in-fade-out {

    0%  {opacity: 0}

    10%  {opacity: 1}

    90%  {opacity: 1}

    100%  {opacity: 0}

}



.lista-de-titulos {

    position: relative;

    width: 100%;

    margin-top: 30px;

    /*opacity: 0;*/

    font-size: 1.5rem;

}

.lista-de-titulos div {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    opacity: 0;

    text-align: center;

    /*animation: 3s fade-in-fade-out both ease 1;*/

}



.rolling-page.active .lista-de-titulos div {



    animation: 3s fade-in-fade-out both ease 1;

}



.rolling-page h3 {

    font-size: 1.5rem;

    margin: 10px 0 20px 0;

    color: #d6241a;

    color: var(--colorB);

}

#rolling-intro p {

    width: 90%;

    font-size: 1.25rem;

    margin: 1rem 0;

}



.intro-image-pulse {

    width: 256px;

    margin-bottom: 20px;

}



a,

a:visited {

    color: var(--colorB);

}

a:hover,

a:active {

    color: var(--colorB);

    text-decoration: none;

}



#aviso-som {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: var(--colorB);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    z-index: 100000;

}

#aviso-som-safe {

    width: 640px;

    /*height: 400px;*/

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

}

.aviso-som-botao {

    cursor: pointer;

}



.aviso-som-title {

    color: var(--theme2);

    font-size: 1.5rem;

    margin: 20px 0;

    text-align: center;

}



.aviso-som-text {

    color: var(--white);

    font-size: 1.5rem;

    margin: 20px 0;

    text-align: center;

}



@media only screen 

    and ( orientation: portrait ) {

        #aviso-som-safe {

            width: calc(100% - 64px);

        }

}



.rolling-results-small-grade.left {

    margin-right: auto;

    margin-left: 7rem;

    margin-top: 1rem;

}

.rolling-results-small-grade.right {

    margin-left: auto;

    margin-top: -2.5rem;

    margin-right: 7rem;

    margin-bottom: 1rem;

}





#closing-window {

    display: none;

    position: absolute;

    top: 100px;

    left: 0;

    width: 100%;

    height: calc(100% - 100px);

    z-index: 100000;

    background-color: rgba(0, 0, 0, 0.8);

    backdrop-filter: blur(4px);

}

#closing-window-message {

    position: absolute;

    top: 45%;

    background: #dfdfdf;

    color: #000000;

    left: 0;

    transform: translateY(-50%);

    width: 100%;

    padding: 1em 3em;

    text-align: center;

    padding: 32px;

}

#closing-window-message p {

    font-size: 20px;

    font-weight: bold;

}

#closing-window-message h3 {

    margin: 48px 0;

    font-weight: bold;

}

.exit-button img {

    height: 35px;

    display: inline-block;

    margin-right: 12px;

    margin-bottom: -6px;

}

.exit-button {

    color: #e43317;

    font-size: 32px;

    font-weight: normal;

    width: min-content;

    margin-left: auto;

    margin-right: 32px;

    cursor: pointer;

}

.exit-button.right {

    margin-left: 32px;

    margin-right: 0;

}



#rolling-instructions.inactive {

    opacity: 0.5;

    pointer-events: none;

}





#aviso-video-intro {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1000;

    background: #ffffff;

    /*display: none;*/

}

#video-intro {

    display: none;

}

#video-play {

    display: none;    

}

p:last-child {

    margin-bottom: 0;

}

/* END Roullete Game */

.roulette-start-button,
.roulette-start-button:active {
    width: max-content;
    margin: 0 auto;
    font-size: 2rem;
    color: var(--accent);
    border: 3px solid var(--accent);
    background: var(--white);
    border-radius: 4rem;
    padding: 0.5rem 3rem;
    font-weight: bold;
    margin-top: 3rem;
}
.roulette-start-button:hover {
    background: var(--accent);
    border: 3px solid var(--accent);
    color: var(--white);
}
.roulette-theme {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  translate: -50% -50%;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: black;
  color: white;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.roulette-theme h2 {
font-size: 3rem;
font-weight: bold;
color: black;
background: white;
padding: 0.5rem 1rem;
border-radius: 1rem;
margin: 2rem 0 3rem 0;
}
.roulette-theme p {
  font-size: 2rem;
}

.roulette-theme-death {
    background: #000000;
}
.roulette-theme-death h2 {
    color: #000000;
}
.roulette-theme-tictac {
    background: #edaa73;
}
.roulette-theme-tictac h2 {
    color: #edaa73;
}
.roulette-theme-choices {
    background: #f1c0d5;
    background: #e38aaa;
}
.roulette-theme-choices h2 {
    color: #f1c0d5;
}
.roulette-theme-3-choices {
    background: #f1c0d5;
}
.roulette-theme-3-choices h2 {
    color: #e288a9;
}
.roulette-theme-thisthat {
    background: #a370b6;
}
.roulette-theme-thisthat h2 {
    color: #a370b6;
}

#exit-window {
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--white);
    text-align: center;
        font-size: 2rem;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 1s ease;
}
#exit-window.active {
    pointer-events: all;
    opacity: 1;
}
button.exit-window-button {
    text-align: center;
    margin: 2rem;
    width: 8rem;
    height: 4rem;
    font-size: 2rem;
    font-weight: bold;
    color: var(--white);
    background-color: transparent;
    border: 2px solid var(--white);
    border-radius: 3rem;
}
button.exit-window-button:hover {
    color: var(--black);
    background-color: var(--white);
    border: 2px solid var(--white);
}




#game-exit-window {
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--white);
    text-align: center;
        font-size: 2rem;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: all 1s ease;
}
#game-exit-window.active {
    pointer-events: all;
    opacity: 1;
}
button.game-exit-window-button {
    text-align: center;
    margin: 2rem;
    width: 8rem;
    height: 4rem;
    font-size: 2rem;
    font-weight: bold;
    color: var(--white);
    background-color: transparent;
    border: 2px solid var(--white);
    border-radius: 3rem;
}
button.game-exit-window-button:hover {
    color: var(--black);
    background-color: var(--white);
    border: 2px solid var(--white);
}












@keyframes left {
    0% {left: 25%;}
    85% {left: 0%;}
    100% {left: 25%;}
}

@keyframes right {
    0% {left: 25%;}
    85% {left: 50%;}
    100% {left: 25%;}
}

@keyframes up {
    0% {top: 25%;}
    85% {top: 0%;}
    100% {top: 25%;}
}

@keyframes down {
    0% {top: 25%;}
    85% {top: 50%;}
    100% {top: 25%;}
}

@keyframes leftup {
    0% {left: 25%; top: 25%;}
    85% {left: 0%; top: 0%;}
    100% {left: 25%; top: 25%;}
}

@keyframes leftdown {
    0% {left: 25%; top: 25%;}
    85% {left: 0%; top: 50%;}
    100% {left: 25%; top: 25%;}
}

@keyframes rightup {
    0% {left: 25%; top: 25%;}
    85% {left: 50%; top: 0%;}
    100% {left: 25%; top: 25%;}
}

@keyframes rightdown {
    0% {left: 25%; top: 25%;}
    85% {left: 50%; top: 50%;}
    100% {left: 25%; top: 25%;}
}

.info {
	position: fixed;
	left: 10px;
	top: 10px;
	z-index: 1;
}

	
.swipe-screen.left {
    animation-name: left;
    }
.swipe-screen.right {
animation-name: right;
}
  .swipe-screen.up {
    animation-name: up;
  }
  .swipe-screen.down {
    animation-name: down;
  }
  .swipe-screen.leftup {
    animation-name: leftup;
  }
  .swipe-screen.rightup {
    animation-name: rightup;
  }
  .swipe-screen.leftdown {
    animation-name: leftdown;
  }
  .swipe-screen.rightdown {
    animation-name: rightdown;
  }
  
  .keys-bg {
      position: absolute;
      width: 150%;
      height: 150%;
      top: -25%;
      left: -25%;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(16px);
      opacity: 0;
      pointer-events: none;
      transition: all 0.25s ease;
  }
  
  .keys-bg.active {
      opacity: 1;
      pointer-events: all;
  }
  
  .keys-menu {
      position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -60%;
    translate: -50% -51%;
    width: 1760px;
    height: 720px;
    
    height: 680px;
    padding: 4rem 6rem;
    padding: 6rem;
    background: var(--white);
    border-radius: 4rem;
      opacity: 0;
      pointer-events: none;
      transition: all 0.25s ease;
  }
  .keys-menu.active {
      opacity: 1;
      pointer-events: all;
      z-index: 1;
  }
  .keys-picker {
      position: absolute;
    top: 50%;
    left: 50%;
    translate: -60% -60%;
    
    translate: -60% -51%;
    width: 1280px;
    height: 720px;
    height: 680px;
    padding: 6rem;
    
    padding: 4rem 6rem;
    background: var(--white);
    border-radius: 4rem;
      opacity: 0;
      pointer-events: none;
      transition: all 0.25s ease;
  }
  .keys-picker.active {
      opacity: 1;
      pointer-events: all;
  }
  .keys-menu h2 {
    font-weight: bold;
    color: #606060;
    font-size: 2rem;
}
  .keys-picker h2 {
    font-weight: bold;
    color: #606060;
    font-size: 2rem;
}
  .keys-menu h3 {
    font-weight: bold;
    color: #606060;
    font-size: 1.5rem;
}
  .keys-menu p {
    color: #606060;
    font-size: 1.5rem;
}

.keys-exit {
    position: absolute;
    right: 2rem;
    top: 2rem;
    width: 3rem;
    height: 3rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 1000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: var(--accent);
    border-radius: 50%;
    background-image: url(../images/icon-exit-1.png);
} 
.keys-exit:hover {
    scale: 1.05;
}

section.keys-menu-list {
    padding: 2rem 10rem 4rem 5rem;
    background: rgba(0,0,0,0.025);
    border-radius: 0 240px 240px 240px;
    width: 1080px;
    height: 470px;
}
.keys-menu-list ul {
    width: 100%;
    height: 360px;
    overflow: scroll;
    list-style: none;
        display: flex;
    flex-wrap: wrap;
}
img.key {
    width: 5rem;
    margin: 2rem;
    cursor: pointer;
    transition: all 0.25s ease;
}
img.key:hover {
    scale: 1.05;
}

.lock {
    position: absolute;
    top: 14rem;
    right: 11rem;
    width: 17rem;
}
.lock.wrong {
    animation: 1.3s wrong-key ease 1;
} 
@keyframes wrong-key{
 0% { transform: skewY(-15deg); }
 5% { transform: skewY(15deg); }
 10% { transform: skewY(-15deg); }
 15% { transform: skewY(15deg); }
 20% { transform: skewY(0deg); }
 100% { transform: skewY(0deg); }
}
.lock.right {
    animation: 1.3s right-key cubic-bezier(0.36, 0, 0.66, -0.56) 1;
} 
@keyframes right-key{
 0% { scale: 1; }
 100% { scale: 0; }
}
button.button-use {
    position: absolute;
    background: transparent;
    bottom: 124px;
    left: 788px;
    text-transform: uppercase;
    font-size: 1.25rem;
    border: none;
    font-weight: bold;
    color: var(--accent);
    background-image: url(../images/hud/use-btn.png);
    background-repeat: no-repeat;
    background-size: 28px;
    background-position: 0px 2px;
    /* border: 2px solid red; */
    z-index: 10000;
    height: 35px;
    width: 35px;
    padding: 2px 15px;
    display: flex;
    opacity: 0;
    pointer-events: none;
}

.blink{
    animation: blink 1s infinite;
}

@keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}

button.button-use:hover {
    background-image: url(../images/hud/use-btn_hover.png);
}


button.button-use.active {
    opacity: 0.75;
    pointer-events: all;
}
.hud.expand button.button-use.active {
    opacity: 0.75;
    pointer-events: all;
    z-index: 1;
}
.hud button.button-use.active {
    opacity: 0;
    pointer-events: none;
}
button.button-use.active:hover {
    opacity: 1;
}

.hud.expand button.button-use.blink {
    pointer-events: all;
    z-index: 1;
    animation: blink 1s infinite 0.5s;
}
.hud button.button-use.blink {
    opacity: 0;
    pointer-events: none;
    animation: none;
}


button.button-use.button-use-superjoker {
    left: 940px;
    bottom: 124px;
}
button.button-use.button-use-joker-upgrade {
    bottom: 86px;
    width: 35px;
    height: 35px;
    text-align: center;
    left: 788px;
    background-image: url(../images/hud/upgrade-btn.png);
    background-size: 28px;
}
button.button-use.button-use-joker-upgrade:hover {
    background-image: url(../images/hud/upgrade-btn_hover.png);
}
button.button-use.button-use-superjoker-downgrade {
    bottom: 86px;
    width: 35px;
    text-align: center;
    left: 940px;
    background-image: url(../images/hud/downgrade-btn.png);
    background-size: 28px;
    height: 35px;
}
button.button-use.button-use-superjoker-downgrade:hover {
    background-image: url(../images/hud/downgrade-btn_hover.png);
}
.city-anim {
    position: absolute;
    bottom: 80%;
    left: 5%;
    animation: city-animation-1 20s ease infinite, city-animation-2 10s ease infinite;
    pointer-events: none;
}
.city-1 .city-anim {
    animation: city-animation-1 50s linear infinite, city-animation-2 30s ease infinite;
}
.city-2 .city-anim {
    animation: city-animation-1 30s ease infinite, city-animation-2 25s ease infinite;
}
.city-3 .city-anim {
    animation: city-animation-1 10s linear infinite, city-animation-2 100s ease infinite;
}
.city-4 .city-anim {
    animation: city-animation-1 40s linear infinite, city-animation-2 50s ease infinite;
}
.city-2 .city-anim {
    animation: city-animation-1 20s ease infinite, city-animation-2 15s ease infinite;
}

@keyframes city-animation-1 {
    0%      {left: 10%;scale: 1 1;}
    49.9%   {left: 90%;scale: 1 1;}
    50%      {left: 90%;scale: -1 1;}
    100%      {left: 10%;scale: -1 1;}
}
@keyframes city-animation-2 {
    0%      {translate: -50% 25%}
    50%      {translate: -50% -25%}
    100%      {translate: -50% 25%}
}

img.start-game-joker-icon {
    filter: brightness(10);
    width: 2.5rem;
    margin: 0 0.25rem;
    margin-top: -0.5rem;
}

section.tutorial-screen.over-screen {
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: rgba(0,0,0,0.5);
    background-size: contain;
    transition: all 1s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    /* animation: tutorial-bg 10s ease both 1; */
    backdrop-filter: blur(16px);
}
/*@keyframes tutorial-bg {
    0%  {background-image: url(../images/tutorial-1.webp);}
    20%  {background-image: url(../images/tutorial-1.webp);}
    30%  {background-image: url(../images/tutorial-2.webp);}
    60%  {background-image: url(../images/tutorial-2.webp);}
    70%  {background-image: url(../images/tutorial-3.webp);}
    90%  {background-image: url(../images/tutorial-3.webp);}
    100%  {background-image: url(../images/tutorial-4.webp);}
}*/
section.tutorial-screen.over-screen h2 {
    font-weight: bold;
}
section.tutorial-screen.over-screen p {
    font-size: 2rem;
}
section.tutorial-screen.over-screen .tutorial-1 h2 {
    font-size: 2rem;
}
section.tutorial-screen.over-screen .tutorial-2 h2,
section.tutorial-screen.over-screen .tutorial-3 h2,
section.tutorial-screen.over-screen .tutorial-4 h2 {
    font-size: 1.5rem;
}
section.tutorial-screen.over-screen .tutorial-1 p {
    
    font-size: 1.5rem;
}
section.tutorial-screen.over-screen .tutorial-2 p,
section.tutorial-screen.over-screen .tutorial-3 p,
section.tutorial-screen.over-screen .tutorial-4 p {
    font-size: 1.5rem;
}
section.tutorial-screen.over-screen.active {
    opacity: 1;
    pointer-events: all;
}
section.tutorial-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    text-align: center;
    color: var(--white);
    animation: fade-in 0.25s ease both 1 1s;
}
section.tutorial-2 {
    position: absolute;
    top: 59%;
    left: 26%;
    /* translate: -50% -50%; */
    text-align: left;
    color: var(--white);
    animation: fade-in 0.25s ease both 1 2s;
}
section.tutorial-3 {
    position: absolute;
    top: 62%;
    right: 26%;
    /* translate: -50% -50%; */
    text-align: right;
    color: var(--white);
    animation: fade-in 0.25s ease both 1 3s;
}
section.tutorial-4 {
    position: absolute;
    top: 31%;
    right: 26%;
    /* translate: -50% -50%; */
    text-align: right;
    color: var(--white);
    animation: fade-in 0.25s ease both 1 4s;
}


button.tutorial-exit {
    border: 2px solid var(--white);
    border-radius: 2rem;
    background: transparent;
    color: var(--white);
    font-size: 1.5rem;
    width: max-content;
    margin: 0 auto;
    padding: 0.25rem 1rem;
    cursor: pointer;
    animation: fade-in 0.25s ease both 1 13s;
}
button.tutorial-exit:hover {
    border: 2px solid var(--white);
    background: var(--white);
    color: var(--accent);
}

.end-game-screen {
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(16px);
    opacity: 0;
    transition: all 1s ease;
    pointer-events: none;
    z-index: 1000;
}

.end-game-screen.active {
    opacity: 1;
    pointer-events: all;
}
section.end-game-char {
    aspect-ratio: 8/10;
    background-color: var(--white);
    height: 1000px;
    top: 50%;
    left: 35%;
    position: absolute;
    translate: -50% -50%;
    border-radius: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10rem;
}

section.end-game-details {
       aspect-ratio: 1/1;
    background-color: transparent;
    border: 3px solid var(--white);
    height: 1000px;
    top: 50%;
    left: 65%;
    position: absolute;
    translate: -50% -50%;
    border-radius: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 5rem;
}
section.end-game-details.end-game-summary {
    padding: 10rem 5rem;
}

section.end-game-details.end-game-final-message {
    padding: 10rem 5rem;
}

.end-game-avatar.avatar-coin {
    width: 14rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    margin: 1rem;
}

.end-game-screen h2 {
    /*margin-bottom: auto;*/
    padding: 0.25rem 0.5rem 0 0.5rem;
    font-size: 2.5rem;
    COLOR: var(--white);
    background: var(--accent);
    border-radius: 0.5rem;
}
.end-game-avatar.avatar-coin {
    width: 14rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    margin: 1rem;
}


.end-game-resillience-bar {
    width: 500px;
    background: #ccc;
    border-radius: 1rem;
    height: 2rem;
    /* position: absolute; */
    position: relative;
}
.end-game-resillience-bar-progress {
    background: var(--accent);
    color: var(--white);
    height: 2rem;
    position: relative;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 6px 6px;
    justify-content: flex-end;
}
section.end-game-details h3.game-over-h3 {
    font-size: 6rem;
    color: var(--white);
    font-weight: bold;
    margin: -5rem;
}
.end-game-char p {
    text-align: center;
    font-size: 1.75rem;
}
section.end-game-details p {
    text-align: center;
    font-size: 1.75rem;
    color: var(--white);
}

.end-screen-triangle {
    width: 3rem;
    height: 1rem;
    border-left: 1.5rem transparent solid;
    border-top: var(--accent) 1.5rem solid;
    border-right: 1.5rem transparent solid;
    margin-top: -1rem;
}
section.end-game-char {
    aspect-ratio: 8/10;
    background-color: var(--white);
    height: 1000px;
    top: 50%;
    left: 35%;
    position: absolute;
    translate: -50% -50%;
    border-radius: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10rem;
    /* position: relative; */
}
section.end-game-char:after {
    content: "";
    position: absolute;
    right: -2.9rem;
    top: calc(50% - 1.5rem);
    border-left: 4rem solid var(--white);
    border-top: 3rem solid transparent;
    border-bottom: 3rem solid transparent;
}

button.end-game-screen-button {
    border: 3px solid var(--accent);
    border-radius: 2rem;
    color: var(--accent);
    background: var(--white);
    font-size: 2rem;
    width: max-content;
    margin: 0 2rem;
    padding: 0.5rem 2rem;
    cursor: pointer;
    min-width: 13rem;
}

button.end-game-screen-button:hover {
    border: 3px solid var(--accent);
    color: var(--white);
    background: var(--accent);
}


.end-game-team-resillience-bar {
    /* width: 500px;  */
    width: 100%;
    background: var(--white);
    border-radius: 1.5rem;
    height: 3rem;
    /* position: absolute; */
        margin-top: -7rem;
}
.end-game-team-resillience-bar-progress {
    background: var(--accent);
    color: var(--white);
    height: 3rem;
    position: absolute;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 6px 6px;
    justify-content: flex-end;
}
.end-screen-jokers-points {
    display: flex;
}
.end-screen-jokers, 
.end-screen-points {
    margin: 0 4rem;
}
.end-screen-jokers h3,
.end-screen-points h3 {
        font-weight: bold;
    margin: 0;
    font-size: 1.75rem;
    text-transform: uppercase;
    color: var(--white);
    width: 18rem;
    margin-right: -3rem;
}
.end-screen-keys-box {
    background: var(--white);
    color: var(--accent);
    padding: 0px 2rem;
    font-size: 3rem;
    font-weight: bold;
    border-radius: 0 3rem 3rem 3rem;
    width: 15rem;
    text-align: right;
    background-size: 3rem;
    background-image: url(../images/hud/icon-key.png);
    background-position: 3rem center;
    background-repeat: no-repeat;
}
.end-screen-points-box {
    background: var(--white);
    color: var(--accent);
    padding: 0px 1rem;
    font-size: 3rem;
    font-weight: bold;
    border-radius: 0 3rem 3rem 3rem;
    width: 15rem;
    text-align: right;
    background-size: 4rem;
    /*background-image: url(../images/hud/icon-joker.png);*/
    background-position: 3rem center;
    background-repeat: no-repeat;
}
span.end-screen-point-text {
    font-size: 1.5rem;
}

.end-game-final-message h2{
    margin-top: -65px !important;
}

.end-game-final-message p{
    padding-top: 1rem !important;
}

.final-message-text{
    color: white;
    text-align: center;
    padding-bottom: 2rem;
    padding-top: 3rem;
    font-size: 1.7rem;
}


/* PRELOAD ALL IMAGES */
#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(../images/cities/sky.png);
    background-image: url(../images/cities/1-B1.png);
    background-image: url(../images/cities/1-B2.png);
    background-image: url(../images/cities/1-B3.png);
    background-image: url(../images/cities/1-B4.png);
    background-image: url(../images/cities/1-B5.png);
    background-image: url(../images/cities/1-B6.png);
    background-image: url(../images/cities/2-B1.png);
    background-image: url(../images/cities/2-B2.png);
    background-image: url(../images/cities/2-B3.png);
    background-image: url(../images/cities/2-B4.png);
    background-image: url(../images/cities/2-B5.png);
    background-image: url(../images/cities/2-B6.png);
    background-image: url(../images/cities/3-B1.png);
    background-image: url(../images/cities/3-B2.png);
    background-image: url(../images/cities/3-B3.png);
    background-image: url(../images/cities/3-B4.png);
    background-image: url(../images/cities/3-B5.png);
    background-image: url(../images/cities/3-B6.png);
    background-image: url(../images/cities/4-B1.png);
    background-image: url(../images/cities/4-B2.png);
    background-image: url(../images/cities/4-B3.png);
    background-image: url(../images/cities/4-B4.png);
    background-image: url(../images/cities/4-B5.png);
    background-image: url(../images/cities/4-B6.png);
    background-image: url(../images/keys/key-1-triangle.png);
    background-image: url(../images/keys/key-2-square.png);
    background-image: url(../images/keys/key-3-circle.png);
    background-image: url(../images/keys/key-4-triangle.png);
    background-image: url(../images/keys/key-5-triangle.png);
    background-image: url(../images/keys/key-6-circle.png);
    background-image: url(../images/keys/key-7-triangle.png);
    background-image: url(../images/keys/key-8-square.png);
    background-image: url(../images/keys/key-9-circle.png);
    background-image: url(../images/keys/key-10-triangle.png);
    background-image: url(../images/keys/key-11-square.png);
    background-image: url(../images/keys/key-12-circle.png);
    background-image: url(../images/keys/key-13-triangle.png);
    background-image: url(../images/keys/key-14-square.png);
    background-image: url(../images/keys/key-15-circle.png);
    background-image: url(../images/keys/key-16-triangle.png);
    background-image: url(../images/keys/key-17-square.png);
    background-image: url(../images/keys/key-18-circle.png);
    background-image: url(../images/keys/key-19-triangle.png);
    background-image: url(../images/keys/key-20-square.png);
    background-image: url(../images/keys/key-21-circle.png);
    background-image: url(../images/keys/key-22-triangle.png);
    background-image: url(../images/keys/key-23-square.png);
    background-image: url(../images/keys/key-24-circle.png);
    background-image: url(../images/keys/key-25-triangle.png);
    background-image: url(../images/keys/key-26-square.png);
    background-image: url(../images/keys/key-27-circle.png);
    background-image: url(../images/keys/key-28-triangle.png);
    background-image: url(../images/keys/key-29-square.png);
    background-image: url(../images/keys/key-30-circle.png);
    background-image: url();

}