body {
  padding: 0;
  margin: 0;
  height: 100vh;
}

*{
    box-sizing: border-box;
    user-select: none;
}

#agentSelectMenuBackground {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14.8px);
  -webkit-backdrop-filter: blur(14.8px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 100;
}
#agentSelectMenuBackground.agentsLocked{
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    pointer-events: none;
    z-index: 2;
    transition: .7s ease-in-out;
}

#agentSelectMenuBackground h2 {
  font-family: "VALORANT", sans-serif;
  color: white;
  font-size: 3vw;
  margin-bottom: 4vh;
}
#agentSelectH2.agentsLocked{
    opacity: 0;
    transition: .7s ease-in-out;
}

#agentContainer {
  width: 46vw;
  /*    height: 70vh;*/
/*  background-color: rgba(32, 31, 33, 0.8);*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2vw;
  overflow: visible;
}

#clove:before {
  background-image: url("images/agents/clove.png");
}
#iso:before {
  background-image: url("images/agents/iso.png");
}
#jett:before {
  background-image: url("images/agents/jett.png");
}
#omen:before {
  background-image: url("images/agents/omen.png");
}
#sage:before {
  background-image: url("images/agents/sage.png");
}
#skye:before {
  background-image: url("images/agents/skye.png");
}
#sova:before {
  background-image: url("images/agents/sova.png");
}
#vyse:before {
  background-image: url("images/agents/vyse.png");
}
#enemy_clove:before {
  background-image: url("images/agents/clove.png");
}
#enemy_iso:before {
  background-image: url("images/agents/iso.png");
}
#enemy_jett:before {
  background-image: url("images/agents/jett.png");
}
#enemy_omen:before {
  background-image: url("images/agents/omen.png");
}
#enemy_sage:before {
    background-image: url("images/agents/sage.png");
}
#enemy_skye:before {
  background-image: url("images/agents/skye.png");
}
#enemy_sova:before {
  background-image: url("images/agents/sova.png");
}
#enemy_vyse:before {
  background-image: url("images/agents/vyse.png");
}


.agentSelect {
  position: relative;
  height: 15vw;
  border-radius: 0.5vw;
  aspect-ratio: 2/3;
  cursor: pointer;
  /*background-size: cover;*/
  user-select: none;
  /*-webkit-user-drag: none;*/
  /*pointer-events: auto;*/
  /*background-color: #38334a;*/
}

.agentSelect:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    cursor: pointer;
    background-size: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    background-color: #38334a;
}

.agentSelect:after {
  content: "";
  position: absolute;
  background-image: url("images/Asset 5.svg");
  width: 110%;
  height: 105%;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1000;
  background-position: center;
  top: -50%;
  left: -50%;
  transform: translate(40.4%, 45.3%);
  user-select: none;

  /* meow tohle je on purpose ten error */
  animation: var(--border-animation, none);
  filter: var(
    --border-filter,
    brightness(0) saturate(100%) invert(91%) sepia(24%) saturate(5001%)
      hue-rotate(342deg) brightness(89%) contrast(92%)
  );
}
.agentSelect:hover {

    box-shadow: 0px 0px 7vw 1vw rgba(250,201,53,0.46);
    transition: .3s ease-in-out;
}
.agentSelect:before {
    transition: .3s ease-in-out;
}
.agentSelect:hover:before {
    filter: grayscale(100%);
}

.glint {
  width: 100%;
  height: 100%;
  z-index: 10000;
    mix-blend-mode: color-dodge;
  background-repeat: no-repeat;
  background-position: -25vw -20vw, 0 0;

  background-image: linear-gradient(
    to top right,
    rgba(156, 124, 0, 0.5) 0%, rgba(255, 214, 8, 0.48) 35%, rgba(255, 255, 255, 1) 36%, rgba(255, 255, 255, 1) 42%, rgba(217, 176, 13, 0.28) 42%, rgba(222, 181, 20, 0.14) 47%, rgba(255, 255, 255, 1) 48%, rgba(255, 255, 255, 1) 51%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 100%);
  background-size: 550% 550%, 100% 100%;


  transition: background-position 0.3s ease;
}

.agentSelect:hover .glint {
  background-position: 0vw -40vw, 0 0;
  transition-duration: 0.5s;

}

