@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*
{
    margin: 0;
    padding: 0;

    box-sizing: border-box;

    text-decoration: none;

    font-family: "Poppins", sans-serif;
}

body
{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #00073c;
}

/* GLOBAL */

.center
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.screen
{
    position: absolute;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.ignore-events
{
    pointer-events: none;
}

.hidden
{
    display: none;
}

.open
{
    z-index: 99;
}

.camera-capture
{
    width: auto;
    height: 100%;

    position: absolute;

    z-index: -100;
}

.camera-capture-canvas
{
    width: 100%;
    height: 100%;
}

/* LOAD SCREEN */

.load-panel
{
    flex-direction: column;
    gap: 2rem;
    height: 100%;
}

.load-panel-bg, .load-panel-bg-mobile
{
    position: absolute;

    width: 100%;
    height: 100%;

    z-index: -1;
}

.load-panel-bg-mobile
{
    display: none;
}

.load-panel-logo
{
    width: 300px;
    height: auto;
}

.load-panel-car
{
    width: 400px;
    height: auto;
}

.load-panel-bar-content
{
    flex-direction: column;
    gap: 1rem;
    width: 24%;
}

.load-panel-bar
{
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.load-panel-bar-bg
{
    position: absolute;
    width: 100%;
    height: auto;
    z-index: -1;
}

.load-panel-bar-fill
{
    width: 0px;
    height: 0.53vw;
    margin-left: 1.4%;
}

.load-panel-bar-percentage
{
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
	-webkit-text-stroke: 1px #6cb1cc;
	text-shadow: 0px 0px 15px rgba(108,177,204,1);
    min-height: 30px;
}

.load-decoration
{
    position: absolute;

    max-width: 100px;

    width: 25%;
    height: auto;

    z-index: -1;
}

#load-decoration-0
{
    transform: rotateZ(-90deg);

    top: 5%;
    left: 30%;   
}

#load-decoration-1
{ 
    transform: rotateZ(-90deg);

    top: 10%;
    right: 30%;   
}

#load-decoration-2
{
    right: 40%;
    bottom: 2.5%;

    transform: rotateZ(60deg);

    scale: 0.75;
}

#load-decoration-3
{
    top: 40%;
    left: 35%;   

    scale: 0.4;
}

/* SPLASH SCREEN */

.splash-panel
{
    flex-direction: column;
    justify-content: space-between;
}

.splash-panel-bg, .splash-panel-bg-mobile
{
    position: absolute;
    min-width: 100%;
    height: 100%;
    z-index: -100;
}

.splash-panel-bg-mobile
{
    display: none;
}

.splash-panel-logo-content
{
    margin-top: 2rem;

    position: relative;

    flex-direction: column;

    width: 40vh;
}

.splash-panel-logo-bg
{
    position: absolute;

    width: 80%;
    height: auto;

    z-index: -1;
}

.splash-panel-logo-title
{
    width: 100%;
    height: auto;
}

.splash-panel-logo-subtitle
{
    width: 75%;
    height: auto;
}

.splash-panel-content
{
    margin-bottom: 2rem;
    flex-direction: column;
    bottom: 0;
    position: absolute;
}

.splash-panel-buttons-content
{
    width: 100%;
}

.top-buttons {
    position: absolute;
    top: 3vh;
    right: 4vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.splash-panel-button-sound, .splash-panel-button-help
{
    width: 10vh;
    height: auto;
}

.splash-panel-button-play
{
    width: 15vh;
    height: auto;
}

.splash-panel-footer-content
{
    flex-direction: column;
    gap: 1rem;
}

.splash-panel-bestscore-content
{
    position: relative;
}

.splash-panel-bestscore-bg
{
    position: absolute;

    width: 200px;
    height: auto;

    z-index: -1;
}

.splash-panel-bestscore-title, .splash-panel-bestscore
{
	text-transform: uppercase;
    text-align: center;

    color: white;
    font-weight: 700;
	-webkit-text-stroke: 0.5px #e37f1e;
	text-shadow: 0px 0px 15px rgba(227,127,30,1);
}

.splash-panel-bestscore-title
{
    font-size: 1rem;
}

.splash-panel-bestscore
{
    font-size: 1.25rem;
}

.splash-panel-button-collection, .splash-panel-button-powerup
{
    position: relative;
    width: 10vh;
    height: auto;
}

.splash-panel-button-collection
{
    right: 0vw;
    top: 0px;
}

.splash-panel-button-powerup
{
    right: 0vw;
    top: 0px;
}

.splash-panel-street, .splash-panel-car
{
    position: absolute;
    z-index: -1;
}

.splash-panel-street
{
    width: 100%;
    height: 100%;

    background-position: center center;
}

.splash-panel-car
{
    width: 40vh;
    height: auto;
    bottom: 30%;
}

.splash-panel-footer-yummi
{
    display: none;
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 0;
    background-color: white;
}

.splash-decoration
{
    position: absolute;

    z-index: -1;
}

#splash-decoration-0
{
    transform: rotateZ(180deg);

    top: 5%;
    left: 25%;   

    width: 125px;
    height: auto;
}

#splash-decoration-1
{ 
    top: 30%;
    right:5%;

    width: 125px;
    height: auto;
}

#splash-decoration-2
{
    left: 5%;
    bottom: 5%;

    width: 175px;
    height: auto;

    transform: rotateZ(90deg);
}

#splash-decoration-3
{
    bottom: 40%;
    right: 30%;   

    width: 50px;
    height: auto;

    transform: rotateZ(60deg);
}

#splash-decoration-4
{
    left: 25%;
    bottom: 25%;

    transform: rotateZ(180deg);
}

#splash-decoration-5
{
    left: 25%;
    top: 35%;
    
    width: 175px;
    height: auto;
}

#splash-decoration-6
{
    right: 20%;
    bottom: 5%;

    width: 225px;
    height: auto;
}

#splash-decoration-7
{
    top: 5%;
    right: 27.5%;

    width: 150px;
    height: auto;
}

/* PAUSE PANEL */


.pause-panel-content
{
    position: relative;

    flex-direction: column;

    gap: 1rem;

    width: 400px;
    height: max-content;

    padding: 3rem 2rem;
}

.pause-panel-bg-opacity
{
    position: absolute;
    z-index: -1;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.75);
}

.pause-panel-bg
{
    position: absolute;

    width: 100%;
    height: 100%;

    transform: translateX(5px);
}

.pause-panel-title
{
    bottom: 100%;
    transform: translateY(65px);

    position: absolute;

    width: 92.5%;
    height: auto;
}

.pause-panel-score-content
{
    flex-direction: column;

    gap: 10px;
}

.pause-panel-current-score-content
{
    position: relative;
}

.pause-panel-current-score-bg
{
    position: absolute;
    z-index: -1;

    width: 200px;
    height: auto;
}

.pause-panel-current-score-title
{
    text-transform: uppercase;

    color: white;

    font-weight: 700;
    font-size: 1rem;
}

.pause-panel-current-score
{
    text-transform: uppercase;

    color: white;

    font-weight: 700;
    font-size: 1rem;
	-webkit-text-stroke: 1px #6cb1cc;
	text-shadow: 0px 0px 15px rgba(108,177,204,1);
}

.pause-panel-separation
{
    width: 100%;
    height: 3px;

    border-radius: 15px;

    background-color: white;
    filter: drop-shadow(0px 0px 2.5px white);
}

.pause-panel-buttons-content
{
    width: 100%;
    gap: 10px;
}

.pause-panel-button-sound, .pause-panel-button-help
{
    width: 60px;
    height: auto;
}

.pause-panel-button-play
{
    width: 125px;
    height: auto;
}

/* COLLECTION SLIDER */

.collection-current-content
{
    flex-direction: column;

    gap:0.75rem;
}

.collection-current-slider
{
    flex-direction: column;
}

.collection-item-row
{
    gap: 2rem;
}

.collection-current-index
{
    gap: 0.5rem;
}

.collection-current-dot
{
    width: 15px;
    height: 15px;

    background-color: white;

    border-radius: 100%;
}

.collection-current-dot-selected
{
    background-color: #508bfb;
    filter: drop-shadow(0px 0px 5px #508bfb);
}

/* COLLECTION ITEM */

.collection-item-content
{
    width: 75px;
    height: 75px;

    position: relative;
}

.collection-item
{
    width: 100%;
    height: 100%;
}

.collection-item-amount-content
{
    position: absolute;

    right: 10%;
    bottom: 10%;

    background-color: white;

    width: 20px;
    height: 20px;

    border-radius: 100%;
}

.collection-item-amount
{
    font-weight: 700;
    font-size: 1rem;
}

/* COLLECTION PANEL */

.collection-panel
{
    flex-direction: column;

    padding: 2rem;

    gap: 1.5rem;
}

.collection-panel-logo
{
    width: 125px;
    height: auto; 
}

.collection-panel-close-button
{
    width: 75px;
    height: auto;
}

.collection-panel-bg-opacity
{
    position: absolute;

    width: 100%;
    height: 100%;

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

    z-index: -1;
}

.collection-panel-content
{
    position: relative;

    width: 450px;
    height: 300px;

    padding: 1rem;
}

.collection-panel-bg
{
    position: absolute;

    width: 100%;
    height: 100%;

    transform: translate(5px, 5px);
}

.collection-panel-title
{
    position: absolute;

    width: 98%;
    height: auto;

    bottom: 100%;
    transform: translateY(65px);
    
}

.collection-panel-grid
{
    padding: 1.5rem;
    gap: 1.5rem;

    width: 100%;
    height: 100%;

    overflow: hidden;

    flex-direction: column;
}

.collection-panel-grid-row
{
    gap: 1.5rem;
}

.collection-panel-reward-content
{
    flex-direction: column;
}

.reward-title-content
{
    position: relative;
}

.reward-shine, .reward-coins
{
    position: absolute;
}

.reward-shine
{
    z-index: -1;

    width: 100%;
    height: auto;

    opacity: 0.5;
}

.reward-coins
{
    width: 75px;
    height: auto;

    left: 100px;
    bottom: 50px;
}

.reward-title
{
    text-transform: uppercase;
    text-align: center;

    color: white;

    font-weight: 700;
    font-size: 3rem;
	-webkit-text-stroke: 1px #6cb1cc;
	text-shadow: 0px 0px 15px rgba(108,177,204,1);
}

.reward-subtitle
{
    text-transform: uppercase;
    text-align: center;

    color: white;

    font-weight: 300;
    font-size: 1rem;
	text-shadow: 0px 0px 15px rgba(108,177,204,1);
}

.reward-collection-name
{
    text-transform: uppercase;
    text-align: center;

    color: white;

    font-weight: 700;
    font-size: 2rem;
	-webkit-text-stroke: 1px #6cb1cc;
	text-shadow: 0px 0px 15px rgba(108,177,204,1);
}

/* WIN PANEL */

.win-panel-bg-opacity
{
    position: absolute;

    width: 100%;
    height: 100%;

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

    z-index: -1;
}

.win-panel-content
{
    position: relative;

    width: 400px;
    height: max-content;

    flex-direction: column;

    transform: translateX(-10px);

    padding: 3rem 2rem;
}

.win-panel-bg
{
    position: absolute;

    width: 100%;
    height: 100%;

    transform: translate(10px,10px);
}

.win-panel-title
{
    position: absolute;

    width: 90%;
    height: auto;

    bottom: 100%;
    transform: translateY(80px);
}

.win-panel-section
{
    flex-direction: column;
}

.win-panel-section-title
{
    text-transform: uppercase;
    text-align: center;

    width: 100%;
    height: 15px;

    color: white;

    font-weight: 700;
    font-size: 1rem;
	text-shadow: 0px 0px 15px rgba(255,255,255,1);
}

.win-panel-section-content
{
    position: relative;

    width: 175px;
    height: 60px;
}

.win-panel-section-bg
{
    position: absolute;

    width: 100%;
    height: 100%;

    z-index: -1;
}

.win-panel-section-value
{
    text-transform: uppercase;

    color: white;

    font-size: 1rem;
    font-weight: 700;
}

#win-panel-best-score-text
{
    -webkit-text-stroke: 0.5px #e37f1e;
    text-shadow: 0px 0px 15px rgba(227,127,30,1);
}

#win-panel-extra-bonus-text
{
	-webkit-text-stroke: 1px #6cb1cc;
	text-shadow: 0px 0px 15px rgba(108,177,204,1);
}

#win-panel-reward-bonus-text
{
	-webkit-text-stroke: 1px rgb(150, 105, 235);
	text-shadow: 0px 0px 15px rgba(150, 105, 235,1);
}

#win-panel-score-text
{
	-webkit-text-stroke: 1px #6cb1cc;
	text-shadow: 0px 0px 15px rgba(108,177,204,1);
}

.win-panel-separation
{
    width: 100%;
    height: 3px;

    border-radius: 15px;

    background-color: white;
    filter: drop-shadow(0px 0px 2.5px white);

    margin: 1rem;
}

.win-panel-buttons-content
{
    gap: 1rem;
}

.win-panel-input-content
{
    flex-direction: column;
    gap: 1rem;
}

.win-panel-input
{
    width: 200px;
    height: 40px;

    padding: 0.5rem;

    background: none;

    border: 3px solid white;
    border-radius: 25px;

    color: white;

    font-weight: 700;
    font-size: 0.8rem;

    text-align: center;
}

.win-panel-input:focus
{
    outline: none;
}

.win-panel-input::placeholder
{
    font-weight: 500;

    color: white;
    opacity: 0.5;
}

.win-panel-continue-button
{
    width: 100px;
    height: auto;
}

/* POWERUP PANEL */

.powerup-panel
{
    flex-direction: column;
}

.powerup-panel-bg-opacity
{
    position: absolute;

    width: 100%;
    height: 100%;

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

    z-index: -1;
}

.powerup-panel-content
{
    scale: 0.75;

    position: relative;

    flex-direction: column;

    width: 525px;
    height: 600px;

    padding: 4rem 2rem;
}

.powerup-panel-content-bg
{
    width: 100%;
    height: 100%;

    transform: translateX(7.5px);

    position: absolute;

    z-index: -1;
}

.powerup-panel-content-title
{
    position: absolute;

    width: 95%;
    height: auto;

    bottom: 105%;
    transform: translateY(125px);
}

.powerup-player-icon
{
    width: 50%;
    height: auto;
}

.powerup-player-coins-content
{
    position: relative;

    width: 200px;
    height: 75px;
}

.powerup-player-coins-bg
{
    width: 100%;
    height: auto;

    position: absolute;

    z-index: -1;
}

.powerup-player-coins-icon
{
    position: absolute;

    left: 0%;

    width: 70px;
    height: auto;
}

.powerup-player-coins
{
    text-align: center;

    padding: 2rem;
    margin-left: 25px;

    width: 100%;
    height: 100%;

    text-transform: uppercase;

    color: white;

    font-size: 1.25rem;
    font-weight: 700;

	text-shadow: 0px 0px 15px rgba(108,177,204,1);
}

.powerup-content
{
    gap: 0.5rem;
}

.powerup
{
    width: 75px;
    height: 300px;

    flex-direction: column;
}

.powerup-title
{
    text-transform: uppercase;
    text-align: center;

    line-height: 0.75rem;

    font-size: 0.6rem;
    font-weight: 600;

    color: white;
}

.powerup-icon-content
{
    position: relative;

    width: 75px;
    height: 75px;

    margin: 0.5rem;
}

.powerup-icon-bg
{
    position: absolute;

    width: 100%;
    height: 100%;

    z-index: -1;
}

.powerup-icon
{
    width: 50%;
    height: auto;
}

#speed-pw .powerup-icon
{
    width: 25%;
} 

.powerup-amount-content
{
    width: 100%;
    height: 17.5px;

    gap: 5px;
}

.powerup-amount
{
    width: 7.5px;
    height: 100%;

    border-radius: 15px;

    background-color: white;

    opacity: 0.75;
}

.powerup-amount-bought
{
    opacity: 1;
}

.powerup-price
{
    margin-top: 0.5rem;

    width: 75%;

    border-radius: 15px;

    background-color: white;

    font-size: 1rem;
    font-weight: 700;

    color: black;
}

.powerup-multiplier-content
{
    position: absolute;

    width: 30px;
    height: 30px;

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

.powerup-multiplier-bg
{
    position: absolute;

    width: 100%;
    height: 100%;

    z-index: -1;
}

.powerup-multiplier
{
    font-size: 0.75rem;
    font-weight: 600;

    color: white;
}

.powerup-icon-plus
{
    width: 50%;
    height: auto;

    filter: brightness(50%);
}

.powerup-plus
{
    position: absolute;

    font-size: 1rem;
    font-weight: 700;

    color: white;
}

.powerup-panel-close-button
{
    width: 75px;
    height: 75px;
}

/* HELP PANEL */

.help-panel-all-content
{
    width: 100%;
    height: 100%;

    flex-direction: column;
}

.help-panel-bg-opacity
{
    position: absolute;

    width: 100%;
    height: 100%;

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

    z-index: -1;
}

.help-panel-content
{
    margin-top: 4rem;

    position: relative;

    padding: 2rem;

    width: 400px;
    height: 250px;

    flex-direction: column;
}

.help-panel-bg
{
    position: absolute;

    width: 100%;
    height: 100%;

    transform: translateX(7.5px);

    z-index: -1;
}

.help-panel-title
{
    position: absolute;

    width: 87.5%;
    height: auto;

    bottom: 100%;
    transform: translateY(35px);
}

.help-panel-continue-button
{
    position: absolute;

    width: 60px;
    height: 60px;

    right: 25px;
    bottom: 25px;
}

.help-panel-text
{
    text-align: center;

    padding: 2rem;

    width: 100%;
    height: 100%;

    text-transform: uppercase;

    color: white;

    font-size: 1.25rem;
    font-weight: 700;

	text-shadow: 0px 0px 15px rgba(108,177,204,1);
}

.help-panel-illustration-content
{
    width: 100%;
    height: 325px;
}

.help-panel-close-button
{
    width: 75px;
    height: 75px;

    margin-bottom: 2rem;
}

.help-panel-illustration
{
    width: 100%;
    height: 100%;
}

#help-panel-illustration-0
{
    flex-direction: column;

    gap: 1rem;
}

#help-panel-illustrator-0-obstacle
{
    width: 50px;
    height: auto;
}

.help-panel-illustrator-car
{
    width: 125px;
    height: auto;
}

#help-panel-illustration-1
{
    flex-direction: column;

    gap: 1rem;
}

#help-panel-illustrator-1-bonus-content
{
    flex-direction: column;
}

#help-panel-illustrator-1-bonus
{
    width: 75px;
    height: 75px;
}

#help-panel-illustrator-1-shadow
{
    width: 50px;
    height: auto;
}

#help-panel-illustration-2
{
    flex-direction: column;
}

#help-panel-illustration-2-powerup-icon
{
    width: 200px;
    height: 200px;
}

#help-panel-illustration-2-powerup-title
{
    text-transform: uppercase;
    text-align: center;

    font-size: 1.25rem;
    font-weight: 700;

    color: white;
}

.help-panel-index 
{
    position: absolute;

    width: 100%;

    gap: 0.5rem;

    bottom: 15%;
}

.help-panel-dot
{
    width: 15px;
    height: 15px;

    background-color: white;

    border-radius: 100%;
}

.help-panel-dot-selected
{
    background-color: #508bfb;
    filter: drop-shadow(0px 0px 5px #508bfb);
}

/* HUD */

.hud-panel
{
    flex-direction: column;

    justify-content: space-between;

    padding: 1rem;
}

.hud-panel-header
{
    width: 100%;

    justify-content: space-between;
    align-items: flex-start;
}

.hud-panel-takes-content
{
    flex-direction: column;

    gap: 2rem;
}

.hud-panel-coin-amount-content
{
    right: 20%;
    bottom: 20%;
}

.hud-panel-info-content
{
    flex-direction: column;
}

.hud-panel-distance-content
{
    position: relative;

    width: 250px;
    height: 75px;
}

.hud-panel-distance-bg
{
    position: absolute;

    width: 100%;
    height: 100%;

    z-index: -1;
}

.hud-panel-distance
{
    text-align: center;

    padding: 2rem;

    width: 100%;
    height: 100%;

    text-transform: uppercase;

    color: white;

    font-size: 1.25rem;
    font-weight: 700;

	text-shadow: 0px 0px 15px rgba(108,177,204,1);
}

.hud-panel-life-content
{
    gap: 0.5rem;
}

.hud-panel-life
{
    width: 40px;
    height: auto;
}

.hud-panel-life-damage
{
    filter:brightness(60%);
}

.hud-panel-pause-button
{
    width: 75px;
    height: auto;
}

.hud-panel-footer
{
    display: none;

    width: 100%;

    justify-content: space-between;

    margin-bottom: 1rem;
}

.hud-panel-left-button, .hud-panel-right-button
{
    width: 105px;
    height: auto;
}

.hud-panel-left-button
{
    transform: rotateZ(180deg);
}

.hud-panel-indicator-content
{
    flex-direction: column;

    width: 75px;
    height: max-content;

    gap: 0.5rem;
}

.hud-take-icon
{
    width: 75px;
    height: 75px;
}

.pw-item-bg
{
    position: absolute;

    width: 100%;
    height: auto;
}

.pw-item-icon
{
    width: 50%;
    height: auto;
}

.hud-speedup
{
    width: 30%;
}

.pw-indicator-icon
{
    width: 25px;
    height: auto;
}

.pw-indicator-bar-content
{
    position: relative;
    width: 50px;
}

.pw-indicator-bar-bg
{
    position: absolute;

    width: 100%;
    height: 20px;

    z-index: -1;
}

.pw-indicator-bar
{
    width: 100%;
    height: 10px;

    margin-left: 3px;
    margin-right: 3px;

    background-color: white;

    border-radius: 3px;

    transform-origin: 0% 0%;
}

.coutdown
{
    width: max-content;
    height: max-content;
}

/* TRANSITION */

.transition
{
    width: 100%;
    height: 100%;

    z-index: 99;
}

/* ROTATE */

.rotate-screen
{
    position: absolute;

    width: 100%;
    height: 100%;

    z-index: 1000;

    display: none;
}

/* MINIGAME */

.minigame-panel
{
    flex-direction: column;
    justify-content: space-between;
}

.minigame-panel-header, .minigame-panel-footer
{
    flex-direction: column;
    gap: 1rem;
}

.minigame-panel-bg-opacity
{
    position: absolute;

    width: 100%;
    height: 100%;

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

    z-index: -1;
}

.minigame-panel-title
{
    height: 100px;
    width: auto;
}

.minigame-panel-subtitle
{
    text-align: center;

    width: 100%;
    height: 100%;

    text-transform: uppercase;

    color: white;

    font-size: 1rem;
    font-weight: 700;

	text-shadow: 0px 0px 15px rgba(108,177,204,1);
}

.minigame-panel-timer-content
{
    width: max-content;
    height: max-content;

    border: 5px solid rgba(255,255,255,1);
    filter: drop-shadow(0px 0px 5px #508bfb);

    border-radius: 50%;
}

.timer-progress
{
    position: relative;

    border-radius: 50%;

    background: conic-gradient(rgba(255,255,255,1) 360deg, rgba(255,255,255,0) 0deg);
    filter: drop-shadow(0px 0px 5px #508bfb);

    width: 100px;
    height: 100px;
}

.minigame-panel-collections
{
    position: relative;

    max-width: 500px;

    width: 100%;
    height: 100%;
}

.minigame-panel-collection-item
{
    position: absolute;

    user-select: none;
    -webkit-user-drag: none;
}

.minigame-panel-close-button
{
    width: 75px;
    height: auto;
}

.minigame-panel-promo
{
    max-height: 150px;
    width: auto;
}

.minigame-win-panel
{
    flex-direction: column;

    gap: 2rem;
}

.minigame-win-panel-button-close
{
    width: 75px;
    height: auto;
}

.minigame-win-panel-content
{
    max-width: 500px;
    width: 90%;
    height: max-content;

    padding: 1rem;

    border: 7.5px solid white;
    border-radius: 50px;

    flex-direction: column;
}

.minigame-win-panel-slider-title
{
    text-align: center;

    width: 100%;

    text-transform: uppercase;

    color: white;

    font-size: 1rem;
    font-weight: 700;

	text-shadow: 0px 0px 15px rgba(108,177,204,1);
}

.minigame-win-panel-title
{
    width: 100%;
    height: auto;
}

/* MOBILE RESPONSIVE */

@supports (padding-top: env(safe-area-inset-top)) 
{
    body 
    {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        height: calc(100% + (var(--safe-area-inset-top) + var(--safe-area-inset-bottom)));
    }
}

@media screen and (max-width:1600px)
{
    .splash-panel-car {
        max-width: 35vw;
    }
    .splash-panel-logo-content {
        max-width: 25vw;
    }
}

@media screen and (max-width:1000px) and (orientation:landscape)
{
    .rotate-screen
    {
        display: block;
    }
}

@media screen and (min-width:560px) and (orientation:portrait) 
{
    .splash-panel-button-collection, .splash-panel-button-powerup, .splash-panel-button-help, .splash-panel-button-sound
    {
        width: 75px;
    }

    .splash-panel-button-play
    {
        width: 125px;
    }

    .splash-panel-bestscore-title
    {
        font-size: 0.75rem;
    }

    .splash-panel-bestscore
    {
        font-size: 1rem;
    }

    .splash-panel-bestscore-content
    {
        width: 150px;
    }

    .splash-panel-bestscore-bg
    {
        width: 100%;
        height: auto;
    }

    .splash-panel-button-collection
    {
        margin-top: 1rem;
        top: 20px;
        right: 20px;
    }

    .splash-panel-button-powerup
    {
        margin-top: 1rem;
        top: 20px;
    }

    .splash-panel-car
    {
        width: 80%;
        bottom: 25%;
    }

    #splash-decoration-0, #splash-decoration-4, #splash-decoration-5, #splash-decoration-6, #splash-decoration-7
    {
        display: none;
    }

    #splash-decoration-1
    {
        width: 75px;
        left: 10%;
    }

    #splash-decoration-2
    {
        width: 75px;
        top: 10%;
        left: 75%;
    }

    #splash-decoration-3
    {
        transform: rotateZ(-110deg);

        top:5%;
        left:5%;

        width: 50px;
    }

      /* SPLASH */

    .splash-panel-bg
    {
        display: none;
    }

    .splash-panel-bg-mobile, .splash-panel-footer-yummi
    {
        display: block;
        margin-bottom: 0;
    }

    .splash-panel-logo-content
    {
        width: 100px;
    }

    .splash-panel-content
    {
        margin: 0;

        position: absolute;

        bottom: 150px;
    } 
}

@media screen and (max-width:1000px) and (orientation:portrait) 
{
    /* ROTATE */

    .rotate-screen
    {
        display: none;
    }

    /* LOAD */

    #load-decoration-0
    {
        transform: rotateZ(-90deg);

        top: 5%;
        left: 5%;   
    }

    #load-decoration-1
    { 
        transform: rotateZ(-90deg);

        top: 10%;
        right: 5%;   
    }

    #load-decoration-2
    {
        right: 10%;
        bottom: 2.5%;

        transform: rotateZ(60deg);

        scale: 0.75;
    }

    #load-decoration-3
    {
        top: 40%;
        left: 10%;   

        scale: 0.4;
    }

    .load-panel-bar-bg
    {
        width: 100%;
    }

    .load-panel-bar 
    {
        position: relative;
        display: flex;
        justify-content: flex-start;
    }

    .load-panel-bar-fill
    {
        width: 0%;
        height: 1.8vw;
        margin-left: 1.4vw;
    }

    .load-panel-car
    {
        width: 60%;
    }

    .load-panel-bg
    {
        display: none;
    }

    .load-panel-bg-mobile
    {
        display: block;
    }

    /* SPLASH */

    .splash-panel-bg
    {
        display: none;
    }

    .splash-panel-bg-mobile, .splash-panel-footer-yummi
    {
        display: block;
        height: 100%;
    }

    .splash-panel-footer-yummi 
    {
        width: auto;
        min-width: 100%;
        height: 8%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
    }

    .splash-panel-footer-yummi img 
    {
        height: 100%;
        display: block;
        margin: 0 auto;
    }

    .splash-panel-logo-content
    {
        width: 70%;
        margin-top: 7%;
        max-width: none;
    }

    .splash-panel-content
    {
        margin: 0;
        position: absolute;
        bottom: 10%;
    }

    .splash-panel-button-collection, .splash-panel-button-powerup, .splash-panel-button-help, .splash-panel-button-sound
    {
        width: 7vh;
    }

    .splash-panel-button-play
    {
        width: 13vh;
    }

    .splash-panel-footer-content 
    {
        gap: 1vh;
    }

    .splash-panel-bestscore-title
    {
        font-size: 0.75rem;
    }

    .splash-panel-bestscore
    {
        font-size: 1rem;
    }

    .splash-panel-bestscore-content
    {
        width: 150px;
    }

    .splash-panel-bestscore-bg
    {
        width: 100%;
        height: auto;
    }

    .splash-panel-button-collection
    {
        margin-top: 0;
        top: 1vh;
        right: 0vw;
    }

    .splash-panel-button-powerup
    {
        margin-top: 0;
        top: 1vh;
        right: 0vw;
    }

    .load-panel-bar-content
    {
        gap: 1vh;
        width: 72%;
    }

    .splash-panel-car
    {
        width: 60%;
        bottom: 29%;
        max-width: none;
    }

    #splash-decoration-0, #splash-decoration-4, #splash-decoration-5, #splash-decoration-6, #splash-decoration-7
    {
        display: none;
    }

    #splash-decoration-1
    {
        width: 75px;

        left: 10%;
    }

    #splash-decoration-2
    {
        width: 75px;

        top: 0%;
        left: 75%;
    }

    #splash-decoration-3
    {
        transform: rotateZ(-110deg);

        top:5%;
        left:5%;

        width: 50px;
    }

    /* COLLECTION */

    .collection-panel-content
    {
        width: 95%;
    }

    .collection-panel-bg
    {
        width: 100%;
    }

    .hud-take-icon
    {
        width: 60px;
        height: 60px;
    }

    .collection-item-amount
    {
        font-size: 0.75rem;
    }

    .collection-panel-grid-row
    {
        width: 100%;
    }

    .collection-panel-logo
    {
        width: 100px;
    }

    /* POWERUP */

    .powerup-panel-content
    {
        scale: 1;
        width: 90%;
    }

    .powerup-panel-content-bg
    {
        width: 100%;
    }

    .powerup-content
    {
        transform: scale(0.8);
        gap: 2rem;
    }

    .powerup
    {
        width: 50px;
    }

    .powerup-icon-content
    {
        width: 75px;
        height: 75px;
    }

    .powerup-icon-bg
    {
        width: 100%;
    }

    .powerup-icon
    {
        width: 40px;
    }

    #speed-pw .powerup-icon
    {
        width: 20px;
    } 

    .powerup-title
    {
        font-size: 0.6rem;
    }

    /* HELP */

    .help-panel-content
    {
        width: 90%;
    }

    /* PAUSE */

    .pause-panel-content
    {
        width: 90%;
    }

    .pause-panel-current-score-title
    {
        font-size: 0.75rem;
    }

    .pause-panel-current-score-bg
    {
        width: 150px;
    }

    .pause-panel-current-score
    {
        font-size: 0.75;
    }

    .pause-panel-button-play
    {
        width: 100px;
    }

    /* WIN */

    .win-panel-content
    {
        width: 90%;
    }

    .win-panel-section-content
    {
        width: 150px;
        height: 50px;
    }

    .win-panel-section-title
    {
        font-size: 0.75rem;
    }

    .win-panel-section-value
    {
        font-size: 0.75rem;
    }

    .win-panel-input
    {
        width: 175px;
        height: 35px;
    }

    /* HUD */

    .hud-panel-header
    {
        margin-top: 0;
    }

    .hud-panel-distance-content
    {
        width: 175px;
        height: 50px;
    }

    .hud-panel-distance
    {
        font-size: 1rem;
    }

    .hud-panel-footer
    {
        display: flex;
        margin-bottom: 2rem;
    }

    /* Minigame */

    .minigame-panel-title
    {
        height: 75px;
    }

    .minigame-panel-subtitle
    {
        width: 90%;
    }

    .timer-progress
    {
        width: 75px;
        height: 75px;
    }

    .load-decoration
    {
        max-width: 15vw;
    }
    
    #splash-decoration-0
    {
        width: 11.6vh;
    }

    #splash-decoration-1
    { 
        width: 11.6vh;
    }

    #splash-decoration-2
    {
        width: 16.2vh;
    }

    #splash-decoration-3
    {
        width: 4.6vh;
    }

    #splash-decoration-4
    {
        width: 6.4vh;
    }

    #splash-decoration-5
    {
        width: 16.2vh;
    }

    #splash-decoration-6
    {
        width: 20.83vh;
    }

    #splash-decoration-7
    {
        width: 14vh;
    }

    .collection-panel-title 
    {
        transform: translateY(75px);
    }

    .powerup-panel-content-title 
    {
        transform: translateY(100px);
    }

    .win-panel-title 
    {
        transform: translateY(75px);
    }

    .powerup-title 
    {
        min-height: 5rem;
    }

    .powerup-panel-close-button 
    {
        margin-top: 5%;
    }
}