@charset "UTF-8";
:root {
  --font-w-thin: 100;
  --font-w-light: 300;
  --font-w-regular: 400;
  --font-w-bold: 800;
  --fs-200: 1.05vh;
  --fs-300: 1.25vh;
  --fs-400: 1.5vh;
  --fs-500: 2vh;
  --fs-600: 3vh;
  --fs-700: 4vh;
  --fs-800: 5vh;
  --fs-900: 6.5vh;
  scroll-behavior: smooth;
  --app-height: 100%;
  --rainbow-gradient: repeating-linear-gradient(
      180deg,
      #ff5656 0%,
      #ff8f4f 14.28%,
      #fdf86d 28.56%,
      #6bf78f 42.84%,
      #44b7ff 57.12%,
      #9f62fc 71.4%,
      #ff5bff 85.68%,
      #ff5656 100%
  );
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  width: 100vw;
  height: 100dvh; /* Use dynamic viewport height for better support on mobile devices */
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: "Comic Sans MS", "Times New Roman", cursive, sans-serif;
  overflow-x: hidden;
}

small {
  font-size: 60%;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

[hidden] {
  display: none !important;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100vw;
  display: block;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

html,
body {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100vw;
  cursor: none !important;
  -webkit-font-smoothing: never;
  font-smooth: never;
  text-rendering: geometricPrecision;
  -webkit-print-color-adjust: exact;
  background-color: var(--clr-miamo-black);
  user-select: none;
}

body:before {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  inset: 0;
  opacity: 0;
  background-color: #000;
  transition: opacity 2800ms;
  z-index: 10000;
  pointer-events: none;
}
body.flash:before {
  content: "";
  opacity: 1;
}

*::selection {
  background: rgba(255, 196, 0, 0.2431372549);
}

a {
  cursor: none !important;
  color: #fff;
  font-weight: 400;
}
a:visited {
  color: #fff;
  font-weight: 400;
}

use {
  pointer-events: none;
}

ul {
  padding-inline-start: 0;
  margin-block-end: 0;
  margin-block-start: 0;
}

input[type=range] {
  appearance: none;
  width: 80px; /* Largeur ajustée pour correspondre à la rotation */
  height: 8px; /* Épaisseur de la piste */
  background: linear-gradient(to right, #ffcc00, #ff6600); /* Adapté pour la rotation */
  border-radius: 5px;
  outline: none;
  transition: opacity 0.2s;
  padding: 0;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, #0dff00, #ff6600);
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 8px;
  height: 20px;
  border: 2px outset #00aeff;
  background-color: #00b7ff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  margin-top: -6px; /* Ajustement pour l'alignement */
}

input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #000;
  border: 2px solid #00aeff;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, #00fff2, #0dff00);
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

*::before, *::after {
  image-rendering: pixelated;
}

input[type=text],
input[type=email],
textarea,
input[type=submit],
button {
  background: linear-gradient(to right, #0dff00, #00ff9d);
  border: solid 2px #000;
  color: #252525;
}

textarea {
  resize: none;
}

label {
  color: #fff;
}

body {
  background-color: var(--clr-miamo-primary);
}

@keyframes dimTwinkle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}
@keyframes slideup {
  0% {
    transform: translateY(150%);
  }
  25%, 75% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(150%);
  }
}
@keyframes slideright {
  0% {
    transform: translateX(-250%) rotate(15deg);
  }
  25%, 75% {
    transform: translateX(0) rotate(15deg);
  }
  100% {
    transform: translateX(-250%) rotate(15deg);
  }
}
@keyframes slideleft {
  0% {
    transform: translateX(250%) rotate(-15deg);
  }
  25%, 75% {
    transform: translateX(0) rotate(-15deg);
  }
  100% {
    transform: translateX(250%) rotate(-15deg);
  }
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes doorslide {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes kitchenhand {
  0% {
    transform: rotate(0deg) translate(20px) rotate(0deg);
  }
  25% {
    transform: rotate(90deg) translate(20px) rotate(-90deg);
  }
  50% {
    transform: rotate(180deg) translate(20px) rotate(-180deg);
  }
  75% {
    transform: rotate(270deg) translate(20px) rotate(-270deg);
  }
  100% {
    transform: rotate(360deg) translate(20px) rotate(-360deg);
  }
}
@keyframes arc {
  0% {
    transform: rotate(0deg) translate(20px) rotate(0deg);
  }
  25% {
    transform: rotate(45deg) translate(20px) rotate(-45deg);
  }
  50% {
    transform: rotate(90deg) translate(20px) rotate(-90deg);
  }
  75% {
    transform: rotate(135deg) translate(20px) rotate(-135deg);
  }
  100% {
    transform: rotate(180deg) translate(20px) rotate(-180deg);
  }
}
@keyframes rainbow {
  0% {
    background-position: 0% 0vh;
  }
  100% {
    background-position: 0% 20vh;
  }
}
.theme__miamo {
  --clr-name-miamo: ;
  --clr-miamo-white: #fffdfa;
  --clr-miamo-black: #17181e;
}

.transition__open {
  opacity: 1;
  transform: rotateY(180deg);
}

.hide {
  opacity: 0;
  pointer-events: none;
}

.disabled {
  display: none !important;
}

.animatedoor {
  position: absolute;
  bottom: 0% !important;
  right: auto !important;
  width: 8% !important;
  height: 32% !important;
  animation: doorslide 1500ms forwards linear;
}

.page {
  min-height: 100%;
  position: relative;
  height: 100%;
  width: 100%;
  font-size: 1.25rem;
  line-height: auto;
  transition: opacity 500ms;
  isolation: isolate;
}

#templates {
  display: none;
}

.canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 1000000000000;
}

canvas {
  image-rendering: pixelated;
}

.threedeecanvas {
  position: absolute;
  inset: 0;
}

.hover {
  cursor: none !important;
}

.grab {
  cursor: grab !important;
}

.cursor {
  position: fixed;
  pointer-events: none;
  z-index: 100000000000000000000;
  width: 2rem;
  height: 2rem;
}
.cursor * {
  position: absolute;
  left: 0;
  top: 0;
  image-rendering: crisp-edges;
}
.cursor__cooldown {
  position: absolute;
  top: -1rem;
  right: 0;
  left: auto !important;
  width: 1.15vw;
  aspect-ratio: 1/1;
  border-radius: 3rem;
  background-color: #220927;
  border: ridge #cacaca;
  z-index: 100000000000000000000;
  border-width: 2px;
  transition: width 150ms, border-width 150ms;
}
.cursor__cooldown.hide {
  opacity: 1 !important;
  width: 0;
  border-width: 0;
}
.cursor__cooldown::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  aspect-ratio: 1/1;
  clip-path: circle(50% at 50% 50%);
  background: conic-gradient(#6c2eb3 var(--cooldownPercent), transparent 0deg);
}

.information {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  background-color: var(--clr-miamo-black);
  color: var(--clr-miamo-white);
  display: none;
  text-align: center;
  z-index: 50000000000000000000000;
}

.dragging {
  opacity: 0.5;
}

.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
}

.tipofthemynthos {
  position: absolute;
  bottom: 0;
  left: 0%;
  z-index: 1000;
  animation: slideup 9500ms forwards;
  width: 11%;
  pointer-events: none;
}
.tipofthemynthos__left {
  left: 3%;
  transform: translateY(0);
}
.tipofthemynthos__diagonalright {
  animation: slideright 9500ms forwards;
  bottom: 30%;
  left: 0%;
  right: auto;
}
.tipofthemynthos__diagonalleft {
  animation: slideleft 9500ms forwards;
  bottom: 30%;
  right: 5%;
  left: auto;
}
.tipofthemynthos__right {
  right: 3%;
  left: auto;
  transform: translateY(0);
}
.tipofthemynthos__right .tipofthemynthos__bubble {
  background: url("/assets/sprites/monnaie/bubble.png");
  background-size: 100% 100%;
  left: -108%;
}
.tipofthemynthos__character {
  width: 100%;
}
.tipofthemynthos__bubble {
  position: absolute;
  bottom: 65%;
  left: 64%;
  background: url(/assets/sprites/monnaie/bubble.png);
  background-size: 100% 100%;
  width: 15vw;
  height: 15vh;
  padding: 2.85%;
  padding-bottom: 29%;
  z-index: 10;
  font-size: 0.85vw;
}

@media (orientation: portrait) {
  .information {
    display: flex;
  }
}
.chat__emote {
  display: inline-block;
  width: 16px;
  height: 16px;
}
.chat__user {
  color: var(--color);
  font-weight: bold;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  paint-order: stroke;
  overflow: hidden;
}

.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.main__content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: transform 2000ms;
}
.main__logo {
  position: absolute;
  top: 1%;
  left: 1%;
  width: 18%;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 300ms;
}
.main__logo:hover {
  opacity: 0.3;
}
.main__progress {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1.5%;
  background: linear-gradient(90deg, #5900ff, #a14af3);
  opacity: 0.5;
  z-index: 1000000;
  transform-origin: left;
  transition: opacity 850ms;
}
.main__progress-hidden {
  opacity: 0;
}
.main__breaking {
  position: absolute;
  bottom: 0;
  height: 10%;
  border-top: 4px ridge #010101;
  background-color: #000;
  color: #bb0000;
  font-size: 2.75vw;
  z-index: 1000000;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  display: inline;
  box-sizing: border-box;
  white-space: nowrap;
  transition: bottom 2000ms;
}
.main__breaking.hide {
  opacity: 1 !important;
  bottom: -10%;
}
.main__breaking-news {
  display: inline-block;
  height: 100%;
  overflow: hidden;
  align-content: center;
  animation: news 80000ms linear infinite;
}
.main__camera {
  position: absolute;
  top: 0;
  right: 2.5%;
  width: 15vw;
  aspect-ratio: 1/1.4;
  z-index: 100;
  isolation: isolate;
  pointer-events: none;
  transform: translateY(-50vh);
  transition: transform 5000ms;
}
.main__camera-active {
  transform: translateY(0);
}
.main__camera-video {
  position: absolute;
  width: 96%;
  inset: 0;
  right: -3%;
  margin: auto;
  object-fit: fill;
  z-index: -1;
  bottom: -28%;
  transform: skew(0deg, 7deg);
  aspect-ratio: 1/0.82;
  border-radius: 1rem;
}
.main__camera-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.main__userslive {
  position: absolute;
  top: 2%;
  right: 2%;
  font-size: 1.5vw;
  -webkit-text-stroke: #000 3px;
  gap: 0.5rem;
  color: #fff;
  z-index: 100000000000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.main__previous {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: transform 8000ms;
  z-index: 100;
}
.main__important {
  position: absolute;
  inset: 0;
  margin: auto;
  text-align: center;
  align-content: center;
  color: #000;
  z-index: 100;
  pointer-events: none;
  font-size: 4rem;
  font-weight: 700;
  text-transform: uppercase;
}

@keyframes news {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.home {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  background-color: #000;
  color: #fff;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
  isolation: isolate;
  z-index: 10000000000000000000000;
  background-size: 100% 100%;
  image-rendering: pixelated;
  -webkit-text-stroke: 5px #000;
}
.home__core {
  width: 95%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 3%;
}
.home::before {
  content: "";
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.95) 100%);
  animation: dimTwinkle 2s infinite ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}
.home__credits {
  position: absolute;
  bottom: 1%;
  right: 1%;
  font-style: italic;
}
.home__miamo {
  position: absolute;
  bottom: 5%;
  right: 0.5%;
  width: 16%;
}
.home__miamo-img {
  width: 100%;
  pointer-events: none;
}
.home__background {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  filter: blur(4px);
  height: 100%;
  transition: filter 1s;
}
.home__background-row {
  width: 100%;
  height: 10%;
  white-space: nowrap;
  animation: defilement 110s linear infinite;
  margin-top: 2px;
}
.home__background-unpair {
  transform: scaleX(-1);
  animation: defilement-reverse 110s linear infinite;
}
.home__background-cell {
  width: 10%;
  height: 100%;
  margin: 1px;
  display: inline;
}
.home__logo {
  width: 30%;
  z-index: 100;
}
.home__planet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url(/assets/sprites/pictures/earth2.png);
  background-size: 100% 100%;
  transition: opacity 1s;
  z-index: -2;
  opacity: 0;
}
.home__warning {
  width: 45%;
  height: 10%;
  min-width: 18rem;
  text-align: center;
  z-index: 10;
}
.home__door {
  width: 13% !important;
  height: 50% !important;
  box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.5490196078);
}