.agentSelect.selected:before{
    filter: grayscale(100%); !important;
}

.agentSelect.selected .glint{
    background-position: 0vw -40vw, 0 0 !important;
}
.agentSelect.selected:hover:before {
    filter: grayscale(100%) !important;
}

.agentSelect.selected:hover .glint {
    background-position: 0vw -40vw, 0 0 !important;
}
.agentSelect.agentsLocked{
    opacity: 0;
    transition: .7s ease-in-out;
}
.agentSelect.inGame:before{
    filter: grayscale(0%); !important;
    cursor: default !important;
}
.agentSelect.inGame:after {
    z-index: 1 !important;
}
.agentSelect.inGame .glint {
    background-position: -25vw -20vw, 0 0 !important;

    z-index: 1 !important;
}
.agentSelect.inGame {
    z-index: 1 !important;
}
.agentSelect.inGame:hover:before {
    filter: grayscale(0%) !important;
}
.agentSelect.inGame:hover .glint {
    background-position: -25vw -20vw, 0 0 !important;
}
.agentSelect.inGame:hover{
    box-shadow: none !important;
    transition: .3s ease-in-out;
}
.agentSelect.inGame{
    cursor: default !important;
}
.agentSelect.hidden{
    opacity: 0; !important;
}

.agentSelect.animating,
.agentSelect.animating * {
    pointer-events: none !important;      /* ignore mouse so :hover won't trigger */
    transition: none !important;          /* cancel CSS transitions */
    -webkit-transition: none !important;
}

.agentHealth {
    position: relative;
    top: -14.3vw;
    left: 8vw;
    color: white;
    font-size: 1.3vw;
    font-family: "VALORANT", sans-serif;
    z-index: 1001;
}


#lockIn{
    margin-top: 4vh;
    width: 12vw;
    height: 4vh;
    background-color: #5d5c67;
    color: #9998aa;
    border: none;
    border-radius: 0.5vw;
    font-family: "VALORANT", sans-serif;
    font-size: 1.5vw;
    cursor: default;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: auto;
    transition-duration: 0.3s;
}
#lockIn.agentsLocked{
    opacity: 0;
    transition: .7s ease-in-out;
}
/*#lockIn:hover{
    background-color: #77768a;
    color: white;
    transition-duration: 0.3s;
}*/

#lockIn.full{
    background-color: #aa3630;
    box-shadow: 0px 0px 5vw 0.5vw rgba(250,53,53,0.46);
    color: white;
    cursor: pointer;
}
#lockIn.full:hover{
    background-color: #d94b45;
    box-shadow: 0px 0px 7vw 2vw rgba(250,53,53,0.46);
    transition-duration: 0.3s;
}

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#bottomholder {
  position: absolute;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#bottomhitbox {
  height: 5.5vw;
  width: 70vw;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: #38334a;
  opacity: 0.67;
  z-index: 99;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  cursor: pointer;
}

#hand {
  height: 15vw;
  aspect-ratio: 2/3;
  position: fixed;
  border-radius: 0.5vw;
  background-color: #231d2d;
  opacity: 0.67;
}

.card {
  height: 15vw;
  border-radius: 0.5vw;
  aspect-ratio: 2/3;
  cursor: pointer;
  position: fixed;
  background-image: url("images/luant-s-artworks-comm-avocadocat-megu.jpg");
  background-size: cover;
  z-index: 2;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}



@keyframes pulseBorder {
  0%, 100% {

    filter: brightness(0) saturate(100%) invert(91%) sepia(24%) saturate(5001%) hue-rotate(342deg) brightness(89%) contrast(92%);

  }
  50% {
    filter: brightness(0) saturate(100%) invert(90%) sepia(12%) saturate(6531%) hue-rotate(358deg) brightness(100%) contrast(106%);

  }
}

#container2 {
  display: flex;
  justify-content: center;
  align-items: end;
}

.drop {
  height: 15vw;
  aspect-ratio: 2/3;
  background-color: #38334a;
  position: fixed;
  border-radius: 0.5vw;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}

