/* body { */
    /* background-repeat: no-repeat; */
    /* height: auto; */
/* } */
/* .test{
    background-color: brown;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;

} */

.particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1005;
}

.particles-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1006;
}

.particles-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    will-change: transform;
}

.vibration {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: vibrate 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}
@keyframes vibrate {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-1deg); }
  20% { transform: rotate(1deg); }
  30% { transform: rotate(0deg); }
  40% { transform: rotate(1deg); }
  50% { transform: rotate(-1deg); }
  60% { transform: rotate(0deg); }
  70% { transform: rotate(-1deg); }
  80% { transform: rotate(1deg); }
  90% { transform: rotate(0deg); }
  100% { transform: rotate(-1deg); }
}
/* .particles-button {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: relative;
	border-radius: 5px;
	border-radius: var(--radius-button);
	background: var(--color-button-bg);
	color: var(--color-button-text);
	border: 0;
	border: var(--border-button);
	margin: 0;
	padding: 1.5rem 3rem;
	padding: var(--button-padding);
	will-change: transform;
}

.particles-button:focus {
	outline: none;
}

.no-js .particles-button {
	grid-area: 1 / 1 / 2 / 2;
} */
.container { 
    height: 100%;
    position: relative;
}

.container .calendar-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

#ui-layer {
    position: absolute;
    inset: 0;
    z-index: 5000;
    pointer-events: none;
}

/* Quand la caméra zoome (transform), le texte peut devenir flou.
   On masque le texte "scalé" et on affiche une copie nette dans #ui-layer. */
.case-to-open.zoom-text-hidden .bg-case-wrapper {
    opacity: 0;
}
.case-grid{
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.1); /* optionnel : affiche la grille */
    float: left;

    /* Empêche la sélection / "saisie" accidentelle sur mobile/desktop */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.case-grid * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.case-to-open {
    position: relative;
    cursor: pointer;
}
.case-to-open.animated {
    z-index: 2000;
}
.case-to-open[data-openable="false"] {
    cursor: default;
}

/* Face interne : elle porte le background découpé + l'animation d'ouverture (rotateY). */
.case-to-open .case-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
/* Numéro/name de la config, en bas à gauche de la face */
.case-to-open .case-face::before {
    content: attr(data-case-name);
    position: absolute;
    left: 4px;
    bottom: 4px;
    color: white;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}


/* Effet "brillance" interne en continu (haut-gauche -> bas-droit)
   -> à activer en ajoutant la classe "shiny" sur .case-face */
.case-to-open .case-face.shiny::after {
    content: "";
    position: absolute;
    inset: -60%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.22) 42%,
        rgb(255, 255, 255) 50%,
        rgba(255, 255, 255, 0.275) 58%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translate3d(-30%, -30%, 0);
    animation: case-shine-sweep 2400ms linear infinite;
}
/* .zoom-camera .case-gain-image {
  visibility: hidden;
} */
@keyframes case-shine-sweep {
    0% {
        transform: translate3d(-35%, -35%, 0);
        opacity: 0.0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate3d(35%, 35%, 0);
        opacity: 0.0;
    }
}

/* Zoom sur la case (effet "on rentre dans la case").
   Les valeurs sont calculées en JS et injectées via variables CSS. */
.case-to-open.zoom-in {
    --zoom-x: 0px;
    --zoom-y: 0px;
    --zoom-scale: 2.2;
    transition: transform 450ms ease;
    transform: translate(var(--zoom-x), var(--zoom-y)) scale(var(--zoom-scale));
    z-index: 999;
}
#calendar-game-container {
    background-image: url('../assets/hud/d-wheel-step_bg.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 850px;
    height: 850px;  
    position: relative;
    overflow: hidden;
    will-change: transform;
    transform-origin: 0 0;

    /* Valeurs par défaut (remplacées par JS quand l'image est chargée) */
    --bg-draw-w: 100%;
    --bg-draw-h: 100%;
    --bg-offset-x: 0px;
    --bg-offset-y: 0px;
}

/* Ombre en bas pour donner de la profondeur (sans bloquer les clics) */
#calendar-game-container::after {
    content: "";
    position: absolute;
    /* On colle l'ombre à la zone réelle du background (contain) */
    left: calc(var(--bg-offset-x) + (var(--bg-draw-w) * 0.06));
    top: calc(var(--bg-offset-y) + var(--bg-draw-h) - (var(--bg-draw-h) * 0.12));
    width: calc(var(--bg-draw-w) * 0.88);
    height: calc(var(--bg-draw-h) * 0.12);
    pointer-events: none;
    /* Au-dessus des cases (z-index: 10), sous #ui-layer (z-index: 5000) */
    /* z-index: 900; */
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.95;
    transform: translateZ(0);
    background: radial-gradient(ellipse at 50% 100%, 
    rgb(0 0 0) 0%, 
    rgb(0 0 0 / 77%) 35%, 
    rgb(0 0 0 / 35%) 75%
    );
}
.scene {
  position: relative;
  width: 100%;
  height: 100%;
}


/* Zoom "caméra" : on transforme tout le container (background + cases) pour donner
   l'impression de rentrer dans la case cliquée. */
#calendar-game-container.zoom-camera {
    --cam-x: 0px;
    --cam-y: 0px;
    --cam-scale: 1;
    transform-origin: 0 0;
    transform: translate(var(--cam-x), var(--cam-y)) scale(var(--cam-scale));
    transition: transform 450ms ease;
}

/* .background {
    transform-origin: right;
    background-image: url("/assets/hud/d-wheel-step_bg.jpg");
    width: 100%;
    height: 100%;
    background-position: inherit;
}

.case:hover {
    cursor: pointer;
}

.pop-up-parent {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    display: flex;
    z-index: 200;
}

.pop-up {
    height: 80%;
    width: 50%;
    background: aliceblue;
    margin: auto;
    position: relative;
    /* display: flex; */
    /* justify-content: center; */
    /* text-align: center; */
    /* border-radius: 10px; */
/* } */
/* 
.filter {
    filter: blur(4px);
} */

/* .remove-pop-up {
    border: none;
    color: red;
    font-size: x-large;
    position: absolute;
    right: 0;
    cursor: pointer;
    border-radius: 0 10px 0 0;
} */
/* 
.file-pop-up {
    height: 35%;
    margin-top: 5%;
    width: fit-content;
} */

.case-face.animate {
    perspective: 1000px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform-origin: left !important;
    animation: animate 2s ease forwards;
    z-index: 200;
} 

.case-face.shadow {
    perspective: 1000px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform-origin: left !important;
    animation: shadow 2.25s ease forwards;
    z-index: 200;
    box-shadow: black 0px 0px 0px 0px;
} 

@keyframes animate {
    to {
        transform: perspective(1000px) rotateY(-90deg);
    }
}

@keyframes shadow {
    to {
        transform: perspective(1050px) rotateY(-90deg);
        opacity: 1;
        filter: none;
    }
}


.overlay-anim {
  transform: translateY(40px);
  opacity: 0;
  transition:
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
}

.overlay-anim.show {
  transform: translateY(0);
  opacity: 1;
}
/* .box-shadow {
    opacity: 0.5;
    z-index: 10;
    width: 100%;
    position: absolute;
    height: 100%;
}  */