*,
div {
    position: relative
}

* {
    user-select: none
}
p{
  color: #FFFFFF;
}
:root {
    --border-thickness: 2px;
    --border-2x-thickness: calc(2 * var(--border-thickness));
    --button-font-size: 20px;
} 
::selection{
  background-color: #848484;
  color: #FFFFFF;
}
.header {
  opacity: 0;
  transform: translateY(-20px);
  animation: slideDownFadeIn 1s ease-out 0.2s forwards;
}

.content {
  opacity: 0;
  transform: translateY(10px);
  animation: slideUpFadeIn 1s ease-out 0.4s forwards;
}

.title {
  opacity: 0;
  transform: translateY(10px);
  animation: slideUpFadeIn 0.9s ease-out 0.9s forwards;
}

.description {
  opacity: 0;
  transform: translateY(10px);
  animation: slideUpFadeIn 0.9s ease-out 0.8s forwards;
}

.button {
  opacity: 0;
  transform: translateY(10px);
  animation: slideUpFadeIn 1s ease-out 1s forwards;
}

/* الكلاسات الأساسية للأنيميشن */
@keyframes slideDownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

input[type="file"],
input[type="checkbox"],

button {
    -webkit-tap-highlight-color: transparent !important
}

div.inputDisable div.filename {
    user-select: none
}

div.header,
div.title {
    font-family: minecraft-ten
    
}


a.link {
    user-select: text
    
}

a.link,
button,
input {
    cursor: pointer
}

* {
    font-family: minecraft;
    color: #000000;
    font-size: 14px
}

body {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #222222
}

body::-webkit-scrollbar {
    width: 5px
}

body::-webkit-scrollbar-thumb {
    background-color: #69696967
}
img {
  image-rendering: crisp-edges; /* يجعل الصورة أكثر وضوحًا */
  image-rendering: -webkit-optimize-contrast; /* تحسين الوضوح على متصفح كروم */
}

div.header {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background-color: #4B4B4B8F;
    backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(5px);
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    z-index: 100;
    font-size: 35px;
    position: static;
    border-bottom: 4px solid #282828;
    color: #B9B9B9;
    text-shadow: 0 4px 4px  #3F3F3F;
}



button,
div.content {
    position: relative
}

button {
  text-align: center;     /* يوسّط النص والصورة أفقيًا */
}

button img {
  display: inline-block;  /* حتى يمكن تنسيقه مع النص */
  vertical-align: middle; /* محاذاة عمودية للنص */
  
}
div.content {
  display: block;
  text-align: center;
  line-height: 23px;
  padding: 15px;
  background-color: #262626;
  border-bottom: 2px solid #383838;
}

div.description {
   margin-top: 5px;
    margin-bottom: 5px;
    height: calc(auto + 10px);
    width: calc(100% - 20px);
    color: #fff;
    padding: 10px;
  background-color: #262626;
  border-bottom: 2px solid #383838;
  
}

div.title {
    color: #FFFFFF; 
    font-size: 20px;
    margin-bottom: 2px
}

a.link {
    color: #C2C2C2;
     font-family: minecraft-five;
    text-decoration-line: none;
    
}

a.link:hover {
    color: #757575
    
}

.content-modal {
  display: flex;
  min-height: fill;
}

.dialog-modal {
  margin-top: 15px;
  max-width: 500px;
}

.dialog-modal-wrapper {
  margin-inline: 20px;
  border: 2px solid #000000;
}

.dialog-header {
  display: flex;
  padding: 10px;
  background-color: #505050;
  border: 2px solid #5e5e5e;
} 


.dialog-content {
  display: block;
  text-align: center;
  padding: 15px;
  background-color: #262626;
  border-bottom: 2px solid #383838;
}

.dialog-bottom-content {
  display: flex;
  padding: 2.5px;
  min-height: 40px;
  background-color: #262626;
  border-bottom: 2px solid #383838;
}

.button {
  margin: auto;
  border: 2px solid #000000;
}

.button:hover {
  margin: auto;
  border: 2px solid #00000000;
}




  .input-container {
  display: flex;
    
  }
  
input {
  width: 70%;
  box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
  border: 2px solid #303233;
  padding: 10px;
  outline: none;
    background-color: #ECECEC00;
    
  color: #C7C7C7;
    transition: all 0.5s;
  } 
  input:hover {
  border: 2px solid #303233;
    box-shadow: 0 2px 10px #5F5F5F;
  }
  .points {
      font-size: auto; 
      color: #FFD952;
      text-shadow:0px 1px 0px #3A2700;
          
    }

       .back {
            position: absolute;
            border: none;
            background-color: transparent;
            left: 10px;
            cursor: pointer;
            padding: 5px;
            font-size: 25px;
            z-index: 9999;
            text-align: center;
            transition: all 0.7s ;

        } 
        .back:hover{
          color: #9C9C9C;
        }
      
