* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Permanent Marker", cursive;
}

.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}


html, button {
    cursor: url("../media/main-curseur.png"), auto;
}

html.click, button.click {
    cursor: url("../media/main-curseur-down.png"), auto; 
}

#jeu {
    position: relative;
    display: grid;
    place-items: center;
    background-color: rgba(202, 201, 201, 0.58);
    aspect-ratio: 1/1;
    width: calc(60vmin );
    height: calc(60vmin );
    clip-path: polygon(
    /* Top edge - Subtle 1% waves */
    0% 1%, 5% 0%, 10% 1%, 15% 0%, 20% 1%, 25% 0%, 30% 1%, 35% 0%, 40% 1%, 45% 0%, 50% 1%, 55% 0%, 60% 1%, 65% 0%, 70% 1%, 75% 0%, 80% 1%, 85% 0%, 90% 1%, 95% 0%, 99% 0%, 
    /* Right edge - Subtle 1% waves */
    100% 5%, 99% 10%, 100% 15%, 99% 20%, 100% 25%, 99% 30%, 100% 35%, 99% 40%, 100% 45%, 99% 50%, 100% 55%, 99% 60%, 100% 65%, 99% 70%, 100% 75%, 99% 80%, 100% 85%, 99% 90%, 100% 95%, 99% 100%, 
    /* Bottom edge - Subtle 1% waves */
    95% 99%, 90% 100%, 85% 99%, 80% 100%, 75% 99%, 70% 100%, 65% 99%, 60% 100%, 55% 99%, 50% 100%, 45% 99%, 40% 100%, 35% 99%, 30% 100%, 25% 99%, 20% 100%, 15% 99%, 10% 100%, 5% 99%, 0% 100%, 
    /* Left edge - Subtle 1% waves */
    1% 95%, 0% 90%, 1% 85%, 0% 80%, 1% 75%, 0% 70%, 1% 65%, 0% 60%, 1% 55%, 0% 50%, 1% 45%, 0% 40%, 1% 35%, 0% 30%, 1% 25%, 0% 20%, 1% 15%, 0% 10%, 1% 5%
  )
}

.taping{
  position:relative;
}

body {
    background-image: url("../media/carboard.jpg");
    background-size: contain;
    image-rendering: pixelated;
    place-items: center;

}

#grille {
    width: calc(50vmin + 12px);
    height: calc(50vmin + 12px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
#grille .case {
    display: grid;
    place-items: center;
    height: calc(50vmin / 3);
    width: calc(50vmin / 3);
    margin: 0px;
    background-image: url("../media/bulle-sprite.png");
    background-size: 700% 100%;
    background-position: 50% 0%;
    background-repeat: no-repeat;

}
#grille .case:hover {
    background-image: url("../media/bulle-sprite-hover.png");
    background-size: 700% 100%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
}

h1 {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0.6em;
    font-size: 4em;
    background-color: rgba(237, 236, 236, 0.806);
     clip-path: polygon(100% 0, 100% 100%,99.67% 94%,
     98.67% 96%, 97.67% 96%, 97.00% 100%, 96.00% 96%,
      94.67% 100%, 93.67% 96%, 92.67% 100%, 91.67% 94%,
       90.67% 100%, 89.67% 96%, 88.67% 96%, 87.67% 100%,
        86.67% 94%, 85.67% 100%, 84.33% 94%, 83.33% 100%,
         82.33% 96%, 81.33% 100%, 80.33% 96%, 78.33% 96%,
          76.67% 100%, 74.67% 96%, 73.33% 100%, 72.33% 96%,
           70.67% 96%, 69.00% 100%, 68.00% 96%, 67.00% 94%,
            66.00% 96%, 65.33% 96%, 64.33% 100%, 63.00% 96%,
             62.00% 100%, 61.00% 96%, 60.00% 100%, 59.00% 94%,
              58.00% 100%, 57.00% 96%, 56.00% 96%,
               55.00% 100%, 54.00% 94%, 52.33% 100%,
                50.67% 94%, 49.67% 100%, 48.67% 96%,
                 47.67% 100%, 47.00% 96%, 46.00% 96%,
                  44.67% 100%, 43.67% 96%, 42.67% 100%,
                   41.67% 96%, 40.67% 96%, 39.67% 100%,
                    38.67% 96%, 37.67% 94%, 36.67% 96%,
                     35.67% 96%, 34.33% 100%, 33.33% 96%,
                      32.33% 100%, 31.33% 96%, 30.33% 100%,
                       28.33% 94%, 26.67% 100%, 24.67% 96%,
                        23.33% 96%, 22.33% 100%, 20.67% 94%,
                         19.00% 100%, 18.00% 94%, 17.00% 100%,
                          16.00% 96%, 15.33% 100%, 14.33% 96%
                          , 13.00% 96%, 12.00% 100%, 11.00% 96%,
                           10.00% 100%, 9.00% 96%, 8.00% 96%,
                            7.00% 100%, 6.00% 96%, 5.00% 100%,
                             4% 96%, 3% 100%, 2% 96%, 1% 100%, 0% 100%, 0% 0%)
}

