/*
------------------------------------------
Ecran de connexion plus joli par u/TheEpicSnowWolf
basé sur le code de u/bass-blowfish
Edité par Padhiver pour la V9
Edité par Sasmira pour les version v10/v11/v12
------------------------------------------
*/
:root{
  --glassy: 0px 0px 3px 0px rgba(255, 255, 255, 0.4) inset, 0px 0px 2px 1px rgba(0, 0, 0, 1), 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
  --glassy-shadow: var(--glassy) , var(--box-shadow);
  --glass-bg: rgba(20, 20, 20, 0.6);
  --glass-bg-light: rgba(255, 255, 255, 0.1);
  --glass-bg-dark: rgba(0, 0, 0, 0.7);
  --pf2e-shadow-is-dark: 0px 1px var(--pf2e-half-transparent-dark);
  --pf2e-translucent-middle: var(--pf2e-translucent-middle-for-light);
  --pf2e-translucent-middle-for-light: hsla(0, 0%, 80%,0.5);
  --pf2e-translucent-very: var(--pf2e-translucent-very-for-light);
  --pf2e-transcluent-very-for-light: hsla(0, 0%, 60%,0.2);
  --header-text-shadow: var(--pf2e-shadow-is-dark);
  --pf2e-shadow-is-dark: 0px 1px var(--pf2e-half-transparent-dark);
  --filter-dark: invert(100%) drop-shadow(0px 1px 1px black);
  --pf2e-half-transparent-dark: hsla(0, 0%, 0%,0.5);
  --color-text-hyperlink: #ff6400;
  --gold-and-glow: 0 0 0 1px var(--tertiary), 0 0 0 2px #9f725b, inset 0 0 3px rgba(255, 255, 255, .5);
  --red: #5e0000;
  --red-light:#ff0000;
  --custom-trait:#61180e;
  --green: #91a82a;
  --pfui-main-color: #cfbda7;
  --pfui-main-grey-color: #98968a;
  --rpg-styled-ui-color: #837360;
  --silver-pink:rgb(196,174,173);

  --border-radius: 3px;
  --border-radius-5: 5px;
  --box-shadow: 0px 1px 3px 1px black;
  --box-shadow-light: inset 0 0 0 1px rgba(255, 255, 255, 0.15), inset 0 0 0 2px rgba(0, 0, 0, 0.4), inset 0px 0px 3px 1px var(--color-cool-3);
  --text-shadow: 0px 1px 2px black;

/* Foundry2
====================================================== */
  --color-light-1: #f7f3e8;
  --color-light-1-90: #f7f3e890;
  --color-light-2: #efe6d8;
  --color-light-2-90: #efe6d890;
  --color-light-3: #e7d1b1;
  --color-light-3-90: #e7d1b190;
  --color-light-4: #d0b8a3;
  --color-light-4-90: #d0b8a390;
  --color-light-5: #9f8475;
  --color-light-5-90: #9f847590;
  --color-light-6: #816b66;
  --color-light-6-90: #816b6690;
  --color-warm-1: #ee9b3a;
  --color-warm-1-90: #ee9b3a90;
  --color-warm-2: #c9593f;
  --color-warm-2-90: #c9593f90;
  --color-warm-3: #5d142b;
  --color-warm-3-90: #5d142b90;
  --color-warm-4: #420418;
  --color-warm-4-90: #42041890;
  --color-warm-5: #26020d;
  --color-warm-5-90: #26020d90;
  --color-cool-1: #b1a0d4;
  --color-cool-1-90: #b1a0d490;
  --color-cool-2: #79689c;
  --color-cool-2-90: #79689c90;
  --color-cool-3: #584a75;
  --color-cool-3-90: #584a7590;
  --color-cool-4: #302831;
  --color-cool-4-90: #30283190;
  --color-cool-5: #0b0a13;
  --color-cool-5-25: rgba(11, 10, 19, 0.25);
  --color-cool-5-50: rgba(11, 10, 19, 0.5);
  --color-cool-5-75: rgba(11, 10, 19, 0.75);
  --color-cool-5-90: rgba(11, 10, 19, 0.9);

  --color-level-error: #ce0707;
  --color-level-error-bg: rgba(105, 0, 8, 0.8);
  --color-level-error-border: #750003;
  --color-level-info: #59a1f6;
  --color-level-info-bg: rgba(47, 80, 132, 0.8);
  --color-level-info-border: #5c87b9;
  --color-level-success: #26b231;
  --color-level-success-bg: rgba(26, 107, 34, 0.8);
  --color-level-success-border: #1b8f23;
  --color-level-warning: #ee9b3a;
  --color-level-warning-bg: rgba(214, 150, 0, 0.8);
  --color-level-warning-border: #b18404;
  --color-scrollbar: #5d142b;
  --color-scrollbar-border: #8d151b;
}

