/* ===== SOCIOWIRE – GAME STYLE FILTER BUTTONS ===== */

/* Columns on left/right of the map */
.game-filter-column {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  z-index: 25;
  pointer-events: none; /* overlay container */
}

.game-filter-column * {
  pointer-events: auto; /* real buttons clickable */
}

.game-filter-column-left {
  left: 0.45rem;
}

.game-filter-column-right {
  right: 0.45rem;
}

/* One line: circle + vertical label */
.game-filter-item {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

/* Round “avatar style” button */
.game-filter-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #3f9dfd, #1d4ed8, #020617);
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.7),
    0 0 10px rgba(59, 130, 246, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.game-filter-circle span {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e5f2ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Selected state */
.game-filter-circle-active {
  background: radial-gradient(circle at 30% 30%, #4ade80, #16a34a, #052e16);
  border-color: #22c55e;
  box-shadow:
    0 0 16px rgba(34, 197, 94, 0.9),
    0 6px 18px rgba(0, 0, 0, 0.85);
}

/* Vertical label like AVATAR / QUEST */
.game-filter-label {
  font-size: 0.55rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f9fafb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Tiny tweak for small screens */
@media (max-width: 480px) {
  .game-filter-circle {
    width: 46px;
    height: 46px;
  }
}