p {
    text-align: center;
    font-size: 1.5em;
    margin-top: 2em;

    background-color: rgba(237, 236, 236, 0.806);
    clip-path: polygon(100% 0, 100% 100%,99.67% 94%,
     98.67% 96%, 97.67% 96%, 97.00% 100%, 96.00% 96%,
      94.67% 100%, 93.67% 96%, 92.67% 100%, 91.67% 94%,
       90.67% 100%, 89.67% 96%, 88.67% 96%, 87.67% 100%,
        86.67% 94%, 85.67% 100%, 84.33% 94%, 83.33% 100%,
         82.33% 96%, 81.33% 100%, 80.33% 96%, 78.33% 96%,
          76.67% 100%, 74.67% 96%, 73.33% 100%, 72.33% 96%,
           70.67% 96%, 69.00% 100%, 68.00% 96%, 67.00% 94%,
            66.00% 96%, 65.33% 96%, 64.33% 100%, 63.00% 96%,
             62.00% 100%, 61.00% 96%, 60.00% 100%, 59.00% 94%,
              58.00% 100%, 57.00% 96%, 56.00% 96%,
               55.00% 100%, 54.00% 94%, 52.33% 100%,
                50.67% 94%, 49.67% 100%, 48.67% 96%,
                 47.67% 100%, 47.00% 96%, 46.00% 96%,
                  44.67% 100%, 43.67% 96%, 42.67% 100%,
                   41.67% 96%, 40.67% 96%, 39.67% 100%,
                    38.67% 96%, 37.67% 94%, 36.67% 96%,
                     35.67% 96%, 34.33% 100%, 33.33% 96%,
                      32.33% 100%, 31.33% 96%, 30.33% 100%,
                       28.33% 94%, 26.67% 100%, 24.67% 96%,
                        23.33% 96%, 22.33% 100%, 20.67% 94%,
                         19.00% 100%, 18.00% 94%, 17.00% 100%,
                          16.00% 96%, 15.33% 100%, 14.33% 96%
                          , 13.00% 96%, 12.00% 100%, 11.00% 96%,
                           10.00% 100%, 9.00% 96%, 8.00% 96%,
                            7.00% 100%, 6.00% 96%, 5.00% 100%,
                             4% 96%, 3% 100%, 2% 96%, 1% 100%, 0% 100%, 0% 0%)
}

h2 {
    text-align: center;
    font-size: 3em;
    z-index: 2;
    top: 25vmin;
    left: 5vw;
    position:absolute;
    background-color: rgba(237, 236, 236, 0.806);
    clip-path: polygon(100% 0, 100% 100%,99.67% 94%,
     98.67% 96%, 97.67% 96%, 97.00% 100%, 96.00% 96%,
      94.67% 100%, 93.67% 96%, 92.67% 100%, 91.67% 94%,
       90.67% 100%, 89.67% 96%, 88.67% 96%, 87.67% 100%,
        86.67% 94%, 85.67% 100%, 84.33% 94%, 83.33% 100%,
         82.33% 96%, 81.33% 100%, 80.33% 96%, 78.33% 96%,
          76.67% 100%, 74.67% 96%, 73.33% 100%, 72.33% 96%,
           70.67% 96%, 69.00% 100%, 68.00% 96%, 67.00% 94%,
            66.00% 96%, 65.33% 96%, 64.33% 100%, 63.00% 96%,
             62.00% 100%, 61.00% 96%, 60.00% 100%, 59.00% 94%,
              58.00% 100%, 57.00% 96%, 56.00% 96%,
               55.00% 100%, 54.00% 94%, 52.33% 100%,
                50.67% 94%, 49.67% 100%, 48.67% 96%,
                 47.67% 100%, 47.00% 96%, 46.00% 96%,
                  44.67% 100%, 43.67% 96%, 42.67% 100%,
                   41.67% 96%, 40.67% 96%, 39.67% 100%,
                    38.67% 96%, 37.67% 94%, 36.67% 96%,
                     35.67% 96%, 34.33% 100%, 33.33% 96%,
                      32.33% 100%, 31.33% 96%, 30.33% 100%,
                       28.33% 94%, 26.67% 100%, 24.67% 96%,
                        23.33% 96%, 22.33% 100%, 20.67% 94%,
                         19.00% 100%, 18.00% 94%, 17.00% 100%,
                          16.00% 96%, 15.33% 100%, 14.33% 96%
                          , 13.00% 96%, 12.00% 100%, 11.00% 96%,
                           10.00% 100%, 9.00% 96%, 8.00% 96%,
                            7.00% 100%, 6.00% 96%, 5.00% 100%,
                             4% 96%, 3% 100%, 2% 96%, 1% 100%, 0% 100%, 0% 0%)
}

button {
    display: block;
    margin: 0 auto;
    margin-top: 1em;
    padding: 0.5em 1em;
    font-size: 1.2em;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    position: relative;
    top: -2vmin;


}