#drop1 {
  left: 32.5vw;
  top: calc(50vh - 16vw);
}
#drop2 {
  left: 45vw;
  top: calc(50vh - 16vw);
}
#drop3 {
  left: 57.5vw;
  top: calc(50vh - 16vw);
}
#drop4 {
  left: 32.5vw;
  top: calc(50vh + 1vw);
}
#drop5 {
  left: 45vw;
  top: calc(50vh + 1vw);
}
#drop6 {
  left: 57.5vw;
  top: calc(50vh + 1vw);
}

.slidecontainer {
  position: fixed;
  top: 1vw;
  left: 1vw;
}

.slider {
  -webkit-appearance: none;
  width: 15vw;
  height: 1vw;
  border-radius: 0.4vw;

  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2.5vw;
  height: 2.6vw;
  background: url("images/betterchibijett.png");
  background-size: cover;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5vw;
  height: 1.5vw;
  background: url("images/betterchibijett.png");
  background-size: cover;
  cursor: pointer;
}

:root {
  --pinkie: #F2C3F7;
  --menu: 32, 31, 33;
}

#shopBtnCnt{
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  position: fixed;
  top: 45vh;
  left: 12vw;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6vw;
  height: 6vw;
  background-color: rgba(141, 133, 171);
  border-radius: 50%;
  cursor: pointer;
  transition-duration: 0.5s;
}

#shopText {
  font-family: "VALORANT", sans-serif;
  color: #38334a;
  font-size: 1vw;
  transition-duration: 0.5s;
  text-overflow: ellipsis;
}

#shopBtnCnt:hover{
  background-color: #38334a;

  #shopText{
    color: white;
  }
}

#shopMenu {
  top: 100vh;
  position: fixed;
  height: 92vh;
  border-radius: 0.8vw;
  width: 80vw;
  right: 10vw;
  background-color: rgba(var(--menu), 0.8);
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  z-index: 99;
  backdrop-filter: blur(14.8px);
  -webkit-backdrop-filter: blur(14.8px);
  display: flex;
  justify-content: center;
}


.spawnButtons{
  cursor: pointer;
    user-select: none;
    pointer-events: auto;
    z-index: 100;
    border-radius: 0.2vw;
    border: none;
    font-family: "futura-100", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1vw;
}

.spawnButtons:disabled{

}

#shopContainer{
  z-index: 98;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
}

#buttonHolder{
    display: flex;
    position: relative;
    left: 12.5%;
    top: -4vw;
    width: 65%;
    height: 70%;
    border-radius: 0.8vw;
    justify-content: center;
    align-items: center;
    gap: 0.2vw;
    /*background-color: bisque;*/
}

#sidearms{
    display: flex;
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.2vw;
    height: 100%;
    left: -1vw;
}

#sidearms button {
    width: 8vw;
    height: 5.5vw;
}

#sNs{
    display: flex;
    height: 100%;
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.2vw;
}

#sNs button {
    width: 9.5vw;
    height: 6.5vw;
}

#rifles{
    display: flex;
    height: 100%;
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.2vw;
}

#rifles button {
    width: 11.5vw;
    height: 6.9vw;
}

#heavies {
    display: flex;
    height: 100%;
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.2vw;
}

#marshalBtn, #outlawBtn, #operatorBtn {
    width: 13.5vw;
    height: 4.25vw;
}

#aresBtn, #odinBtn {
    height: 6.45vw;
    width: 13.5vw;
}

.category {
    width: 100%;
    height: 1.5vw;
    background-color: rgba(141, 133, 171);
    text-align: center;
    border-radius: 0.2vw;
    line-height: 1.5vw;
    user-select: none;
    pointer-events: auto;
    font-family: "futura-100", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#abilityHolder{
    display: flex;
    position: fixed;
    top: 36vw;
    left: 24vw;
    width: 65%;
    height: 10%;
    border-radius: 0.8vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.2vw;
    z-index: 100;
}

#abilities{
    display: flex;
    gap: 0.2vw;
    z-index: 1000000;
}

#abilityHolder .category {
    width: 85%;
    position: relative;
    left: -0.5vw;
}

#ab1 {
    width: 11.5vw;
    height: 6.5vw;
    background-position: center;
    background-size: cover;
}

#ab2 {
    width: 11.5vw;
    height: 6.5vw;
    background-position: center;
    background-size: cover;
    cursor: pointer !important;
}

