@charset "utf-8";
@import "plein_ecran.css";

/* ----------------------------------------------
Auteur/author : nicodeux
Dernière mise à jour/last update : 04/06/2025
Licence : GNU General Public License v3.0
---------------------------------------------- */

/* ##############################
    Éléments du ciel et de la mer
############################## */

#plein-ecran {
    flex-direction: column;
}

#ciel {
    flex: 70%;
    background-color: #449eff;
    background-image: url(../images/mario/fna73NL0nJ4.svg);
    background-repeat: repeat-x;
    background-position: bottom;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* Position des nuages dynamiques dans le ciel (le mouvement est géré par JQuery  */

/* Conteneur pour les nuages dynamiques */
#nuages {
    position: relative;
    height: 7em;
}

/* Nuages dynamiques */

#cloud-front-1, #cloud-front-2, #cloud-middle-1, #cloud-middle-2, #cloud-back-1, #cloud-back-2, #cloud-back-3 {
    position: absolute;
    left: 0;
    margin: 0;
    height: 35%;
}

#cloud-front-1, #cloud-front-2 {
    top: 29%;
    z-index: 13;
    transform-origin: left;
}

#cloud-middle-1, #cloud-middle-2 {
    top: 35.5%;
    z-index: 12;
}

#cloud-back-1, #cloud-back-2, #cloud-back-3 {
    top: 42%;
    transform-origin: left;
    z-index: 11;
}

#cloud-front-1 {
    left: 37%;
}

#cloud-front-2 {
    left: 68%;
}

#cloud-middle-1 {
    left: 8.3%;
}

#cloud-middle-2 {
    left: 63%;
}

#cloud-back-1 {
    left: 23%;
}

#cloud-back-2 {
    left: 57%;
}

#cloud-back-3 {
    left: 80%;
}

.clickableCloud {
    cursor: pointer;
    margin: 0;
}

/* Mer, océan et vagues */

#mer {
    position: relative;
    flex: 30%;
    display: flex;
    flex-direction: column;
}

@media (orientation: landscape) {
    #mer * {
        font-size: calc(1px + 1.706485vh);
    }
}

@media (orientation: portrait) {
    #mer * {
        font-size: calc(1px + 1.706485vw);
    }
}

#fond-ocean {
    position: relative;
    z-index: 102;
    background-image: url(../images/mario/background_gradient.svg);
    background-repeat: repeat-x;
    background-position: top;
    background-color: #73d3ff;
    height: 76%;
}

/* Les collines qui dépassent de l'eau */

#collines-fond-d, #collines-fond-g {
    display: block;
    position: absolute;
    bottom: 30%;
}

#collines-fond-d {
    left: 56%;
    width: 3%;
}

#collines-fond-g {
    left: 21%;
    width: 5%;
}

#collines-fond-d img, #collines-fond-g img {
    width: 100%;
}

.colline {
    position: absolute;
    z-index: 11;
    transform: scaleX(1) scaleY(1);
    cursor: pointer;
}

@media (orientation: landscape) {
    .colline {
        bottom: 0;
    }
}

@media (orientation: portrait) {
    .colline {
        bottom: 60%;
    }
}

.colline-bump {
    animation: colline-bump 300ms;
    animation-play-state: running;
}

@keyframes colline-bump {
    50% {
        transform: scaleX(1.05) scaleY(1.1);
        transform-origin: bottom;
    }
    75% {
        transform: scaleX(0.95) scaleY(0.95);
        transform-origin: bottom;
    }
    100% {
        transform: scaleX(1) scaleY(1);
        transform-origin: bottom;
    }
}

#colline-1 {
    left: 3%;
    width: 6.5%;
}

#colline-2 {
    left: 7.8%;
    width: 5%;
}

#colline-3 {
    right: 2%;
    width: 7%;
}

#colline-4 {
    left: 5%;
    width: 3.8%;
}

#colline-5 {
    right: 7%;
    width: 5.5%;
}

@media (orientation: landscape) {
    .colline img {
        width: 100%;
    }
}

@media (orientation: portrait) {
    .colline img {
        width: 150%;
    }
}

/* ######################################
   Pied de page spécifique pour l'océan
###################################### */

#logo-n2 a {
    background-image: url(../images/mario/ln2.svg);
}

#conteneur-pp {
    background-image: url(../images/mario/background_footer.svg) !important;
    background-repeat: no-repeat;
    background-position: top center;
}

/* #########################
   Éléments pour l'océan
######################### */

/* Position des vagues dynamiques dans l'océan */

/* Conversion pixels : pourcentages, 1% : 3,417px */

#waves-holder {
    width: 100%;
    height: 24%;
    position: relative;
    z-index: 100;
}

#waves, #waves-middle, #waves-back {
    background-repeat: repeat-x;
    background-size: contain;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    left: 0;
}

#waves {
    background-image: url(../images/mario/vague.svg);
    top: 2.927%;
    z-index: 12;
}

#waves-middle {
    background-image: url(../images/mario/vague_middle.svg);
    top: 1.463%;
    z-index: 11;
}

#waves-back {
    background-image: url(../images/mario/vague_back.svg);
    top: 0;
    z-index: 10;
}

/* Swimming fish in the water */

#zone-poisson {
    position: relative;
    top: 0;
    height: 100%;
    width: 100%;
}