.window-app,
.application {
  background: transparent;
  backdrop-filter: blur(15px);
  color: var(--pfui-main-color);
  box-shadow: var(--box-shadow);
}
.application .window-header,
.window-app .window-header {
  background: transparent;
  backdrop-filter: blur(15px);
  color: var(--pfui-main-color);
  border:none!important;
}
/* scrollbar*/
* {
  scrollbar-color: initial;
  scrollbar-width: auto!important;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(315deg, var(--color-warm-3), var(--color-warm-4))!important;
  border: 1px dotted var(--color-cool-3)!important;
}
#join-game .application {
  margin-bottom: 10px;
  opacity: 0.75;
  animation: blurFade 3s ease-out 1;
}
body.auth #watermark #software-version {
  opacity: 0.25;
}
#join-game .application:hover,
body.auth #watermark #software-version:hover { 
  opacity: 1;
  transition: text-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out, border 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, backdrop-filter 0.15s ease-in-out, border-radius 0.15s;
}

/* Cacher la description du monde et les informations de session */
body.join #join-game-world,
body.join #join-game-details.application.standard-form.framed {
    display: none;
}
/* Largeur et position du masque de connexion */
body.join #join-game {
  --max-width: 400px;
  display: unset;
}

/* Logo comme titre du monde */
body.auth #main-header {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 120px !important;
}
body.auth #main-header h1 {
  color: var(--silver-pink);
  text-shadow: var(--text-shadow);
}

/* Restructurer les entrées */
nav.tabs .item.active {
  color: var(--color-warm-1);
  text-shadow: 0 0 8px var(--color-warm-2);
}
#join-game input, #join-game select, #join-game button {
  font-size: 18px;
  width: 100%;
  background: var(--background);
  color: var(--pfui-main-color)!important;
  border-radius: 20px;
}

/* Restyler les boutons */
#join-game button {
  background: #5e0000;
  border: none;
  color: var(--pfui-main-color)!important;
  margin-bottom: 0px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), inset 0 0 0 2px rgba(0, 0, 0, 0.4);
}

#join-game button:hover {
  background: var(--green);
  color:var(--background)!important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), inset 0 0 0 2px rgba(0, 0, 0, 0.4);
}

/* Alignement supérieur des étiquettes de formulaire */
#join-game .form-group {
  margin-bottom: 10px;
}
#join-game .form-group label {
  display: none;
}


/* ----------------------------------------- */
/* Nouveaux styles et effets
/* ----------------------------------------- */

/* Corps : Application de l'effet blurFade à l'arrière-plan, pour qu'il couvre l'écran et le centre.
Convertir également en flexbox pour centrer verticalement de façon dynamique le conteneur section#setup.Il y avait certains calculs effectués pour centrer verticalement qui n'étaient pas assez dynamiques pour convenir à cette configuration (c'est-à-dire top : calc(50% - 300px).  Peut-être qu'à l'avenir, il pourrait y avoir un conteneur parent pour section#setup afin que nous n'ayons pas à modifier le <body> pour qu'il devienne un flexbox.*/
/*
body.vtt.players {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation: blurFade 3s ease-out 1;
}

/* Conteneur du corps des panneaux : Ajoute l'animation zoomOut */
/*.vtt.players #setup .join-body {
    animation: zoomOut 1s .5s cubic-bezier(0.3, 0.05, 0.24, 1) both;
}

.vtt.players #setup.join #world-title {
    text-align: center;
    padding: 15px 30px;
    height: auto;
    animation: zoomOut 1s 0s cubic-bezier(0.3, 0.05, 0.24, 1) both;
}
*/

/* Animations */
@keyframes zoomOut {
  0% {
    transform: scale(1.4);
    opacity: 0;
}
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

@keyframes blurFade {
  0% {
    backdrop-filter: brightness(1) blur(0px);

}
  100% {
    backdrop-filter: brightness(1) blur(15px);
  }
}