#whiteButton:hover {
    transform: translateY(var(--border-2x-thickness));
    height: auto;
    width: 100%;
    position: relative;
    color: #262626;
    background-color: #A0A0A0;
    box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
}

#whiteButton {
  transition: all 0.5s;
  height: auto;
  width: 100%; 
  border: 2px solid #C4C4C4;
  background-color: #D9D9D9;
  width: 100%;
  font-size: 16px;
box-shadow: 0px var(--border-2x-thickness) 0px #999999,
0 0 0 var(--border-thickness) #1a1a1b,
0 var(--border-2x-thickness) 0 var(--border-thickness) #1a1a1b;
width: 100%;
border-radius: 8px;
color: #000000;
padding: 8px 15px;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
}

#greenButton:hover { 
    background-color: #14520D;
    position: relative;
    transform: translateY(var(--border-2x-thickness));
    box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
}

#greenButton  {
  transition: all 0.5s;
  background-color: #2C8014;
  color: #FFFFFF;
  height: auto;
  width: 100%; 
  border: 2px solid #4f913c;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  padding: 10px;
  margin:auto;
      box-shadow:
        0px var(--border-2x-thickness) 0px #1E7831,
        0 0 0 var(--border-thickness) #1a1a1b,
        0 var(--border-2x-thickness) 0 var(--border-thickness) #1a1a1b;
  
}


#redButton:hover {
  transform: translateY(var(--border-2x-thickness));
  height: auto;
  width: 100%;
  position: relative;
  background-color: #B60000;
  box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
}

#redButton {
  transition: all 0.5s;
  text-shadow: 1px 1px 0.9px #000000;
  height: auto;
  width: 100%;
  border: 2px solid #4B0000;
  border: 2px solid #8E2727;
  background-color: #FF3838;
      box-shadow:
        0px var(--border-2x-thickness) 0px #781e1e,
        0 0 0 var(--border-thickness) #1a1a1b,
        0 var(--border-2x-thickness) 0 var(--border-thickness) #1a1a1b;
  
  font-size: 16px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 10px;
  color: #FFFFFF;
  margin: auto;
}

#purpleButton:hover {
  transform: translateY(var(--border-2x-thickness));
  height: auto;
  width: 100%;
  position: relative;
  background-color: #A40EB6;
  box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
}

#purpleButton {
  transition: all 0.5s;
  height: auto;
  border: 2px solid #DD42E7;
  background-color: #C50DD8;
      box-shadow:
        0px var(--border-2x-thickness) 0px #C62ECC,
        0 0 0 var(--border-thickness) #1a1a1b,
        0 var(--border-2x-thickness) 0 var(--border-thickness) #1a1a1b;
  width: 100%;
border-radius: 8px;
font-size: 16px;
color: #F5F5F5;
padding: 8px 15px;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
}
#goldButton:hover {
  transform: translateY(var(--border-2x-thickness));
  height: auto;
  width: 100%;
  position: relative;
  background-color: #BE7C16;
  box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
}

#goldButton {
  background-color: hsla(42, 77%, 50%, 1);
border: 2px solid #FFC372;
box-shadow: 0px var(--border-2x-thickness) 0px #E19224,
0 0 0 var(--border-thickness) #1a1a1b,
0 var(--border-2x-thickness) 0 var(--border-thickness) #1a1a1b;
width: 100%;
border-radius: 8px;
color: #000000;
padding: 8px 15px;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
}

#blueButton:hover { 
    background-color: #1F0E91;
    transform: translateY(var(--border-2x-thickness));
    height: auto;
    width: 100%;
    position: relative;
    box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
}

#blueButton  {
  transition: all 0.5s;
  text-shadow: 1px 1px 0.9px #000000;
  background-color: #2F16D9;
  color: #FFFFFF;
  height: auto;
  width: 100%; 
  border: 2px solid #3449FF;
      box-shadow:
        0px var(--border-2x-thickness) 0px #291E78,
        0 0 0 var(--border-thickness) #1a1a1b,
        0 var(--border-2x-thickness) 0 var(--border-thickness) #1a1a1b;
  
  font-size: 16px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 10px;
  margin:auto;
}