#poisson-mouv-vert {
    width: 100%;
    height: 2em;
}

#fish {
    position: absolute;
    top: 25%;
    left: 105%;
    z-index: 99;
    cursor: pointer;
    width: 2em;
    height: 2em;
}

.vert-60 {
    animation: vert-60 3s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

@keyframes vert-60 {
    0%   {transform: translateY(-60%);}
    100% {transform: translateY(60%);}
}

.vert-90 {
    animation: vert-90 3s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

@keyframes vert-90 {
    0%   {transform: translateY(-90%);}
    100% {transform: translateY(90%);}
}

.vert-120 {
    animation: vert-120 3s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

@keyframes vert-120 {
    0%   {transform: translateY(-120%);}
    100% {transform: translateY(120%);}
}

/* Gestion des différents plans d'image */

.premier-plan {
    transform: scale(1.3);
}

.plan-central {
    transform: scale(1);
}

.arriere-plan {
    transform: scale(0.7);
}

.popin-premier-plan {
    transform: scale(1.3);
    animation: popin-premier-plan 0.5s ease-out;
    animation-iteration-count: 1;
}

@keyframes popin-premier-plan {
    0% {
        transform: scale(0.9);
    }
    75% {
        transform: scale(1.50); /* slightly increasing the size */
    }
    100% {
        transform: scale(1.3); /* setting back to initial size */
    }
}

/* #########################
   Éléments pour le poisson
 ######################## */

#skeleton-fish {
    position: absolute;
    width: 3em;
    height: 2em;
    transform: scale(1.1) rotate(-0.5rad);
    background-image: url(../images/mario/poissons/N23LC83Nc_left.svg);
    background-size: contain;
}

.skeleton-fish-right {
    background-image: url(../images/mario/poissons/N23LC83Nc_right.svg) !important;
    transform: scale(1.1) rotate(0.5rad) !important;
}

#bubble-burst {
    position: absolute;
    width: 3em;
    height: 3em;
    background-image: url(../images/mario/dsfnKAlNR930N4.svg);
    background-size: cover;
    animation: bubble-grow 1.5s ease;
    animation-iteration-count: infinite;
}

@keyframes bubble-grow {
    from {
        transform: scale(1.1);
        transform-origin: bottom;
    }
    to {
        transform: scale(1.55);
        transform-origin: bottom;
    }
}

/**********************/
/*  Les high scores   */
/**********************/

#panneau {
    display: block;
    position: absolute;
    bottom: 99%;
    left: -70%;
    width: 240%;
    background-image: url(../images/mario/hiscores/tige-hs.svg);
    background-repeat: repeat-y;
    background-size: contain;
    background-position: 50%;
}

#hiscores {
    position: fixed;
    top: -100%;
    left: 0;
    z-index: 1800;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding: 2em;
    transition: top 500ms;
}

@media (orientation: landscape) {
    #hiscores {
        font-size: calc(6px + 1.706485vh);
    }
}

@media (orientation: portrait) {
    #hiscores {
        font-size: calc(6px + 1.706485vw);
    }
}

.hs-bas {
    top: 0 !important;
}

#titre-hs {
    position: relative;
    z-index: 2;
    display: block;
    aspect-ratio: 51.3 / 12.3;
    width: 20em;
    background-image: url(../images/mario/hiscores/nazeNDPha25n.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    margin-bottom: -0.8em;
}

#hs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 30em;
    max-height: 30em;
}

#hs-haut, #hs-bas, #hs-contenu, #infos-reset {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

#hs-haut div, #hs-bas div {
    display: block;
    height: 0.6em;
    background-size: contain;
}

#hs-haut div:first-child, #hs-haut div:last-child, #hs-bas div:first-child, #hs-bas div:last-child {
    background-repeat: no-repeat;
    width: 0.6em;
}

#hs-haut div:first-child, #hs-haut div:last-child {
    background-image: url(../images/mario/hiscores/lkanic654.svg);
}

#hs-haut div:nth-of-type(2), #hs-bas div:nth-of-type(2) {
    background-image: url(../images/mario/hiscores/lnzAAF883.svg);
    background-repeat: repeat-x;
    width: calc(100% - 1.2em);
}

#hs-haut div:last-child {
    transform: rotate(90deg);
}

#hs-bas div:first-child {
    background-image: url(../images/mario/hiscores/lan75Fj.svg);
}

#hs-bas div:last-child {
    background-image: url(../images/mario/hiscores/qfaz64d.svg);
}

#hs-contenu {
    width: 100%;
    height: calc(100% - 1.2em);
}

#hs-contenu *, #infos-reset {
    font-family: var(--texte-bulle);
}

.hs-bv {
    display: block;
    width: 0.6em;
    height: 100%;
    background-image: url(../images/mario/hiscores/354af8A.svg);
    background-repeat: repeat-y;
    background-size: contain;
}

#infos-reset {
    width: 100%;
    justify-content: space-between;
    background-color: black;
}

#infos-reset div:nth-of-type(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    font-size: 0.6em;
    color: white;
    padding: 0.8em 0 0.2em 0;
    height: 100%;
}

.champinfos {
    display: inline-flex;
    align-items: center;
    width: 1.4em;
    height: 100%;
    background-image: url(../images/mario/hiscores/pk954Fef.svg);
    background-repeat: no-repeat;
    background-size: contain;
}