@keyframes defilement {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes defilement-reverse {
  0% {
    transform: translateX(0) scaleX(-1);
  }
  100% {
    transform: translateX(100%) scaleX(-1);
  }
}
.hub {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
  isolation: isolate;
}
.hub.hub__Sand .hub__core {
  background-image: url("/assets/sprites/hub/sand.png");
  background-size: 35%;
  image-rendering: pixelated;
}
.hub.hub__Space .hub__core {
  background-image: url("/assets/sprites/hub/glass.png");
  background-size: 5%;
  image-rendering: pixelated;
}
.hub.hub__Frutiger .hub__core {
  background-image: url("/assets/textures/grass.png");
  background-size: 25%;
  image-rendering: pixelated;
}
.hub.hub__Mynthos .hub__core {
  background-image: url("/assets/textures/mynthos.png");
  background-size: 18%;
  image-rendering: pixelated;
  background-position: 20% 25%;
}
.hub.hub__Neon .hub__core {
  background-image: url("/assets/textures/disco.png");
  background-size: 13%;
  image-rendering: pixelated;
  background-position: 20% 0%;
}
.hub.hub__Fire .hub__core {
  background-image: url("/assets/sprites/hub/glass.png");
  background-size: 8%;
  image-rendering: pixelated;
  background-position: 20% 0%;
}
.hub__playground {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
  z-index: -2;
}
.hub__doors {
  position: absolute;
  top: 24%;
  left: 0;
  width: 100%;
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: row;
  gap: 4%;
}
.hub__doors-category {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
  height: 80%;
  width: 9%;
  position: relative;
}
.hub__doors-votes {
  display: block;
  background: repeating-linear-gradient(180deg, #ff5656 0%, #ff8f4f 14.28%, #fdf86d 28.56%, #6bf78f 42.84%, #44b7ff 57.12%, #9f62fc 71.4%, #ff5bff 85.68%, #ff5656 100%);
  background-size: 100% 20vh;
  animation: rainbow 2s infinite linear;
  position: absolute;
  width: 110%;
  height: 0%;
  bottom: 0%;
  transform-origin: bottom;
  z-index: -1;
  opacity: 0.85;
  transition: height 300ms;
}
.hub__doors-title {
  position: absolute;
  top: -55%;
  width: 145%;
  -webkit-text-stroke: 4px #000;
  paint-order: stroke fill;
}
.hub__doors-preview {
  position: absolute;
  top: -39%;
  width: 80%;
  height: 33%;
  border: ridge 4px #ebc33f;
  animation: float infinite 3s;
}
.hub__clicker {
  position: absolute;
  left: 3%;
  width: 13%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.hub__clicker-count {
  color: #fff;
  -webkit-text-stroke: 5px #000;
  font-size: 2vw;
  paint-order: stroke fill;
}
.hub__clicker-img {
  width: 100%;
  transition: transform 200ms;
}
.hub__clicker-img:active {
  transform: scale(0.8);
}
.hub__door {
  height: 100%;
  width: 100%;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
  transition: transform 300ms;
  transform-origin: bottom;
}
.hub__door:hover {
  transform: scaleX(0.9) scaleY(1);
}
.hub__door:active {
  transform: scaleX(0.9) scaleY(0.9);
}
.hub__center {
  width: 30%;
  height: 100%;
  position: relative;
  transition: transform 2300ms;
}
.hub__center::before {
  content: "";
  position: absolute;
  bottom: 0%;
  left: 3%;
  width: 30%;
  height: 30%;
  background: url("/assets/sprites/hub/foundation.png");
  background-size: 100% 100%;
  image-rendering: auto;
  z-index: -2;
}
.hub__center::after {
  content: "";
  position: absolute;
  bottom: 0%;
  right: 3%;
  width: 30%;
  height: 30%;
  background: url("/assets/sprites/hub/foundation.png");
  background-size: 100% 100%;
  image-rendering: auto;
  z-index: -2;
}
.hub__chatbox {
  width: 100%;
  height: 100%;
  background-color: #010101;
  color: #ddd;
  image-rendering: pixelated;
  font-size: 0.8vw;
  isolation: isolate;
  transform: translateY(-25%);
  position: relative;
  z-index: -1;
  overflow: hidden;
}
.hub__chatbox-gone {
  transform: translateY(120vh);
}
.hub__chatbox-Space {
  border-image: url("/assets/sprites/hub/outlineSpace.png") 30 round;
  border-width: 2vw;
  border-style: solid;
}
.hub__chatbox-Sand {
  border-image: url("/assets/sprites/hub/outlineSand.png") 30 round;
  border-width: 2vw;
  border-style: solid;
}
.hub__chatbox-Frutiger {
  border-image: url("/assets/sprites/hub/outlineFrutiger.png") 30 round;
  border-width: 2vw;
  border-style: solid;
}
.hub__chatbox-Mynthos {
  border-image: url("/assets/sprites/hub/outlineMynthos.png") 20 round;
  border-width: 2vw;
  border-style: solid;
}
.hub__chatbox-Neon {
  border-image: url("/assets/sprites/hub/outlineNeon.png") 30 round;
  border-width: 2vw;
  border-style: solid;
  box-shadow: 0 0px 89px #9132bd;
}
.hub__chatbox-Fire {
  border-image: url("/assets/sprites/hub/outlineFire.png") 30 round;
  border-width: 2vw;
  border-style: solid;
  box-shadow: 0 0px 89px #bd3232;
}
.hub__streamplayer {
  position: absolute;
  top: calc(-25% + 2rem);
  left: 2rem;
  width: calc(100% - 4rem);
  height: calc(100% - 4rem);
  margin: auto;
}
.hub__logo {
  position: absolute;
  width: 18%;
  top: 5%;
  transition: opacity 2300ms;
}
.hub__logo-gone {
  opacity: 0;
}
.hub__core {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  height: 37%;
  background-image: url("/assets/sprites/hub/sand.png");
  box-shadow: 0px -10px 12px 0px rgba(17, 17, 17, 0.5647058824);
  transition: transform 2700ms;
}
.hub__core-gone {
  transform: translateY(150%);
}
.hub__piano {
  position: absolute;
  right: 3%;
  aspect-ratio: 16/7;
  width: 25%;
  background-image: url(/assets/sprites/partition/piano.png);
  background-size: 100% 100%;
  transform: rotate(-4deg);
}
.hub__piano-normal {
  position: absolute;
  bottom: 7%;
  left: 5%;
  width: 90%;
  height: 40%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
}
.hub__piano-note {
  height: 100%;
  width: 3%;
}
.hub__skinsbox {
  position: absolute;
  width: 12%;
}
.hub__skinsbox-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: rgba(0, 0, 0, 0.3137254902);
  padding: 0.5rem;
  border: ridge 2px #111;
  gap: 2px;
}
.hub__skinsbox-item {
  transition: transform 200ms, opacity 250ms;
}
.hub__skinsbox-selected {
  opacity: 0.5;
  pointer-events: none;
}
.hub__skinsbox::before {
  position: absolute;
  content: "";
  background: url("/assets/sprites/hub/cardboard.png");
  background-size: 100% 100%;
  width: 100%;
  height: 135%;
  bottom: -135%;
}
.hub__typewriter {
  position: absolute;
  left: 22%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 25%;
  isolation: isolate;
  transform: rotate(2deg);
}
.hub__typewriter-content {
  position: absolute;
  background: url("/assets/textures/paper.png");
  background-size: 150%;
  color: #000;
  width: 40%;
  height: 50%;
  left: 2%;
  right: 0;
  top: -35%;
  margin: auto;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.hub__typewriter-img {
  width: 70%;
}
.hub__typewriter-input {
  position: absolute;
  left: 3%;
  right: 0;
  width: 40%;
  margin: auto;
  top: 25%;
  background: #fff !important;
  text-align: center;
}

.coinpush {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
}
.coinpush__playground {
  aspect-ratio: 16/9;
  width: 100%;
  isolation: isolate;
  position: relative;
}
.coinpush__playground canvas {
  width: 100% !important;
  height: 100% !important;
}
.coinpush__sign {
  position: absolute;
  top: 5%;
  right: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background: url("/assets/sprites/coinpush/sign.png");
  width: 20%;
  height: 18%;
  transform: rotate(4deg);
  background-size: 100% 100%;
}
.coinpush__word {
  position: absolute;
  bottom: 6%;
  color: #fff;
  -webkit-text-stroke: #000 5px;
}
.coinpush__score {
  font-size: 3vw;
  color: #fff;
  font-weight: 900;
  background: repeating-linear-gradient(180deg, #ff5656 0%, #ff8f4f 14.28%, #fdf86d 28.56%, #6bf78f 42.84%, #44b7ff 57.12%, #9f62fc 71.4%, #ff5bff 85.68%, #ff5656 100%);
  background-size: 100% 20vh;
  transform-origin: bottom;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: #000 2px;
  paint-order: stroke fill;
  color: transparent;
  animation: rainbow 1s linear infinite;
}
.coinpush__fiole {
  position: absolute;
  left: 2%;
  bottom: 5%;
  width: 7%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  isolation: isolate;
}
.coinpush__fiole-img {
  width: 100%;
  height: 100%;
}
.coinpush__boost {
  position: absolute;
  bottom: 18%;
  left: 35%;
  height: 80%;
  width: 28%;
  z-index: -1;
  background: repeating-linear-gradient(180deg, #ff5656 0%, #ff8f4f 14.28%, #fdf86d 28.56%, #6bf78f 42.84%, #44b7ff 57.12%, #9f62fc 71.4%, #ff5bff 85.68%, #ff5656 100%);
  background-size: 100% 20vh;
  transform: scaleY(var(--boost));
  transition: transform 500ms;
  transform-origin: bottom;
  animation: rainbow 3s linear infinite;
}

.burgertower {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
}
.burgertower__playground {
  aspect-ratio: 16/9;
  width: 100%;
  isolation: isolate;
  position: relative;
  background: url("/assets/sprites/burgertower/kitchen.png");
  background-size: 105% 130%;
  background-position: bottom;
}
.burgertower__playground canvas {
  width: 100% !important;
  height: 100% !important;
}
.burgertower__ingredients {
  position: absolute;
  left: -1%;
  bottom: 2%;
  width: 32%;
  height: 35%;
  gap: 0.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  background-image: url("/assets/sprites/burgertower/nappe.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
  transform: rotate(3deg);
  padding: 0 5%;
  z-index: 100;
}
.burgertower__ingredient {
  width: 48%;
  transition: transform 320ms;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.burgertower__ingredient-img {
  width: 95%;
  transition: transform 320ms;
}
.burgertower__ingredient-img:active {
  transform: scale(0.9);
}
.burgertower__ingredient:hover {
  transform: translateY(-8%);
}
.burgertower__mynthos {
  z-index: 10;
  position: absolute;
  bottom: 35%;
  right: 0;
  left: 0;
  margin: auto;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: row;
}
.burgertower__mynthos img {
  width: 100%;
}
.burgertower__mynthos-mynthos {
  width: 100%;
}
.burgertower__mynthos-handleft {
  animation: kitchenhand 1s infinite linear;
  position: absolute;
  bottom: -27%;
  left: -50%;
  z-index: 2;
  transition: all 320ms;
}
.burgertower__mynthos-ingredient {
  animation: kitchenhand 1s infinite linear;
  position: absolute;
  bottom: -3%;
  left: -6%;
  z-index: 1;
}
.burgertower__mynthos-handright {
  animation: kitchenhand 1s infinite linear;
  position: absolute;
  bottom: -27%;
  left: 30%;
}
.burgertower__stock {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  width: fit-content;
  font-weight: 500;
  font-size: 1.25vw;
  color: #fff;
  -webkit-text-stroke: 6px #000;
  paint-order: stroke fill;
}
.burgertower__name {
  pointer-events: none;
  width: fit-content;
  font-weight: 500;
  font-size: 1.25vw;
  color: #fff;
  -webkit-text-stroke: 6px #000;
  paint-order: stroke fill;
}
.burgertower__menu {
  position: absolute;
  right: 6%;
  bottom: 0%;
  width: 21%;
  height: 98%;
  background-image: url(/assets/sprites/burgertower/menu.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column-reverse;
  padding-bottom: 8%;
}
.burgertower__menu-img {
  height: 5%;
  width: 51%;
  margin: -2%;
}
.burgertower__menu::after {
  content: "COMMANDE A PREPARER";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 54%;
  font-size: 1.75vw;
  top: 6%;
  text-align: center;
  color: #fff;
  -webkit-text-stroke: 6px #000;
  paint-order: stroke fill;
  line-height: 110%;
}
.burgertower__arrow {
  position: absolute;
  left: 18%;
  width: 7%;
  aspect-ratio: 1/1;
  z-index: 1000;
  bottom: 16.5%;
  transition: bottom 320ms;
  image-rendering: auto;
}
.burgertower__kiosk {
  position: absolute;
  left: 1%;
  top: 6.75%;
  width: 27%;
  aspect-ratio: 1/1;
}
.burgertower__kiosk-instructions {
  position: absolute;
  bottom: -2%;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
  z-index: 15;
  image-rendering: auto;
}
.burgertower__kiosk-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.burgertower__kiosk-kiosk {
  z-index: 10;
}
.burgertower__percent {
  position: absolute;
  inset: 0;
  margin: auto;
  font-size: 1.25vw;
  color: #fff;
  -webkit-text-stroke: 4px #000;
  paint-order: stroke fill;
  pointer-events: none;
  text-align: center;
  align-content: center;
  z-index: 100000000;
}

.powerwash {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
}
.powerwash__playground {
  aspect-ratio: 16/9;
  width: 70%;
  isolation: isolate;
  position: relative;
  border: ridge 5px #6174c7;
}
.powerwash__playground canvas {
  width: 100% !important;
  height: 100% !important;
}
.powerwash .hub__door {
  position: absolute;
  top: 4%;
  left: 11%;
  width: 15%;
  height: 35%;
}

.cinema {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
}
.cinema__playground {
  aspect-ratio: 16/9;
  width: 100%;
  isolation: isolate;
  position: relative;
}
.cinema__playground video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.cinema__playground canvas {
  width: 100% !important;
  height: 100% !important;
}
.cinema__button {
  transition: transform 200ms;
  width: 100%;
}
.cinema__button:hover {
  transform: scale(1.1);
}
.cinema__button:active {
  transform: scale(0.8);
}
.cinema__reaction {
  position: relative;
  width: 17%;
}
.cinema__reaction::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  width: 65%;
  height: 0.8rem;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  transform: scaleX(var(--scaleX));
  transform-origin: left;
  transition: transform 250ms;
}
.cinema__console {
  position: absolute;
  bottom: -15.5%;
  left: 0;
  right: 0;
  margin: auto;
  height: 50%;
  aspect-ratio: 16/9;
  background-image: url("/assets/sprites/cinema/console.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  transition: transform 1200ms;
  transform: translateY(60vh);
}
.cinema__console.active {
  transform: translateY(0);
}

.clickers {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  position: relative;
  display: grid;
  width: 100vw;
  height: 100vh;
  margin: 0px;
  padding: 0px;
  gap: 2px;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
}
.clickers .hub__door {
  position: absolute;
  top: 4%;
  left: 11%;
  width: 15%;
  height: 35%;
}
.clickers__clicker {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  background: url("/assets/sprites/pictures/plate.png") no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.clickers__clicker-ammount {
  position: absolute;
  font-size: x-large;
  width: fit-content;
  top: 1%;
  right: 5%;
  text-align: center;
  color: #fff;
  pointer-events: none;
  text-shadow: 0 0 0.5rem #000;
}
.clickers__visual {
  width: 20%;
  transition: transform 120ms;
}
.clickers__visual:hover {
  transform: scaleX(1.1) scaleY(0.9);
}
.clickers__visual:active {
  transform: scaleX(0.7) scaleY(0.8);
}

.snametr {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
}
.snametr__playground {
  aspect-ratio: 16/9;
  width: 100%;
  isolation: isolate;
  position: relative;
}
.snametr__playground canvas {
  width: 100% !important;
  height: 100% !important;
}
.snametr__questions {
  transition: opacity 500ms;
  font-family: Arial, sans-serif;
  color: orange;
}
.snametr__question {
  position: absolute;
  bottom: 25%;
  width: 72%;
  left: 0;
  right: 0;
  margin: auto;
  height: 12%;
  background: url(/assets/sprites/snametr/question.png);
  image-rendering: pixelated;
  background-size: 100% 100%;
  align-content: center;
  justify-content: center;
  text-align: center;
  padding: 1%;
  isolation: isolate;
  z-index: 10;
  font-size: 1.45vw;
}
.snametr__answers {
  position: absolute;
  bottom: 6%;
  width: 72%;
  left: 0;
  right: 0;
  gap: 0.5rem;
  margin: auto;
  height: 15%;
  font-weight: 600;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  align-content: center;
  flex-wrap: wrap;
  font-size: 1.4vw;
}
.snametr__video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  position: absolute;
}
.snametr__answer {
  width: calc(50% - 0.5rem);
  height: 50%;
  background: url("/assets/sprites/snametr/answerLeft.png");
  image-rendering: pixelated;
  background-size: 100% 100%;
  text-align: center;
  align-content: center;
}
.snametr__answer.snametr__answer-pick {
  background: url("/assets/sprites/snametr/answerLeftSelected.png");
  image-rendering: pixelated;
  background-size: 100% 100%;
}
.snametr__answer.snametr__answer-correct {
  background: url("/assets/sprites/snametr/answerLeftCorrect.png");
  image-rendering: pixelated;
  background-size: 100% 100%;
}
.snametr__answer-right {
  background: url("/assets/sprites/snametr/answerRight.png");
  image-rendering: pixelated;
  background-size: 100% 100%;
}
.snametr__answer-right.snametr__answer-pick {
  background: url("/assets/sprites/snametr/answerRightSelected.png");
  image-rendering: pixelated;
  background-size: 100% 100%;
}
.snametr__answer-right.snametr__answer-correct {
  background: url("/assets/sprites/snametr/answerRightCorrect.png");
  image-rendering: pixelated;
  background-size: 100% 100%;
}

.partition {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 0.5rem;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
}
.partition__choir {
  width: 35%;
  height: 100%;
  background-image: url("/assets/sprites/partition/auditorium.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
  position: relative;
}
.partition__main {
  width: 65%;
  height: 100%;
  background-image: url("/assets/sprites/partition/partition.png");
  background-size: 100% 970px;
  image-rendering: pixelated;
  position: relative;
}
.partition__pupitre {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 60%;
  z-index: 10;
}
.partition__head {
  position: absolute;
  width: 40%;
  bottom: 47%;
  left: 8%;
  right: 0;
  margin: auto;
  animation: headmove 18s infinite linear;
}
.partition__handleft {
  position: absolute;
  width: 35%;
  bottom: 32%;
  right: 3%;
  margin: auto;
  z-index: 15;
}
.partition__handnote {
  position: absolute;
  width: 35%;
  bottom: 45%;
  right: 3%;
  margin: auto;
  z-index: 12;
  transform: rotate(0deg);
}
.partition__handright {
  position: absolute;
  width: 65%;
  bottom: 36%;
  left: 8%;
  margin: auto;
  animation: arc 1s infinite alternate-reverse linear;
  z-index: 11;
}
.partition__instruction {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  pointer-events: none;
  bottom: 47%;
  font-size: 2vw;
  color: #fff;
  -webkit-text-stroke: #000 6px;
  animation: float 5s infinite linear;
}
.partition__touches {
  position: absolute;
  width: 80%;
  height: 45%;
  bottom: 1.5%;
  left: 0;
  right: 0;
  margin: auto;
  flex-wrap: wrap;
  align-content: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.partition__notes {
  position: absolute;
  top: 46px;
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: row;
}
.partition__trumpet {
  animation: lilourotate 1s infinite linear;
}
.partition__flute {
  animation: lilourotate 1s infinite linear;
}
.partition__marimba {
  animation: float 2s infinite linear;
}
.partition__touche {
  width: 6vw;
  font-size: 2vw;
  text-align: center;
  align-content: center;
  color: #fff;
  -webkit-text-stroke: 8px #000;
  paint-order: stroke fill;
  aspect-ratio: 1/1.25;
  padding-bottom: 2%;
  user-select: none;
  transition: transform 250ms, width 250ms;
  background: url("/assets/sprites/partition/balloon_do.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.partition__touche:hover {
  transform: translateY(-5%);
}
.partition__touche-do2 {
  background: url("/assets/sprites/partition/balloon_do2.png");
  background-size: 100% 100%;
}
.partition__touche-si {
  background: url("/assets/sprites/partition/balloon_si.png");
  background-size: 100% 100%;
}
.partition__touche-la {
  background: url("/assets/sprites/partition/balloon_la.png");
  background-size: 100% 100%;
}
.partition__touche-lab {
  background: url("/assets/sprites/partition/balloon_lab.png");
  background-size: 100% 100%;
}
.partition__touche-sol {
  background: url("/assets/sprites/partition/balloon_sol.png");
  background-size: 100% 100%;
}
.partition__touche-fa {
  background: url("/assets/sprites/partition/balloon_fa.png");
  background-size: 100% 100%;
}
.partition__touche-mi {
  background: url("/assets/sprites/partition/balloon_mi.png");
  background-size: 100% 100%;
}
.partition__touche-re {
  background: url("/assets/sprites/partition/balloon_re.png");
  background-size: 100% 100%;
}
.partition__note {
  width: 120px;
  animation: noteAppear 1s ease-in-out forwards;
}
.partition__note-do2 {
  transform: translateY(-78%);
}
.partition__note-si {
  transform: translateY(-69%);
}
.partition__note-sib {
  transform: translateY(-69%);
}
.partition__note-la {
  transform: translateY(-57%);
}
.partition__note-lab {
  transform: translateY(-57%);
}
.partition__note-lab {
  transform: translateY(-57%);
}
.partition__note-solb {
  transform: translateY(-47%);
}
.partition__note-sol {
  transform: translateY(-47%);
}
.partition__note-fa {
  transform: translateY(-35%);
}
.partition__note-mib {
  transform: translateY(-26%);
}
.partition__note-mi {
  transform: translateY(-26%);
}
.partition__note-re {
  transform: translateY(-14%);
}
.partition__note-reb {
  transform: translateY(-14%);
}
.partition__note-do {
  transform: translateY(-2%);
}
.partition__instruments {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 70%;
  right: 0;
  left: 0;
  bottom: 18%;
  gap: 1%;
  margin: auto;
}
.partition__instrument {
  height: 100%;
  transition: width 250ms;
  width: 15vw;
}
.partition__curtains {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  transition: transform 1800ms;
  transform: translateY(-100%);
}
.partition__curtains.active {
  transform: translateY(0);
}
.partition__ending {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: 99;
  pointer-events: none;
  background: url("/assets/sprites/partition/theatre.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
  padding-top: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.partition__ending::before {
  content: "";
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.85) 100%);
  animation: dimTwinkle 2s infinite ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

@keyframes lilourotate {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
@keyframes headmove {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes noteAppear {
  0% {
    margin-bottom: -5%;
    opacity: 0;
  }
  100% {
    margin-bottom: 0%;
    opacity: 1;
  }
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9%);
  }
  100% {
    transform: translateY(0);
  }
}
.monnaie {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 0.5rem;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
  background-image: url("/assets/sprites/monnaie/supermarket.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.monnaie__table {
  position: absolute;
  bottom: -0.75%;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 25%;
  background-image: url("/assets/sprites/monnaie/table.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.monnaie__pieces {
  position: absolute;
  z-index: 10;
  bottom: 2%;
  left: 12%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  width: 35%;
  align-content: center;
}
.monnaie__piece {
  width: 20%;
  position: relative;
}
.monnaie__piece::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  width: 65%;
  height: 0.8rem;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  transform: scaleX(var(--scaleX));
  transform-origin: left;
  transition: transform 250ms;
}
.monnaie__piece-img {
  width: 100%;
  transition: transform 250ms;
}
.monnaie__piece-img:hover {
  transform: scale(1.1) translateY(-0.5rem);
}
.monnaie__piece-img:active {
  transform: scale(0.9) translateY(-0.5rem);
}
.monnaie__tas {
  position: absolute;
  right: 38%;
  width: 10%;
  bottom: 10%;
  z-index: 10;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column-reverse;
}
.monnaie__tas-piece {
  width: 7vw;
  margin-top: -6.5vw;
  animation: piece 500ms forwards linear;
}
.monnaie__caisse {
  position: absolute;
  bottom: 10%;
  right: 4%;
  width: 30%;
  aspect-ratio: 1/1;
  background-image: url("/assets/sprites/monnaie/caisse.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
  font-size: 1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 5% 14% 11% 2%;
}
.monnaie__client {
  position: absolute;
  bottom: 21%;
  left: 18%;
  width: 45%;
  animation: moneyfloat 10s infinite;
}
.monnaie__client-client {
  width: 60%;
  transition: transform 2800ms, filter 2200ms 1000ms;
}
.monnaie__client-hide {
  filter: blur(5px) brightness(0);
  transform: translateY(40%);
}
.monnaie__client-dialog {
  position: absolute;
  right: -8%;
  top: -26%;
  width: 61%;
  height: 75%;
  background-image: url(/assets/sprites/monnaie/bubble.png);
  background-size: 100% 100%;
  image-rendering: pixelated;
  padding: 1%;
  font-size: 1.5vw;
  transition: opacity 800ms;
}
.monnaie__title {
  transform: rotate(6deg);
  text-align: center;
  width: 85%;
  color: #2aaa26;
  font-family: "Courier New", Courier, monospace;
}
.monnaie__total {
  transform: rotate(6deg);
  text-align: center;
  width: 85%;
  font-size: 2vw;
  color: #09ff00;
  font-family: "Courier New", Courier, monospace;
}
.monnaie__lostmoney {
  position: absolute;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  color: #fff;
  -webkit-text-stroke: 4px #000;
  font-size: 2.85vw;
  background: var(--rainbow-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: #000 2px;
  paint-order: stroke fill;
  background-size: 100% 20vh;
  font-weight: 800;
  animation: rainbow 1s linear infinite;
}
.monnaie__current {
  transform: rotate(6deg);
  text-align: center;
  width: 85%;
  color: #09ff00;
  font-size: 2vw;
  font-family: "Courier New", Courier, monospace;
}

@keyframes piece {
  0% {
    opacity: 0;
    transform: translateY(-1.5vw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes moneyfloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4%);
  }
  100% {
    transform: translateY(0);
  }
}
.puzzle {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 0.5rem;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
  background-image: url("/assets/sprites/puzzle/wood.png");
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.puzzle__grid {
  width: 45%;
  position: relative;
  aspect-ratio: 1/1;
  background-color: #161616;
  box-sizing: border-box;
  border: ridge 3px #000;
}
.puzzle__modele {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6%;
  margin: auto;
  width: 15%;
  aspect-ratio: 1/1;
  border: ridge 3px #000;
  animation: float 19s infinite;
  pointer-events: none;
  transition: opacity 500ms;
}
.puzzle__tile {
  position: absolute;
  width: 12.5%;
  box-sizing: border-box;
  aspect-ratio: 1/1;
  transition: top 500ms, left 500ms, opacity 500ms, filter 500ms;
}
.puzzle__tile-selected {
  opacity: 0.5;
}
.puzzle__tile-moving {
  z-index: 1000000000000000000;
}
.puzzle__mynthos {
  position: absolute;
  right: 5%;
  bottom: 0;
  width: 20%;
}

.trickshot {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
}
.trickshot__playground {
  aspect-ratio: 16/9;
  width: 100%;
  isolation: isolate;
  position: relative;
}
.trickshot__playground canvas {
  width: 100% !important;
  height: 100% !important;
}

.dvd {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 0.5rem;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
}
.dvd__playground {
  aspect-ratio: 16/9;
  width: 100%;
  isolation: isolate;
  position: relative;
}
.dvd__playground canvas {
  width: 100% !important;
  height: 100% !important;
}
.dvd__table {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 30%;
  isolation: isolate;
}
.dvd__table-table {
  width: 100%;
  image-rendering: auto;
}
.dvd__table-myntho {
  position: absolute;
  top: -70%;
  left: 11%;
  width: 40%;
  z-index: -1;
  animation: float 22s ease-in-out infinite;
}
.dvd__table-miamo {
  position: absolute;
  right: 8%;
  top: -70%;
  width: 40%;
  z-index: -1;
  animation: float 12s ease-in-out infinite;
}

.website {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  background-color: #000;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
}
.website__playground {
  aspect-ratio: 16/9;
  width: 100%;
  isolation: isolate;
  position: relative;
}
.website__playground canvas {
  width: 100% !important;
  height: 100% !important;
}

.early {
  width: 100%;
  height: 100%;
  position: relative;
  gap: 1rem;
  font-family: "Times New Roman", Times, serif;
  background-color: #fff;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
  padding: 1.5vw;
  font-size: 1.2vw;
}
.early__description {
  width: 35%;
}
.early__link {
  color: blue;
  text-decoration: underline;
  display: inline;
}
.early__text {
  display: inline;
}
.early span {
  display: inline;
}

.minecrafr {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  font-family: "Comic Sans MS", cursive, sans-serif;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
  font-size: 1.2vw;
  background: url("/assets/sprites/website/minecrafr/minecraft1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.minecrafr__description {
  width: 35%;
}
.minecrafr__link {
  color: blue;
  text-decoration: underline;
}
.minecrafr__core {
  width: 55%;
  height: 100%;
  border-right: 5px solid black;
  border-left: 5px solid black;
  background: url("/assets/textures/grass.png");
  background-size: 80%;
  gap: 1%;
  padding: 1%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  color: #fff;
  -webkit-text-stroke: 15px black;
  font-size: 1.6vw;
  position: relative;
}
.minecrafr__portrait {
  position: absolute;
  right: 2%;
  top: 10%;
  width: 27%;
}
.minecrafr iframe {
  border: solid 5px black;
}
.minecrafr__text {
  width: 65%;
}
.minecrafr span {
  display: inline;
}

.cms {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding-top: 10vh;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  image-rendering: pixelated;
  isolation: isolate;
  overflow: hidden;
  font-size: 1.2vw;
  background-color: #212121;
}
.cms__header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 10vh;
  background-color: #121212;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  padding: 0 1%;
}
.cms__header-li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  color: #fff;
  gap: 5%;
  white-space: nowrap;
}
.cms__header-icon {
  height: 100%;
}
.cms__header-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 2vw;
  width: 40%;
}
.cms__title {
  font-size: 1.5vw;
  color: #732E93;
}
.cms__about {
  position: relative;
}
.cms__about-text {
  position: absolute;
  inset: 0;
  text-align: center;
  align-content: center;
  color: #fff;
  margin: auto;
  z-index: 10;
}
.cms__description {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  color: #fff;
  gap: 2%;
  padding: 1%;
}
.cms__desc {
  font-size: 0.95vw;
  width: 40%;
}
.cms__footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10vh;
  color: #828282;
  padding: 0 1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  background-color: #121212;
}/*# sourceMappingURL=main.css.map */