#message-input {
  flex: 1;
  padding: 15px;
  outline: none;
  background-color: #1E1E1F; 
  border: 3px solid #303233;
  box-shadow: 0px 3px 0px rgba(60, 60, 60, 1);
  color: #FFFFFF;
  background: #1e1e1f;
  margin: auto;
  
}
.whiteButton:hover {
    transform: translateY(var(--border-2x-thickness));
    height: auto;
    width: 100%;
    position: relative;
    color: #262626;
    background-color: #A0A0A0;
    box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
}
.whiteButton {
  transition: all 0.5s;
  height: auto;
  width: 100%; 
  border: 2px solid #C4C4C4;
  background-color: #D9D9D9;
  width: 100%;
  font-size: 16px;
box-shadow: 0px var(--border-2x-thickness) 0px #999999,
0 0 0 var(--border-thickness) #1a1a1b,
0 var(--border-2x-thickness) 0 var(--border-thickness) #1a1a1b;
width: 100%;
border-radius: 8px;
color: #000000;
padding: 8px 15px;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
}

.greenButton:hover { 
    background-color: #14520D;
    position: relative;
    transform: translateY(var(--border-2x-thickness));
    box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
}

.greenButton  {
  transition: all 0.5s;
  background-color: #2C8014;
  color: #FFFFFF;
  height: auto;
  width: 100%; 
  border: 2px solid #4f913c;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  padding: 10px;
  margin:auto;
      box-shadow:
        0px var(--border-2x-thickness) 0px #1E7831,
        0 0 0 var(--border-thickness) #1a1a1b,
        0 var(--border-2x-thickness) 0 var(--border-thickness) #1a1a1b;
  
}


.redButton:hover {
  transform: translateY(var(--border-2x-thickness));
  height: auto;
  width: 100%;
  position: relative;
  background-color: #B60000;
  box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
}

.redButton {
  transition: all 0.5s;
  text-shadow: 1px 1px 0.9px #000000;
  height: auto;
  width: 100%;
  border: 2px solid #4B0000;
  border: 2px solid #8E2727;
  background-color: #FF3838;
      box-shadow:
        0px var(--border-2x-thickness) 0px #781e1e,
        0 0 0 var(--border-thickness) #1a1a1b,
        0 var(--border-2x-thickness) 0 var(--border-thickness) #1a1a1b;
  
  font-size: 16px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 10px;
  color: #FFFFFF;
  margin: auto;
}

.purpleButton:hover {
  transform: translateY(var(--border-2x-thickness));
  height: auto;
  width: 100%;
  position: relative;
  background-color: #A40EB6;
  box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
}

.purpleButton {
  transition: all 0.5s;
  height: auto;
  border: 2px solid #DD42E7;
  background-color: #C50DD8;
      box-shadow:
        0px var(--border-2x-thickness) 0px #751E78,
        0 0 0 var(--border-thickness) #1a1a1b,
        0 var(--border-2x-thickness) 0 var(--border-thickness) #1a1a1b;
  width: 100%;
border-radius: 8px;
font-size: 16px;
color: #F5F5F5;
padding: 8px 15px;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
}
.goldButton:hover {
  transform: translateY(var(--border-2x-thickness));
  height: auto;
  width: 100%;
  position: relative;
  background-color: #BEBB00;
  box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
}

.goldButton {
  background-color: hsla(42, 77%, 50%, 1);
border: 2px solid #FFC372;
box-shadow: 0px var(--border-2x-thickness) 0px #7E4B04,
0 0 0 var(--border-thickness) #1a1a1b,
0 var(--border-2x-thickness) 0 var(--border-thickness) #1a1a1b;
width: 100%;
border-radius: 8px;
color: #000000;
padding: 8px 15px;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
}

.blueButton:hover { 
    background-color: #1F0E91;
    transform: translateY(var(--border-2x-thickness));
    height: auto;
    width: 100%;
    position: relative;
    box-shadow: 0 0 0 var(--border-thickness) #1a1a1b;
}

.blueButton  {
  transition: all 0.5s;
  text-shadow: 1px 1px 0.9px #000000;
  background-color: #2F16D9;
  color: #FFFFFF;
  height: auto;
  width: 100%; 
  border: 2px solid #3449FF;
      box-shadow:
        0px var(--border-2x-thickness) 0px #291E78,
        0 0 0 var(--border-thickness) #1a1a1b,
        0 var(--border-2x-thickness) 0 var(--border-thickness) #1a1a1b;
  
  font-size: 16px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 10px;
  margin:auto;
}

.message-input {
  flex: 1;
  padding: 15px;
  outline: none;
  background-color: #1E1E1F; 
  border: 3px solid #303233;
  box-shadow: 0px 3px 0px rgba(60, 60, 60, 1);
  color: #FFFFFF;
  background: #1e1e1f;
  margin: auto;
  
} 
    #points {
      color: #FFBC13; 
      font-size: 15px; 
    }