body {
  margin: 0;
  padding: 0;
  max-height: 100vh;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial,
    sans-serif;
    font-weight: bold;
  background: #2E1A47;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;

}

h1 {
 margin-top: 75px;
   font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial,
    sans-serif;

}

/* Single row container for agents */
#agentList {
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping to a second line */
  overflow-x: auto;
  gap: 5px;
  padding-bottom: 10px;
  margin-top: 75px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For IE and Edge */
}
#agentList::-webkit-scrollbar {
  display: none;
}

/* Each agent box */
#agentList div {
  cursor: pointer;
  border: 10px solid transparent;
  transition: border-color 0.3s, transform 0.2s;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 8px;
  box-sizing: border-box;
  vertical-align: top;
}
#agentList div p {
  display: none; /* Hide name overlay until hover if desired */
  position: absolute;
 bottom: 0px;       /* 8px above the bottom edge */
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px 10px;
  border-radius: 4px;
}
#agentList div:hover {
  border-color: #ffd700;
  transform: scale(1.05);
}
#agentList div:hover p {
  display: block;
}

/* Agent images */
#agentList img {
  width: 300px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Fade‑in animation for agents */
@keyframes fadeInAgents {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in-agent {
animation: fadeInAgents 0.5s ease-out forwards;
}

/* Loader overlay and spinner */
#loader {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #2E1A47;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
  position: relative;
  height: 100vh;
  
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Content slide-in */
.hidden {
  opacity: 0;
  transform: translateY(30px);
}
.slide-in {
  animation: slideIn 0.5s ease-out forwards;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Each gear's base shape */

.loader-text {
 font-size: 2rem;
  font-weight: bold;
 color: #fff;
  font-family: inherit;
   position: relative;
  z-index: 2;
}

/* Purple gear image */

@media (max-width: 600px) {
  h1            { margin-top: 32px; font-size: 1.8rem; }
  #agentList    { margin-top: 32px; gap: 8px; }

  /* let the same CSS work on any phone width */
  #agentList img {
    width: 70vw;            /* fills ~70 % of the screen */
    max-width: 260px;       /* never get larger than desktop size */
  }

  #agentList div {
    border-width: 6px;      /* lighter frame on small screens */
  }

  /* names always visible – no hover on touch    */
  #agentList div p {
    display: block;
    position: static;
    margin-top: .5rem;
    background: transparent;
    transform: none;
  }
  @media (max-width: 600px) {
    .gear { width: 120px; height: 120px; }
  }
  
}
/* ----- DESKTOP / LAPTOP (mouse, track-pad) ----- */


/* ----- TOUCH DEVICES (phones / tablets) -------- */
@media (pointer: coarse) {
  #agentList           { scroll-snap-type: x mandatory; }  /* always centres after swipe */
  #agentList > div     { scroll-snap-align: center; }
}