button:hover {
    background-color: #3b7b3f;
    scale: 0.95;
}

#joueur-actif {
    object-fit: cover;
    margin: 0 auto;
    display: block;

    
}

#joueur-actif:hover {
    scale: 1.1;
}

nav { 
margin-top: 1em;
}

.curseur-container {
    display: grid;
    place-items: center;
}


.curseur-img  {
    top: 0px;
    left: 0px;
    animation: sprite 0.4s steps(2, jump-none ) infinite;
    object-fit: cover;
    transition: transform 0.1s;
    width: 64px;
    height: 64px;
    position: absolute;
} 

.case.is-bleu {
  animation: sprite-bleu 0.12s steps(3) forwards; 
}

.case.is-vert {
  animation: sprite-vert 0.1s steps(3) forwards; 
}

@keyframes sprite-vert {
    from{
        background-position: 50% 0%;
    }
    to{
        background-position: 100% 0%;   
    }
}

@keyframes sprite-bleu {
    from{
        background-position: 50% 0%;
    }
    to{
        background-position: 0% 0%;   
    }
}



.tape-section {
  position: absolute;
  width: 100%;
}

.tape-section:first-of-type {
  top: 0;
}

.tape-section:last-of-type {
  bottom: 0;
}

.tape-section::before,
.tape-section::after {
  content: "";
  width: 10vmin;
  height: 4vmin;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 0.5;
  border-right: 1px dotted grey;
  border-left: 1px dotted grey;
 	 clip-path: polygon(
    /* Left jagged edge */
    0% 0%, 5% 12.5%, 0% 25%, 5% 37.5%, 0% 50%, 5% 62.5%, 0% 75%, 5% 87.5%, 0% 100%, 
    /* Right jagged edge */
    100% 100%, 95% 87.5%, 100% 75%, 95% 62.5%, 100% 50%, 95% 37.5%, 100% 25%, 95% 12.5%, 100% 0%
  )
}

.tape-section:last-of-type::after {
  transform: rotate(-50deg);
  right: -4vmin;
  top: -6vmin;
}

.tape-section:first-of-type::before {
  transform: rotate(-45deg);
  left: -4vmin;
}

.tape-section:first-of-type::after {
  transform: rotate(42deg);
  right: -3vmin;
  top: 0;
}

.tape-section:last-of-type::before {
  transform: rotate(50deg);
  left: -4vmin;
  bottom: 0;
}

.top-tape {
  position: absolute;
  height: 4vmin;
  left: 9vmin;
  top: -2vmin;
  width: 69%;
  background-color: rgba(255, 255, 255, 0.8);
  border-right: 1px dotted grey;
  border-left: 1px dotted grey;
  opacity: 0.5;
  transform: rotate(358deg);
   clip-path: polygon(
    /* Left side spikes (refined to 2%) */
    0% 0%, 2% 12.5%, 0% 25%, 2% 37.5%, 0% 50%, 2% 62.5%, 0% 75%, 2% 87.5%, 0% 100%, 
    /* Right side spikes (refined to 98%) */
    100% 100%, 98% 87.5%, 100% 75%, 98% 62.5%, 100% 50%, 98% 37.5%, 100% 25%, 98% 12.5%, 100% 0%
  )
}
.top-tape-small {
  position: absolute;
  height: 4vmin;
  left: 19vmin;
  top: -2vmin;
  width: 46%;
  background-color: rgba(255, 255, 255, 0.8);
  border-right: 1px dotted grey;
  border-left: 1px dotted grey;
  opacity: 0.5;
  transform: rotate(-2deg);
  clip-path: polygon(
    /* Left side spikes (refined to 2%) */
    0% 0%, 2% 12.5%, 0% 25%, 2% 37.5%, 0% 50%, 2% 62.5%, 0% 75%, 2% 87.5%, 0% 100%, 
    /* Right side spikes (refined to 98%) */
    100% 100%, 98% 87.5%, 100% 75%, 98% 62.5%, 100% 50%, 98% 37.5%, 100% 25%, 98% 12.5%, 100% 0%
  )
}


.top-tape-small-2 {
  align-items: center;
  justify-content: center;
  display: none;
  position: relative;
  height: 4vmin;
  left: 16vmin;
  top: 23vmin;
  z-index: 3;
  width: 46%;
  background-color: rgba(255, 255, 255, 0.8);
  border-right: 1px dotted grey;
  border-left: 1px dotted grey;
  opacity: 0.5;
  transform: rotate(-1deg);
  clip-path: polygon(
    /* Left side spikes (refined to 2%) */
    0% 0%, 2% 12.5%, 0% 25%, 2% 37.5%, 0% 50%, 2% 62.5%, 0% 75%, 2% 87.5%, 0% 100%, 
    /* Right side spikes (refined to 98%) */
    100% 100%, 98% 87.5%, 100% 75%, 98% 62.5%, 100% 50%, 98% 37.5%, 100% 25%, 98% 12.5%, 100% 0%
  )
}

.top-tape-small-2.active {
  display: block;
  position: absolute;
}