#ab3 {
    width: 11.5vw;
    height: 6.5vw;
    background-position: center;
    background-size: cover;
}

#agentBtn{
    width: 8vw;
    height: 6.5vw;
    position: relative;
    left: -1vw;
    background-color: darkseagreen;
    border-radius: 0.2vw;
    justify-content: flex-end;
    align-items: center;
    display: flex;
    flex-direction: column;
    background-size: cover;
    cursor: pointer !important;
    z-index: 10000;
    user-select: none;
}

#arrows{
    display: flex;
    gap: 0.5vw;
    pointer-events: none;
    z-index: 1;
}

#agentTxt{
    font-family: "futura-100", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1vw;
}

.arrow {
    background-color: white;
    border: 1px solid black;
    width: 0.5vw;
    height: 0.5vw;
    border-radius: 50%;
    position: relative;
    top: -0.2vw;
}

#luh {
  width: 20vw;
  left: 0;
  position: fixed;
  height: 99.5%;
  border-radius: 0.8vw;
  border-color: #dca61e;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  z-index: 99;
  transition: 0.5s;
  border-style: double;
}

#luh:hover{
  background-color: rgba(141, 133, 171, 0.4);
  transition-timing-function: ease;
}

#exit {
  font-family: "Open Sans", sans-serif;
  font-size: 2vw;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  top: 1vw;
  right: 2vw;
  position: fixed;
  width: 10vw;
  height: 8vh;
 color: var(--pinkie);
 cursor: pointer;
 border: var(--pinkie) 3px solid;
 padding: 0.25em 0.5em;
 box-shadow: var(--pinkie) 1px 1px 0px 0px, var(--pinkie)  2px 2px 0px 0px, var(--pinkie) 3px 3px 0px 0px, var(--pinkie) 4px 4px 0px 0px, var(--pinkie) 5px 5px 0px 0px;
 user-select: none;
 -webkit-user-select: none;
 touch-action: manipulation;
  z-index: 102;
}

#exit:active {
  box-shadow: 0px 0px 0px 0px;
  top: 1vw;
  right: 2vw;
}

#health {
  position: fixed;
  top: 3vw;
  left: 50vw;
  font-family: 'VALORANT', sans-serif;
  color: white;
  font-size: 3vw;
}

#money {
    position: fixed;
    top: 3vw;
    left: 5vw;
    font-family: 'VALORANT', sans-serif;
    color: white;
    font-size: 3vw;
}

/* HTML: <div class="parallelogram"></div> */
#endRound {
    position: fixed;

    height: 2.3vw;
    width: 10vw;
    mask:
            conic-gradient(from 45deg at 2vw 2vw,#000 75%,#0000 0) -2vw 0/100% 51% repeat-x,
            conic-gradient(from 135deg at 2vw calc(100% - 2vw),#0000 25%,#000 0) -2vw 100%/100% 51% repeat-x;
    background: rgba(141, 133, 171);

    right: 1vw;
    top: 45vh;

    text-align: center;
    line-height: 2.5vw;
    font-family: 'VALORANT', sans-serif;
    color: white;
    font-size: 1vw;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    transition-duration: 0.5s;
    cursor: pointer;
}

#endRound:hover{
    background-color: #38334a;
    transition-timing-function: ease;
    transition-duration: 0.5s;
}

.cardInfo {
    position: absolute;
    bottom: calc(100% + 8px); /* place above card */       /* place above the card */
    left: 50%;
    transform: translateX(-50%);
    min-width: 10vw;
    max-width: 20vw;
    padding: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    background: rgba(255,255,255,0.95);
    color: #111;
    font-size: 0.9rem;
    display: none;       /* hidden */
    z-index: 2000;
    pointer-events: none; /* won't block pointer to card */
}

/* visible state */
.cardInfo.visible {
    display: block;
    pointer-events: auto;
}

/* small decorative arrow (optional) */
.cardInfo::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(255,255,255,0.95);
}

.card {
    transform-style: preserve-3d;
    perspective: 1000px;
}
.face {
    position:absolute; inset:0; backface-visibility: hidden;
}
.back {
    transform: rotateY(180deg);
    background-image: url("images/guns/back.png");
    background-size: cover;
    text-align: center;
    line-height: 14vw;
    color: #F2C3F7;
}